Phục vụ hình ảnh có tỷ lệ phù hợp trên trang web WordPress hoặc Joomla của bạn

Chụp bất kỳ hình ảnh nào trên blog WordPress hoặc Joomla của bạn. Nếu bạn đánh giá chất lượng, rất có thể hình ảnh đó đủ lớn để nó phải được thu nhỏ lại để phù hợp với thiết bị máy tính để bàn của độc giả, chứ đừng nói đến thiết bị di động. Chất lượng thì tốt, nhưng những chiếc ốp lưng như thế này có giá rất cao.

Để chứa được nhiều màn hình khác nhau nhất có thể với một hình ảnh, bạn phải sử dụng một hình ảnh lớn. Đổi lại, điều đó chuyển thành các tệp lớn phải được tải xuống toàn bộ ngay cả trên các thiết bị nhỏ. Có một giải pháp: cung cấp hình ảnh được chia tỷ lệ tùy thuộc vào thiết bị hiển thị, cho dù là máy tính để bàn, máy tính bảng hay thiết bị di động.

Cung cấp hình ảnh được chia tỷ lệ trên WordPress và Joomla bằng CSS

Hình ảnh chiếm bao nhiêu dung lượng trong các trang web? Không có quy tắc cứng nhắc và nhanh chóng nào, nhưng xét đến tầm quan trọng và tính phổ biến của chúng, câu trả lời chắc chắn là rất nhiều. Nếu bạn đang phân phát hình ảnh mà cuối cùng bạn sẽ phải thay đổi kích thước, điều đó chỉ có ý nghĩa tiết kiệm và phục vụ người dùng WordPress hoặc Joomla của bạn bằng những hình ảnh đã được thu nhỏ lại để tăng tốc thời gian tải trang web của bạn.

CSS ở đó để trợ giúp với một tập hợp các thuộc tính tương đối chưa được biết đến, nhưng vô giá: srcset , kích thước và phương tiện . Các thuộc tính này — tất cả đều được hỗ trợ bởi hầu hết các trình duyệt web hiện đại — cho phép bạn chỉ định phiên bản hình ảnh nào sẽ phân phát tùy thuộc vào kích thước của chế độ xem.

Các srcset bổ sung thông thường src tab. Như tên thuộc tính ngụ ý, thay vì chỉ định một hình ảnh duy nhất, bạn sử dụng nó để chỉ định danh sách các hình ảnh được chia tỷ lệ và chiều rộng khi mỗi hình ảnh nên được sử dụng. Được sử dụng cùng với nó là thuộc tính kích thước , bạn có thể xác định thời điểm hiển thị hình ảnh dựa trên chiều rộng khung nhìn.

Bạn có thể đọc thêm về các thuộc tính này tại đây , nhưng tin tốt là trong vài năm qua, WordPress tự động thay đổi tỷ lệ hình ảnh của bạn và phân phối kích thước phù hợp với lượng độc giả của bạn. Kết quả thật đáng kinh ngạc: một hình ảnh chân dung có 511Kb bị giảm xuống còn 42Kb trên thiết bị di động.

Tự động thay đổi tỷ lệ và tối ưu hóa với ImageRecycle

Khi nói đến kích thước hình ảnh, càng nhỏ càng tốt, miễn là chất lượng không bị ảnh hưởng. Mặc dù WordPress giúp bạn bằng cách sử dụng srcset , nhưng bạn có thể làm nhiều hơn để giảm thiểu kích thước hình ảnh, đặc biệt là bằng cách thay đổi tỷ lệ và nén hình ảnh.

ImageRecycle là một plugin có thể thay đổi tỷ lệ và nén hình ảnh đồng thời cho bạn và có sẵn trên cả WordPress và Joomla. Hơn hết, bạn có thể sử dụng ImageRecycle để thay đổi tỷ lệ và nén hình ảnh tự động.

Thay đổi tỷ lệ đặc biệt hữu ích nếu bạn thấy mình đang sử dụng hình ảnh có sẵn trong blog WordPress hoặc Joomla của mình. Những hình ảnh này thường lớn không cân đối để tính cho mọi mục đích sử dụng, bao gồm cả giấy in. Trên web, rất ít khả năng bạn sẽ cần sử dụng toàn bộ độ phân giải của chúng. Với ImageRecycle , bạn có thể tự động chia lại tỷ lệ hình ảnh lớn xuống chiều cao hoặc chiều rộng tối đa khi tải lên.

Bổ sung cho việc thay đổi tỷ lệ là tính năng nén, giúp tối ưu hóa kích thước hình ảnh mà không làm giảm chất lượng. Với tính năng nén mất dữ liệu, bạn có thể hạn chế dung lượng hình ảnh lên đến 80%. Điều này không chỉ áp dụng cho các hình ảnh gốc mà còn cho các hình ảnh được thay đổi tỷ lệ bởi WordPress. Một lần nữa, ImageRecycle có thể tự động làm việc này cho bạn.

Những gì bạn thấy là một vài kilobyte thừa có thể có nghĩa là thời gian quý giá đã mất cho độc giả của bạn. Tin tốt là bạn không phải hy sinh chất lượng cho thời gian tải. Với việc sử dụng thông minh hơn khả năng thay đổi tỷ lệ và tối ưu hóa của CSS và ImageRecycle , bạn có thể có hình ảnh chất lượng cao phù hợp với thiết bị của người đọc.