Hiển thị hình ảnh có kích thước phù hợp trên trang web WordPress hoặc Joomla của bạn

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

Để có thể hiển thị trên nhiều thiết bị khác nhau nhất có thể với một hình ảnh duy nhất, bạn phải sử dụng hình ảnh có kích thước lớn. Điều này dẫn đến việc phải tải xuống các tệp tin có dung lượng lớn, ngay cả trên các thiết bị nhỏ. Có một giải pháp: hiển thị hình ảnh được điều chỉnh kích thước 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 điện thoại di động.

Hiển thị hình ảnh thu nhỏ trên WordPress và Joomla bằng CSS

Hình ảnh chiếm bao nhiêu dung lượng trên các trang web? Không có quy tắc cụ thể nào, nhưng xét đến tầm quan trọng và sự 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 sử dụng hình ảnh mà sau này cũng sẽ phải thu nhỏ lại, thì việc tiết kiệm dung lượng bằng cách cung cấp cho người dùng WordPress hoặc Joomla những hình ảnh đã được thu nhỏ sẵn sẽ giúp tăng tốc độ tải trang web.

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

`srcset` bổ `src` thông thường . Như tên thuộc tính đã gợi ý, thay vì chỉ định một hình ảnh duy nhất, bạn sử dụng nó để chỉ định một danh sách các hình ảnh được thu nhỏ 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à `sizes` , cho phép bạn xác định thời điểm hiển thị hình ảnh dựa trên chiều rộng của khung nhìn.

Bạn có thể tìm hiểu 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 trở lại đây, WordPress tự động điều chỉnh kích thước hình ảnh và hiển thị kích thước phù hợp cho người đọc. Kết quả thật đáng kinh ngạc: một hình ảnh chân dung có dung lượng 511Kb được giảm xuống còn 42Kb trên thiết bị di động.

Tự động điều chỉnh kích thước và tối ưu hóa với ImageRecycle

Khi nói đến kích thước ả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 hỗ trợ bạn bằng cách sử dụng srcset , nhưng bạn vẫn có thể làm nhiều hơn nữa để giảm thiểu kích thước ảnh, đặc biệt là bằng cách thay đổi kích thước và nén ảnh.

ImageRecycle là một plugin có thể đồng thời thay đổi kích thước và nén ảnh, có sẵn cho cả WordPress và Joomla. Điều tuyệt vời nhất là bạn có thể sử dụng ImageRecycle để thay đổi kích thước và nén ảnh tự động.

Tính năng thu nhỏ kích thước đặc biệt hữu ích nếu bạn thường xuyên sử dụng ảnh có sẵn trên blog WordPress hoặc Joomla của mình. Những hình ảnh này thường có kích thước quá lớn so với mục đích sử dụng, bao gồm cả in ấn. Trên web, rất hiếm khi bạn 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 thu nhỏ kích thước các 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 kích thước là nén ảnh, giúp tối ưu hóa kích thước ảnh mà không làm giảm chất lượng. Với nén mất dữ liệu, bạn có thể giảm dung lượng ảnh lên đến 80%. Điều này áp dụng không chỉ cho ảnh gốc mà còn cho cả ảnh đã được WordPress thay đổi kích thước. Một lần nữa, ImageRecycle có thể tự động thực hiện việc này cho bạn.

Vài kilobyte bạn cho là thừa có thể đồng nghĩa với việc người đọc mất đi thời gian quý báu. Tin tốt là bạn không cần phải hy sinh chất lượng để có tốc độ tải nhanh hơn. Với việc sử dụng CSS thông minh hơn và khả năng điều chỉnh kích thước cũng như tối ưu hóa của ImageRecycle, bạn có thể có những hình ảnh chất lượng cao, tự động điều chỉnh phù hợp với thiết bị của người đọc.