Cách định kích thước hình ảnh chuẩn SEO

Đo kích thước rộng nhất mà hình ảnh hiển thị, nhân đôi kích thước đó cho màn hình có mật độ điểm ảnh cao và thay đổi kích thước toàn bộ thư viện của bạn theo con số đó. Việc đưa một bức ảnh 4000 pixel vào một khung hiển thị 800 pixel đồng nghĩa với việc trình duyệt phải tải xuống lượng dữ liệu pixel nhiều gấp khoảng 25 lần so với mức có thể hiển thị, sau đó loại bỏ phần còn lại.

Trên kết nối điện thoại, khách truy cập phải trả tiền cho toàn bộ lượng dữ liệu đó, cả về thời gian lẫn dung lượng. Định kích thước hình ảnh chính xác thường là cách giảm dung lượng trang lớn nhất hiện có cho một trang web và việc này chỉ mất một lượt xử lý hàng loạt thay vì phải thiết kế lại toàn bộ.

Tại sao hình ảnh quá khổ lại tốn kém đến vậy

Dung lượng tệp tỷ lệ thuận với số lượng pixel, vì vậy việc giảm một nửa chiều rộng và chiều cao sẽ loại bỏ khoảng 75 phần trăm dữ liệu. Mối quan hệ này là hàm bậc hai chứ không phải tuyến tính, đó là lý do tại sao sự lãng phí tăng lên rất nhanh.

Hàng đầu tiên là trường hợp phổ biến trên các trang web nơi người biên tập tải ảnh trực tiếp từ máy ảnh lên. Trình duyệt tải xuống 4.2 MB, thu nhỏ lại và hiển thị nội dung tương đương với một tệp 180 KB.

Cách đo kích thước hiển thị thực tế

Nhấp chuột phải vào hình ảnh trên trang đang hoạt động của bạn, chọn Kiểm tra (Inspect) và đọc kích thước hiển thị thay vì kích thước gốc. Trình duyệt báo cáo cả hai con số và khoảng cách giữa chúng chính là phần lãng phí.

Hãy kiểm tra trường hợp hiển thị rộng nhất thay vì trường hợp điển hình. Một hình ảnh bên trong cột bài viết có thể hiển thị ở mức 700 pixel trên máy tính để bàn và 380 pixel trên điện thoại, vì vậy 700 là con số quan trọng. Hãy thử nghiệm ở cửa sổ trình duyệt rộng nhất mà khách truy cập của bạn thực tế sử dụng, vì biểu ngữ có chiều rộng đầy đủ (full width banner) sẽ tăng theo khung hình và cần một cách tính toán khác.

Quy tắc nhân đôi cho màn hình mật độ điểm ảnh cao

Nhân chiều rộng hiển thị với 2 và dừng lại ở đó, bởi vì màn hình vượt quá mật độ đó không cho thấy sự cải thiện nào khác mà người dùng có thể nhận ra. Một hình ảnh hiển thị ở mức 700 pixel nên được xuất ra ở mức 1400 pixel.

Việc nhân ba thỉnh thoảng được đề xuất nhưng hiếm khi có lý do chính đáng. Sự khác biệt giữa mật độ gấp 2 và gấp 3 lần là không thể phát hiện được ở khoảng cách xem thông thường, trong khi dung lượng tệp tăng hơn một nửa. Nén mạnh hơn ở mật độ gấp 2 lần mang lại kết quả tốt hơn so với nén nhẹ ở mật độ gấp 3 lần, vì các pixel bổ sung sẽ che giấu các vết mờ do nén.

Các chiều rộng hiển thị phổ biến để thay đổi kích thước

• Hình ảnh trong bài viết: hiển thị khoảng 700 px, xuất ra ở mức 1400 px.
• Ảnh lớn đầu trang (full width hero): hiển thị lên tới 1920 px, xuất ra ở mức 1920 px và nén mạnh hơn.
• Ảnh nổi bật nửa chiều rộng: hiển thị khoảng 600 px, xuất ra ở mức 1200 px.
• Ảnh thu nhỏ lưới sản phẩm: hiển thị khoảng 300 px, xuất ra ở mức 600 px.
• Ảnh tác giả hoặc ảnh hồ sơ: hiển thị khoảng 80 px, xuất ra ở mức 160 px.
• Logo trên thanh đầu trang: hiển thị khoảng 180 px, xuất ra ở mức 360 px hoặc sử dụng đồ họa vector.

