Joomla Responsive Image Sử dụng srcset và nén

Tối ưu hóa? Kiểm tra. Lazy loading ? Kiểm tra lại. Tuy nhiên, Joomla của bạn! trang web cảm thấy lộn xộn và mất quá nhiều thời gian để tải trên thiết bị di động và kết nối chậm. Đừng tuyệt vọng — đây là lúc cấu trúc HTML trở nên hữu ích; chính xác hơn là bộ nguồn hình ảnh hoặc srcset .

Có lẽ Joomla của bạn! blog sử dụng những hình ảnh chất lượng cao và bạn chỉ không thể sử dụng hoặc không muốn làm gì với chúng. Đó không phải là lý do cho mối quan tâm. Với plugin Droppics của Joomla! Bạn không chỉ áp dụng tối ưu hóa chung cho hình ảnh mà còn phục vụ các tệp khác nhau tùy thuộc vào thiết bị của người dùng.

Hình ảnh phản hồi với srcset HTML

Nếu bạn đã từng sử dụng HTML, bạn sẽ biết rằng hình ảnh được xác định bởi một thuộc tính nguồn— src . Nguồn hình ảnh là vị trí từ đó trình duyệt tải hình ảnh để hiển thị trên Joomla của bạn! người dùng. Vấn đề với việc sử dụng một nguồn nhất quán cho một hình ảnh cụ thể là cùng một tệp sẽ luôn được tải, bất kể dung lượng lớn như thế nào.

Ví dụ: nếu bạn có biểu ngữ anh hùng ở đầu bài viết, thì cùng một hình ảnh sẽ được tải trên tất cả các thiết bị. Các trình duyệt tải xuống hình ảnh và sau đó thu nhỏ hình ảnh, đôi khi giảm đáng kể, đặc biệt là trên thiết bị di động. Với các trình duyệt hiện đại, bạn không chỉ có thể xác định nguồn cho hình ảnh mà còn có thể xác định một tập hợp các nguồn — srcset .

Như tên ngụ ý, bộ nguồn là một danh sách các nguồn, thay vì một nguồn duy nhất. Mỗi nguồn được liên kết với chiều rộng trình duyệt để thiết bị di động tải xuống hình ảnh nhỏ và người dùng truy cập Joomla của bạn! blog từ máy tính để bàn tải hình ảnh độ phân giải đầy đủ. Nói cách khác, srcset hình ảnh biến đổi hình ảnh thành hình ảnh phản ứng.

Kết quả của việc sử dụng bộ nguồn không chỉ là thời gian tải nhanh hơn mà còn cải thiện điểm SEO. Tất cả những điều này đều phải trả giá rất nhỏ là có các bản sao của cùng một hình ảnh với các độ phân giải khác nhau, luôn sẵn sàng để sử dụng khi người dùng cần. Bạn có thể đọc thêm về thuộc tính srcset và mọi thứ khác liên quan đến bộ nguồn tại đây , nhưng nếu bạn không kiên nhẫn bắt đầu sử dụng chúng trên Joomla của mình! blog, tiếp tục đọc.

Phục vụ hình ảnh thu nhỏ trên Joomla! với Giọt

Bạn có thể biết Droppics đơn giản là một Joomla! phần mở rộng trình quản lý thư viện, nhưng có rất nhiều điều xảy ra dưới mui xe mà bạn có thể không biết. Case in point: Dropppics hiện đang sử dụng bộ nguồn để tải hình ảnh phù hợp cho người dùng của bạn. Nếu bạn không biết về tính năng này, có thể bạn cũng không khai thác nó.

Để sử dụng thuộc tính srcset trên Joomla của bạn! blog, trước tiên bạn cần kích hoạt nó thông qua cấu hình Droppics của mình. Đi đến thông số chính trong tùy chọn của Droppics và kích hoạt hình ảnh đáp ứng từ trong số các tùy chọn đầu tiên. Lưu các thay đổi để thực hiện các cài đặt mới.

Như hình ảnh đáp trợ giúp cho bạn biết, bằng cách bật cài đặt Droppics sẽ tạo ra hai hình thu nhỏ mới cho mọi Joomla! hình ảnh mà bạn có. Những hình thu nhỏ này chính là hình ảnh phản hồi, hiển thị tùy thuộc vào thiết bị được sử dụng để truy cập Joomla của bạn! Blog.

Khi bạn tạo bài đăng và chèn hình ảnh Droppics, tiện ích mở rộng sẽ tự động đặt srcset cho bạn. Không tin chúng tôi? Kiểm tra HTML trong giao diện người dùng và bạn sẽ tìm thấy nhiều nguồn cho các kích thước thiết bị khác nhau.

Tối ưu hóa chung là tất cả tốt và tốt, cũng như lazy loading chậm, nhưng đôi khi, chỉ có rất nhiều điều họ có thể làm. Trong một số trường hợp, sử dụng kỹ thuật HTML hiện đại để cung cấp các bộ nguồn hình ảnh, thay vì các nguồn đơn lẻ, có thể là chìa khóa để khắc phục thời gian tải chậm.

Nhưng chờ đã, đó không phải là tất cả. Vẫn còn một mảnh còn thiếu cho câu đố.

Nén hình ảnh srcset trên Joomla!

Bạn có thể tự hỏi nếu có nhiều bản sao của cùng một hình ảnh là đáng giá. Có lẽ bạn muốn tiết kiệm không gian máy chủ hoặc bạn sợ rằng những hình ảnh mới sẽ chồng lên. Chỉ vì bạn đang sử dụng bộ nguồn, điều đó không có nghĩa là bạn không thể kết hợp nó với các kỹ thuật tối ưu hóa khác, chẳng hạn như nén.

ImageRecycle cũng có sẵn trên Joomla! và bạn có thể tích hợp nó một cách liền mạch với Droppics. Trên thực tế, bạn thậm chí có thể cấu hình nó để tự động nén Joomla của bạn! nguồn thiết lập hình ảnh ngay lập tức khi chúng được tạo. Bạn có thể tiết kiệm đến 80% với nén mất dữ liệu hoặc tiết kiệm tốt nhất và lên đến 20% với nén không mất dữ liệu hoặc nguyên bản. Bạn có thể đọc thêm về sự khác biệt ở đây .

Bạn có thể đặt ImageRecycle tự động nén hình ảnh bằng cách vào cấu hình của tiện ích mở rộng trong Joomla! Từ đó, hãy chuyển đến tab nâng cao tối ưu hóa phương tiện khi lưu . Ngoài ra, bạn có thể chọn thủ công những hình ảnh cần tối ưu hóa thông qua ImageRecycle .

Thời gian tải là một vấn đề nhiều mặt. Bạn cần đồng thời giảm thiểu kích thước tệp trong khi vẫn duy trì chất lượng và tiết kiệm dung lượng lưu trữ. Với bộ nguồn kỳ diệu của Droppics và khả năng nén của ImageRecycle , điều này không chỉ có thể thực hiện được mà còn là một quy trình tự động, dễ dàng.