Không có một kích thước ảnh website phù hợp với mọi giao diện. Cùng một bức ảnh có thể được hiển thị toàn chiều rộng trong bài viết, thu nhỏ thành thumbnail ở trang danh mục hoặc cắt thành banner trên điện thoại. Vì vậy, kích thước nên được xác định từ vùng hiển thị thực tế, tỷ lệ khung hình và mật độ điểm ảnh của thiết bị.
Cách làm an toàn là đo vùng chứa ảnh trên từng loại màn hình, chuẩn bị các phiên bản có chiều rộng phù hợp và kiểm tra trực tiếp sau khi đăng. Không nên chọn kích thước chỉ dựa trên một bảng thông số chung.
Cách xác định kích thước ảnh website
Trước khi xuất ảnh, cần phân biệt ba khái niệm:
- Kích thước hiển thị: chiều rộng và chiều cao mà người dùng nhìn thấy trên trang, thường được trình duyệt tính bằng CSS pixel.
- Kích thước tệp nguồn: số pixel thực tế của ảnh được tải lên, chẳng hạn 800 × 450 px.
- Dung lượng tệp: lượng dữ liệu cần tải, thường phụ thuộc vào nội dung ảnh, định dạng và mức nén.
Ảnh có nhiều pixel không đồng nghĩa với chất lượng hiển thị tốt hơn nếu giao diện chỉ dùng một vùng nhỏ. Ngược lại, ảnh nguồn nhỏ hơn vùng hiển thị sẽ dễ bị mờ khi trình duyệt phóng lớn.
Có thể ước tính chiều rộng ảnh nguồn theo công thức:
Chiều rộng ảnh nguồn = chiều rộng hiển thị × mật độ điểm ảnh mục tiêu
Ví dụ, nếu vùng nội dung rộng 800 CSS px, phiên bản ảnh khoảng 800 px có thể phục vụ màn hình thông thường; phiên bản khoảng 1.600 px phù hợp hơn với màn hình có mật độ điểm ảnh gấp đôi. Đây là ví dụ tính toán, không phải kích thước bắt buộc cho mọi website.
Không nên dùng chỉ số DPI làm căn cứ chính. Khi hiển thị trên web, số pixel, cách trình duyệt co giãn và mật độ điểm ảnh của thiết bị có ý nghĩa trực tiếp hơn.
Bảng chọn kích thước theo từng loại ảnh
| Loại ảnh | Cách chọn chiều rộng | Tỷ lệ khung hình | Cách nén ưu tiên |
|---|---|---|---|
| Ảnh bài viết | Theo chiều rộng cột nội dung; tạo thêm phiên bản cho màn hình mật độ cao nếu cần | Giữ tỷ lệ ảnh gốc hoặc thống nhất theo mẫu nội dung | Nén có hao hụt ở mức vừa phải đối với ảnh chụp |
| Ảnh sản phẩm | Theo khung ảnh ở trang danh mục và trang chi tiết | Đồng nhất trong cùng một danh mục | Ưu tiên giữ chi tiết, màu sắc và đường viền sản phẩm |
| Thumbnail | Theo kích thước thẻ bài viết hoặc thẻ sản phẩm | Cố định một tỷ lệ để bố cục không nhảy | Nén mạnh hơn ảnh chi tiết nếu hình vẫn rõ ở kích thước nhỏ |
| Banner | Theo chiều rộng vùng banner trên máy tính và điện thoại | Phụ thuộc bố cục, vị trí chữ và điểm tập trung | Cân bằng giữa độ nét và tốc độ tải; nên có bản riêng cho di động |
Các con số cụ thể chỉ nên được chốt sau khi đo giao diện. Nếu chưa biết vùng chứa rộng bao nhiêu, có thể tham khảo cách kiểm tra kích thước trang web trước khi xuất ảnh.
Kích thước ảnh bài viết
Kích thước ảnh bài viết nên bám theo chiều rộng tối đa của cột nội dung, không phải chiều rộng toàn màn hình. Một trang có màn hình 1.440 px nhưng cột bài viết chỉ rộng 760 px thì ảnh nội dung không nhất thiết phải tải ở chiều rộng 1.440 px cho mọi thiết bị.
Ảnh nằm toàn chiều rộng cột nội dung
Hãy đo chiều rộng lớn nhất của cột bài viết trên giao diện máy tính. Chuẩn bị ít nhất một phiên bản gần với chiều rộng đó; nếu website phục vụ màn hình mật độ cao, có thể tạo thêm phiên bản khoảng gấp đôi và để trình duyệt lựa chọn bằng srcset.
Ví dụ, với cột nội dung rộng 760 px, các tệp khoảng 760 px và 1.520 px là hai ứng viên hợp lý để thử nghiệm. Không nên tự động áp dụng ví dụ này nếu giao diện thực tế có chiều rộng khác.
Ảnh minh họa nhỏ hoặc ảnh đặt cạnh văn bản
Ảnh chỉ chiếm một phần cột nội dung cần phiên bản nhỏ hơn. Việc tải ảnh nguồn rất lớn rồi thu nhỏ bằng CSS gây lãng phí dữ liệu mà không tạo khác biệt rõ ràng cho người đọc.
Tỷ lệ ảnh bài viết
Không bắt buộc mọi ảnh trong bài phải có cùng tỷ lệ. Tuy nhiên, ảnh đại diện và ảnh xuất hiện trong danh sách bài viết nên dùng một tỷ lệ thống nhất để tránh thẻ nội dung cao thấp không đều. Với ảnh minh họa trong thân bài, nên giữ tỷ lệ gốc nếu thao tác cắt có thể làm mất thông tin.
Kích thước ảnh sản phẩm và thumbnail
Ảnh sản phẩm
Kích thước ảnh sản phẩm cần được xác định từ hai vị trí:
- Khung ảnh trên trang danh mục hoặc trang tìm kiếm.
- Vùng xem ảnh lớn trên trang chi tiết sản phẩm.
Nếu trang chi tiết có chức năng phóng to, ảnh nguồn cần đủ lớn để thể hiện phần chi tiết cần quan sát. Nếu không có chức năng này, sử dụng ảnh quá lớn chỉ làm tăng dung lượng tải.
Trong cùng một nhóm sản phẩm, nên thống nhất:
- Tỷ lệ khung hình.
- Khoảng trống quanh sản phẩm.
- Vị trí và mức phóng đại của chủ thể.
- Màu nền và cách xử lý bóng đổ.
Tỷ lệ vuông thường thuận tiện cho lưới sản phẩm, nhưng không phải quy tắc bắt buộc. Sản phẩm cao, dài hoặc cần thể hiện bối cảnh có thể phù hợp với tỷ lệ dọc hay ngang hơn. Quan trọng nhất là khung ảnh trên giao diện phải hỗ trợ đúng tỷ lệ đã chọn.
Thumbnail
Thumbnail cần được thiết kế theo tỷ lệ của thẻ nội dung, thay vì chỉ thu nhỏ ảnh gốc. Nếu thẻ dùng tỷ lệ 16:9, một thumbnail 360 × 203 px là ví dụ gần với tỷ lệ đó; kích thước xuất thực tế vẫn phải dựa trên chiều rộng của thẻ và mật độ điểm ảnh mục tiêu.
Khi hệ thống dùng thao tác cắt giữa, chủ thể nên nằm trong vùng an toàn ở trung tâm. Với khuôn mặt, sản phẩm hoặc chữ nằm sát mép, cần kiểm tra xem ảnh có bị mất nội dung trên màn hình hẹp hay không.
Kích thước ảnh banner website
Kích thước ảnh banner website phụ thuộc vào chiều rộng vùng hiển thị, chiều cao thiết kế, lớp chữ phủ lên ảnh và cách giao diện cắt ảnh. Banner toàn màn hình, banner trong nội dung và banner quảng bá ở thanh bên không thể dùng chung một thông số.
Không dùng một banner cho mọi màn hình nếu bố cục thay đổi lớn
Banner máy tính thường có vùng hiển thị ngang, trong khi màn hình điện thoại hẹp và cao hơn. Nếu chỉ co nhỏ ảnh ngang, chữ và chủ thể có thể trở nên quá nhỏ. Nếu dùng cover, hai bên ảnh có thể bị cắt.
Giải pháp phù hợp là chuẩn bị hai bố cục:
- Bản ngang cho màn hình lớn.
- Bản dọc hoặc ít ngang hơn cho thiết bị di động.
Có thể dùng phần tử picture hoặc cơ chế quản trị ảnh responsive của website để phân phối đúng phiên bản. Nếu banner thuộc trang chuyển đổi, hướng dẫn về kích thước ảnh landing page sẽ giúp xác định vùng an toàn cho tiêu đề, nút và chủ thể.
Xác định tỷ lệ banner từ giao diện
Giả sử vùng banner trên máy tính rộng 1.440 px và cao 480 px, tỷ lệ thiết kế là 3:1. Nếu giao diện di động chuyển sang khung 390 × 520 px, tỷ lệ và bố cục đã thay đổi đáng kể; khi đó nên xuất ảnh di động riêng thay vì cố giữ bản 3:1.
Các số trên chỉ minh họa phương pháp tính. Hãy đo đúng vùng banner của website ở các điểm ngắt responsive trước khi chốt tệp.
Không đặt thông tin quan trọng sát mép
Logo, sản phẩm, khuôn mặt và nội dung chữ cần nằm trong vùng an toàn. Trình duyệt có thể cắt ảnh khác nhau theo chiều rộng màn hình, đặc biệt khi giao diện dùng thuộc tính tương đương object-fit: cover hoặc ảnh nền CSS.
Nếu chữ có thể tạo bằng HTML, nên hạn chế nhúng chữ trực tiếp vào ảnh. Chữ HTML dễ đọc hơn trên nhiều màn hình, có thể được cập nhật độc lập và hỗ trợ khả năng tiếp cận tốt hơn.
Chọn định dạng và mức nén phù hợp
Không có một mức nén cố định cho mọi ảnh. Hai tệp có cùng kích thước pixel có thể có dung lượng rất khác nhau do độ chi tiết, nhiễu, màu sắc và định dạng.
Chọn định dạng theo nội dung
- AVIF hoặc WebP: phù hợp với nhiều loại ảnh cần giảm dung lượng; nên kiểm tra khả năng tương thích của hệ thống xuất bản và thiết bị mục tiêu.
- JPEG: phù hợp với ảnh chụp khi cần phương án tương thích rộng.
- PNG: hữu ích cho hình cần nền trong suốt hoặc đồ họa cần giữ cạnh sắc, nhưng có thể nặng nếu dùng cho ảnh chụp.
- SVG: phù hợp với logo, biểu tượng và hình vector; chỉ nên dùng tệp từ nguồn tin cậy và được xử lý an toàn.
Chọn mức nén bằng kiểm tra trực quan
Thay vì mặc định một con số chất lượng, hãy xuất thử ở vài mức nén rồi so sánh tại kích thước hiển thị thực tế. Chọn tệp nhẹ nhất vẫn đáp ứng các tiêu chí:
- Chủ thể không bị bệt hoặc mất chi tiết quan trọng.
- Chữ và đường viền vẫn rõ.
- Vùng chuyển màu không xuất hiện dải màu khó chịu.
- Màu sản phẩm không sai lệch đáng kể.
- Ảnh không có quầng hoặc khối nén dễ nhận thấy.
Ảnh thumbnail có thể chịu mức nén cao hơn vì được hiển thị nhỏ. Ảnh sản phẩm, ảnh có chữ và ảnh cần phóng to nên được kiểm tra nghiêm ngặt hơn. Quy trình tối ưu hóa hình ảnh cho website cũng cần kết hợp định dạng, dung lượng, văn bản thay thế và ngữ cảnh nội dung.
Tối ưu ảnh responsive và SEO
Một ảnh đúng kích thước không chỉ là tệp có chiều rộng phù hợp. Website cần phân phối đúng phiên bản cho từng thiết bị và cung cấp đủ thông tin để trình duyệt bố trí trang ổn định.
Dùng srcset và sizes
srcset cho phép khai báo nhiều tệp có chiều rộng khác nhau. sizes mô tả kích thước ảnh dự kiến trong bố cục. Trình duyệt sẽ lựa chọn tệp phù hợp dựa trên màn hình, mật độ điểm ảnh và điều kiện hiển thị.
Nếu chỉ tải một ảnh rất lớn rồi thu nhỏ bằng CSS, người dùng di động vẫn có thể phải tải toàn bộ tệp. Ngược lại, nếu chỉ cung cấp ảnh nhỏ, ảnh sẽ thiếu nét trên màn hình lớn hoặc màn hình mật độ cao.
Khai báo chiều rộng và chiều cao
Nên khai báo thuộc tính width và height theo tỷ lệ nội tại của ảnh. Trình duyệt có thể dành sẵn không gian trước khi tệp tải xong, từ đó hạn chế hiện tượng nội dung dịch chuyển đột ngột.
Viết văn bản thay thế đúng mục đích
Thuộc tính alt nên mô tả nội dung và vai trò của ảnh trong ngữ cảnh. Không lặp từ khóa một cách máy móc. Ảnh chỉ có tính trang trí có thể dùng văn bản thay thế rỗng nếu cách triển khai đáp ứng yêu cầu khả năng tiếp cận.
Tên tệp nên ngắn gọn, có nghĩa và dùng dấu gạch nối giữa các từ. Tuy nhiên, tên tệp không thể bù cho một bức ảnh không liên quan hoặc trang có nội dung yếu.
Chỉ tải chậm ảnh ngoài màn hình đầu tiên
Lazy loading phù hợp với ảnh nằm dưới vùng nhìn ban đầu. Ảnh chính hoặc banner đầu trang thường không nên bị trì hoãn nếu việc đó làm chậm thời điểm nội dung quan trọng xuất hiện.
Quy trình kiểm tra trước khi đăng
Thực hiện lần lượt các bước sau để chọn kích thước ảnh website phù hợp:
- Xác định ảnh dùng cho bài viết, sản phẩm, thumbnail hay banner.
- Đo chiều rộng và chiều cao vùng chứa trên máy tính, máy tính bảng và điện thoại.
- Kiểm tra giao diện giữ nguyên ảnh, co giãn hay cắt ảnh bằng
cover. - Chọn tỷ lệ khung hình phù hợp với vùng chứa.
- Xuất các phiên bản theo chiều rộng hiển thị và mật độ điểm ảnh cần phục vụ.
- Chọn định dạng theo nội dung ảnh và khả năng hỗ trợ của website.
- Nén thử ở nhiều mức, sau đó so sánh trực quan trên thiết bị thật.
- Khai báo
srcset,sizes,width,heightvàaltkhi phù hợp. - Kiểm tra tốc độ tải, độ nét, vị trí cắt và sự ổn định của bố cục.
- Kiểm tra lại URL ảnh sau khi xuất bản để tránh tệp bị thiếu hoặc sai đường dẫn.
Nếu phát hiện ảnh không hiển thị sau khi thay tệp hoặc chuyển trang, nên áp dụng quy trình tìm và sửa hình ảnh bị lỗi thay vì chỉ tải lại cùng một ảnh.
Tóm lại, kích thước ảnh tốt nhất là kích thước đáp ứng đúng vùng hiển thị mà không tải thừa dữ liệu và không làm mất chi tiết cần thiết. Hãy đo giao diện, tạo phiên bản responsive và kiểm tra trên thiết bị thực tế. Nếu cấu trúc hiện tại không hỗ trợ ảnh theo từng màn hình, việc điều chỉnh trong quá trình thiết kế website sẽ hiệu quả hơn so với tiếp tục tải một tệp lớn cho mọi vị trí.