Tại sao hình ảnh có chiều rộng đầy đủ là ngoại lệ

Biểu ngữ có chiều rộng đầy đủ không có kích thước hiển thị cố định, vì vậy hãy giới hạn ở mức 1920 pixel và nén mạnh hơn thay vì nhân đôi. Nhân đôi một hình ảnh có chiều rộng đầy đủ lên 3840 pixel sẽ tạo ra một tệp mà không trang web nào có thể chấp nhận được.

Biểu ngữ thường được xem từ xa và chứa ít chi tiết nhỏ hơn so với ảnh chụp sản phẩm, điều đó có nghĩa là việc nén mạnh sẽ ít bị chú ý hơn. Một biểu ngữ 1920 pixel ở chất lượng 70 trong định dạng WebP thường có dung lượng dưới 200 KB và trông chuẩn xác trên mọi màn hình, trong khi phiên bản 3840 pixel không mang lại lợi ích rõ rệt nào nhưng lại nặng gấp 4 lần.

Cách khắc phục cho toàn bộ thư viện

Để thay đổi kích thước trang web hiện tại một cách chính xác, hãy làm theo 6 bước sau.

1. Liệt kê các khung hình ảnh trong thiết kế của bạn, thường chỉ có 4 đến 6 kích thước riêng biệt chứ không phải hàng chục.
2. Đo chiều rộng hiển thị của từng khung bằng công cụ kiểm tra của trình duyệt trên trang đang hoạt động.
3. Nhân đôi từng chiều rộng để có kích thước xuất ảnh của bạn.
4. Sắp xếp thư viện vào các thư mục theo khung hiển thị, vì một lượt xử lý hàng loạt sẽ áp dụng một kích thước cho mọi tệp trong đó.
5. Thay đổi kích thước từng thư mục theo chiều rộng mục tiêu, sau đó nén và chuyển đổi trong cùng một lượt.
6. Thay thế các tệp và giữ nguyên tên cũ để các trang hiện có tiếp tục hoạt động bình thường.

Sắp xếp vào các thư mục là bước biến việc này thành một công việc xử lý hàng loạt. Hầu hết các trang web sử dụng ít kích thước hình ảnh riêng biệt hơn họ nghĩ và việc nhóm theo khung hiển thị sẽ loại bỏ nhu cầu xử lý từng tệp riêng lẻ.

Hình ảnh phản hồi (responsive images) và thuộc tính srcset

Sử dụng srcset để cung cấp nhiều kích thước và để trình duyệt chọn kích thước phù hợp cho từng thiết bị. Khi đó, điện thoại sẽ tải xuống tệp 400 pixel trong khi máy tính để bàn tải xuống tệp 1400 pixel từ cùng một mã nguồn.

Tạo ra 3 chiều rộng cho mỗi hình ảnh, thường là 400, 800 và 1600 pixel, rồi liệt kê chúng cùng với chiều rộng pixel của chúng để trình duyệt có thể lựa chọn. Hầu hết các hệ thống quản lý nội dung đều tự động tạo ra các kích thước này khi tải lên, vì vậy hãy kiểm tra xem nền tảng của bạn đã hỗ trợ chưa. Nếu có, việc tải lên một ảnh gốc có kích thước chuẩn vẫn giúp cải thiện mọi biến thể được tạo ra.

Luôn thay đổi kích thước trước khi nén

Thay đổi kích thước trước có nghĩa là quá trình nén sẽ có ít việc phải làm hơn, nhờ đó chất lượng có thể giữ ở mức cao trong khi dung lượng tệp vẫn nhỏ. Việc nén trước rồi thay đổi kích thước sau sẽ loại bỏ các chi tiết mà sau đó bạn lại tiếp tục vứt bỏ một lần nữa.

