Hình ảnh đáp ứng Joomla 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ó cảm giác cồng kềnh 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 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. Đó không phải là lý do để lo lắng. Với plugin Droppics của Joomla!, bạn không chỉ có thể áp dụng tối ưu hóa chung cho hình ảnh mà còn 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 srcset HTML

Nếu bạn đã từng học 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 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ể kích thước lớn đến đâu.

Ví dụ: nếu bạn có biểu ngữ anh hùng ở đầu bài viết, hình ảnh tương tự 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 rồi thu nhỏ nó xuống, đôi khi 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 có thể xác định không chỉ nguồn cho hình ảnh mà còn cả tập hợp nguồn—bộ nguồn srcset .

Đúng như tên gọi, 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 một chiều rộng trình duyệt để thiết bị di động tải xuống các hình ảnh nhỏ và người dùng truy cập Joomla! blog từ máy tính để bàn tải xuống hình ảnh có độ phân giải đầy đủ. Nói cách khác, image srcset biến hình ảnh thành hình ảnh phản hồi.

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 được thu nhỏ trên Joomla! với Droppics

Bạn có thể biết đến Droppics đơn giản là một Joomla! tiện ích mở rộng trình quản lý thư viện, nhưng có rất nhiều điều xảy ra ẩn giấu mà bạn có thể không biết. Trường hợp điển hình: Droppics 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 thì có thể bạn cũng chưa 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 tới thông số chính trong tùy chọn của Droppics và bật hình ảnh phản hồi trong số các tùy chọn đầu tiên. Lưu các thay đổi để cam kết cài đặt mới.

Như hình ảnh phản hồi sẽ cho bạn biết, bằng cách bật cài đặt Droppics sẽ tạo hai hình thu nhỏ mới cho mọi Joomla! hình ảnh mà bạn có. Bản thân những hình thu nhỏ này là những 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 một 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 ở giao diện người dùng và bạn sẽ tìm thấy nhiều nguồn cho các kích cỡ thiết bị khác nhau.

Tối ưu hóa chung là tốt, cũng như lazy loading , nhưng đôi khi, họ chỉ có thể làm được rất nhiều điều. Trong một số trường hợp, việc sử dụng kỹ thuật HTML hiện đại để cung cấp 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 ghép còn thiếu trong câu đố.

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

Bạn có thể thắc mắc liệu 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 sợ rằng các hình ảnh mới sẽ bị chồng lên nhau. Chỉ vì bạn đang sử dụng bộ 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 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 đi tới 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ối ưu hóa phương tiện khi lưu các tệp . 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 giao diện của 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.