Phục vụ hình ảnh được thu nhỏ đúng cách trên trang web WordPress hoặc Joomla của bạn

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

Để chứa càng nhiều màn hình khác nhau càng tốt với một hình ảnh duy nhất, bạn phải sử dụng một màn hì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: phục vụ hình ảnh được thu nhỏ tùy thuộc vào thiết bị hiển thị, cho dù máy tính để bàn, máy tính bảng hoặc điện thoại di động.

Phục vụ hình ảnh thu nhỏ trên WordPress và Joomla bằng CSS

Làm thế nào nhiều hình ảnh chiếm trong các trang web? Không có quy tắc cứng và nhanh, nhưng xem xét 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ục vụ hình ảnh mà cuối cùng bạn sẽ thay đổi kích thước, điều đó chỉ có ý nghĩa về mặt kinh tế và phục vụ người dùng WordPress hoặc Joomla của bạn với những hình ảnh đã được thu nhỏ để 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.