Thứ tự thực hiện cũng ảnh hưởng đến giao diện của kết quả. Một hình ảnh được nén ở kích thước đầy đủ sẽ mang các vết mờ do nén (artefacts) và chúng sẽ trở nên rõ ràng hơn khi hình ảnh được thu nhỏ, vì các vết mờ đó cũng thu nhỏ theo. Thay đổi kích thước trước sẽ tạo ra một nguồn sạch hơn cho bộ mã hóa và mang lại kết quả tốt hơn rõ rệt ở cùng một dung lượng tệp.

Điều này ảnh hưởng thế nào đến tốc độ trang

Định kích thước hình ảnh chính xác thường loại bỏ 60 đến 90 phần trăm dung lượng hình ảnh trên một trang web chưa từng thực hiện việc này. Sự cải thiện này lớn hơn bất kỳ sự thay đổi định dạng nào và thường lớn hơn tất cả các tối ưu hóa khác cộng lại.

Hiệu quả tập trung vào khách truy cập bằng thiết bị di động, nơi kết nối chậm hơn và dữ liệu tốn tiền hơn. Chỉ số Largest Contentful Paint được cải thiện trực tiếp, vì phép đo đó thông thường được quyết định bởi một hình ảnh lớn. Việc vượt qua bài kiểm tra Định kích thước hình ảnh chính xác (Properly size images) trong Lighthouse thường giúp xóa bỏ 2 hoặc 3 cảnh báo liên quan cùng một lúc.

Không bao giờ phóng to hình ảnh để cho vừa

Việc phóng to sẽ thêm các pixel mà máy ảnh chưa từng ghi lại, vì vậy kết quả sẽ bị mờ và dung lượng tệp tăng lên mà không mang lại lợi ích gì. Thu nhỏ kích thước luôn an toàn, trong khi phóng to là thao tác duy nhất chắc chắn sẽ làm ảnh trông tệ hơn.

Trong trường hợp hình ảnh nguồn nhỏ hơn khung hiển thị cần lấp đầy, các lựa chọn hợp lý là sử dụng hình ảnh đó ở kích thước tự nhiên của nó, cắt bớt bố cục xung quanh nó hoặc thay thế hình ảnh khác. Việc phóng to một bức ảnh 600 pixel lên 1600 pixel sẽ tạo ra một tệp mờ căm có dung lượng gấp 4 lần ảnh gốc, thất bại cả về chất lượng lẫn tốc độ cùng một lúc.

Kiểm tra một trang để tìm hình ảnh quá khổ

Mở công cụ dành cho nhà phát triển, chuyển sang tab Mạng (Network), lọc theo hình ảnh và tải lại trang. Danh sách hiển thị mọi hình ảnh cùng với dung lượng đã truyền của nó, được sắp xếp theo thứ tự lớn nhất trước.

Bất kỳ hình ảnh đơn lẻ nào trên 500 KB đều đáng để kiểm tra và bất kỳ trang nào có tổng dung lượng hình ảnh lớn hơn 2 MB đều đang gặp vấn đề. Di chuột qua một hình ảnh trong bảng Thành phần (Elements) để xem kích thước gốc và kích thước hiển thị của nó cạnh nhau. Khoảng cách lớn giữa 2 con số này chính là định nghĩa của một hình ảnh có kích thước không chính xác và bạn có thể nhận ra điều đó chỉ trong vài giây.

Thay đổi kích thước thư viện trong một lượt xử lý hàng loạt

Đặt chiều rộng mục tiêu một lần và áp dụng cho mọi tệp trong thư mục, thay vì thay đổi kích thước từng hình ảnh riêng lẻ. Một thư viện gồm vài trăm hình ảnh sẽ được thay đổi kích thước trong vài phút khi công việc được xử lý hàng loạt.

Thả tối đa 500 tệp cùng một lúc hoặc kéo trực tiếp một tệp lưu trữ ZIP vào, rồi đặt chiều rộng, định dạng và mục tiêu nén cho toàn bộ tệp. Mọi thứ đều chạy bên trong trình duyệt trên bộ vi xử lý của riêng bạn, vì vậy các trang web của khách hàng, tài nguyên thử nghiệm và các bộ sưu tập chưa xuất bản không bao giờ được gửi đến máy chủ. Không có gì được tải lên, điều đó có nghĩa là việc thay đổi kích thước toàn bộ thư viện diễn ra mà không có một tệp nào phải truyền qua mạng.