Hiển thị hình ảnh tương thích trên Joomla bằng cách sử dụng srcset và nén

Tối ưu hóa? Đã xong. Lazy loading ? Cũng đã xong. Tuy nhiên, trang web Joomla! của bạn vẫn hoạt động chậm chạp 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 phát huy tác dụng; chính xác hơn, đó là các thiết lập nguồn hình ảnh, hay srcset .

Có thể blog Joomla! của bạn sử dụng những hình ảnh chất lượng cao và bạn không thể—hoặc không muốn—loại bỏ chúng. Điều đó không có gì đáng lo ngại. Với plugin Droppics của Joomla!, bạn không chỉ có thể tối ưu hóa chung cho hình ảnh mà còn có thể cung cấp 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 đáp ứng với thuộc tính srcset của HTML

Nếu bạn đã từng làm quen với HTML, bạn sẽ biết rằng hình ảnh được xác định bởi thuộc tính nguồn — `src` . Nguồn hình ảnh là vị trí mà trình duyệt tải hình ảnh để hiển thị cho người dùng Joomla! của bạn. Vấn đề khi 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ể kích thước lớn đến đâu.

Ví dụ, nếu bạn có một banner nổi bật ở đầu bài viết, hình ảnh đó sẽ được tải trên tất cả các thiết bị. Trình duyệt tải hình ảnh xuống và sau đó thu nhỏ kích thước, đôi khi là rất nhiều, đặ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 một nguồn hình ảnh, mà còn cả một tập hợp các nguồn – tập hợp nguồn srcset .

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

Việc sử dụng bộ ảnh nguồn không chỉ mang lại tốc độ 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 có được với cái giá nhỏ là phải có nhiều bản sao của cùng một hình ảnh với độ phân giải khác nhau, sẵn sàng cho người dùng khi cần. Bạn có thể đọc thêm về srcset và mọi thứ liên quan đến bộ ảnh nguồn tại đây , nhưng nếu bạn đang nóng lòng muốn bắt đầu sử dụng chúng trên blog Joomla! của mình, hãy tiếp tục đọc.

Hiển thị hình ảnh thu nhỏ trên Joomla! với Droppics

Có thể bạn chỉ biết đến Droppics như một tiện ích quản lý thư viện ảnh cho Joomla!, nhưng thực tế có rất nhiều điều xảy ra bên trong mà bạn có thể chưa biết. Ví dụ: Droppics hiện đang sử dụng bộ nguồn để tải đúng hình ảnh cho người dùng của bạn. Nếu bạn không biết về tính năng này, rất có thể bạn cũng chưa tận dụng hết tiềm năng của nó.

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

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

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

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

Nhưng khoan đã, đó chưa phải là tất cả. Vẫn còn một mảnh ghép còn thiếu trong bức tranh này.

Nén ảnh có thuộc tính srcset trên Joomla!

Có thể bạn đang tự hỏi liệu việc có nhiều bản sao của cùng một hình ảnh có đáng giá hay không. Có lẽ bạn muốn tiết kiệm dung lượng máy chủ hoặc bạn lo ngại rằng các hình ảnh mới sẽ tích tụ quá nhiều. Chỉ vì bạn đang sử dụng bộ ảnh nguồn, 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 các hình ảnh trong bộ nguồn Joomla! ngay khi chúng được tạo ra. Bạn có thể tiết kiệm đến 80% với nén mất dữ liệu (lossy compression) hoặc nén tốt nhất (best saving), và đến 20% với nén không mất dữ liệu (lossless compression) hoặc nén gốc (original compression). Bạn có thể đọc thêm về sự khác biệt tại đây .

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

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