Chuyển đến nội dung chính
pixvertoPixverto

Kích thước ảnh lý tưởng cho website: Banner, bài viết, ảnh thu nhỏ và màn hình retina

Không có kích thước ảnh hoàn hảo cho mọi trường hợp, nhưng có những khoảng hợp lý. Quá lớn thì trang chậm. Quá nhỏ thì ảnh mềm. Bài này giải thích nguyên tắc, đưa ra các con số thực tế cho những cách dùng phổ biến và chỉ cách chọn cho web của riêng bạn.

Vì sao kích thước ảnh quan trọng

Hai yếu tố quyết định một bức ảnh nặng hay nhẹ: nó có bao nhiêu pixel và được nén mạnh đến đâu. Số pixel quan trọng nhất. Một ảnh 4000 × 3000 có 12 triệu pixel, còn bản 1200 × 900 chỉ có khoảng một triệu, nên nhẹ hơn khoảng mười hai lần trước cả khi nén.

Nếu một ảnh được hiển thị trong cột rộng 800 pixel, những pixel thừa ra ngoài mức đó gần như không mang lại gì bạn nhìn thấy được, nhưng người xem vẫn phải tải chúng. Ở thái cực ngược lại, ảnh quá nhỏ bị trình duyệt kéo giãn ra và trông nhòe. Chọn đúng kích thước là khoản tiết kiệm đầu tiên và lớn nhất.

Nguyên tắc: khớp với kích thước hiển thị

Ảnh nên rộng xấp xỉ bằng bề rộng nó được hiển thị. Với các màn hình có mật độ điểm ảnh cao, hiển thị nội dung bằng số điểm ảnh vật lý gấp đôi, tối đa khoảng gấp đôi bề rộng hiển thị là đủ. Vượt quá mức đó chỉ làm nặng thêm mà không thêm chi tiết nhìn thấy được.

Để biết kích thước hiển thị, hãy mở công cụ dành cho nhà phát triển của trình duyệt, kiểm tra một ảnh và so sánh kích thước hiển thị với kích thước gốc của nó. Nếu file lớn hơn nhiều so với những gì hiện trên màn hình, bạn có thể thu nhỏ nó một cách an toàn.

Chọn giữa ảnh lớn hơn và nhỏ hơn

Ảnh lớn hơn

  • Ưu điểm: sắc nét hơn trên màn hình lớn và màn hình độ phân giải cao, và có chỗ để phóng to ở trang sản phẩm.
  • Nhược điểm: trang chậm hơn, tốn băng thông và dung lượng lưu trữ hơn, và trải nghiệm trên điện thoại kém hơn.

Ảnh nhỏ hơn

  • Ưu điểm: tải nhanh, chi phí thấp hơn và điểm tốc độ trang tốt hơn.
  • Nhược điểm: ảnh mềm hoặc nhòe nếu bị hiển thị lớn hơn kích thước của nó.

Cách dung hòa tốt là chọn kích thước xấp xỉ mức hiển thị lớn nhất mà ảnh thực tế có thể có, và cung cấp thêm nhiều kích thước cho các màn hình khác nhau bằng ảnh responsive.

Từng bước: chọn và tạo đúng kích thước

  1. 1Xác định ảnh xuất hiện ở đâu và ghi lại bề rộng hiển thị lớn nhất của nó.
  2. 2Chọn bề rộng mục tiêu, từ một đến hai lần bề rộng đó, lấy bảng ở trên làm tham khảo.
  3. 3Đổi kích thước từ ảnh gốc bằng Đổi kích thước ảnh, giữ nguyên tỷ lệ khung hình. Nếu cần đổi hình dạng, hãy cắt trước bằng Cắt ảnh.
  4. 4Nén ảnh bằng Nén ảnh ở chất lượng 75 đến 85. Nếu cần một giới hạn cứng, Nén ảnh xuống 100 KB tự tìm mức chất lượng tốt nhất còn vừa giới hạn.
  5. 5Kiểm tra dung lượng file so với các mục tiêu. Nếu vẫn nặng, hãy giảm thêm kích thước thay vì hạ chất lượng quá nhiều.
  6. 6Dùng định dạng hiện đại khi có thể. Xem bài về các định dạng.
  7. 7Đặt width và height trong HTML bằng đúng kích thước cuối cùng.

Tỷ lệ khung hình và sự đồng nhất

Hãy chọn vài tỷ lệ khung hình và giữ nhất quán: 16:9 cho banner, 3:2 hoặc 4:3 cho ảnh chụp, 1:1 cho ảnh đại diện và lưới sản phẩm. Tỷ lệ đồng nhất làm bố cục gọn gàng và giúp tránh xê dịch bố cục. Nếu muốn hiểu thêm về độ phân giải và DPI, xem độ phân giải, DPI và PPI giải thích dễ hiểu.

Những lỗi thường gặp

  • Tải lên ảnh gốc từ máy ảnh rồi trông chờ trình duyệt tự thu nhỏ.
  • Phóng to ảnh nhỏ cho vừa một khung lớn hơn, chỉ làm ảnh nhòe.
  • Dùng một kích thước khổng lồ cho mọi nơi, kể cả ảnh thu nhỏ.
  • Chỉ giảm dung lượng bằng cách hạ chất lượng, thay vì giảm số pixel trước.
  • Quên rằng điện thoại là nguồn truy cập chính của phần lớn website.

Câu hỏi thường gặp

Ảnh banner của website nên có kích thước bao nhiêu?

Rộng từ 1600 đến 2000 pixel là đủ cho hầu hết bố cục, và tới khoảng 2560 cho màn hình rất lớn. Hãy nén để file dưới 200 đến 300 KB.

Ảnh trong bài blog nên có kích thước bao nhiêu?

Rộng 800 đến 1200 pixel hợp với hầu hết bố cục blog. Hãy xem giao diện của bạn hiển thị ảnh trong bài rộng bao nhiêu và giữ gần mức đó, hoặc tối đa gấp đôi cho màn hình sắc nét.

Tôi có cần ảnh gấp đôi (2x) cho màn hình retina không?

Tối đa khoảng gấp đôi bề rộng hiển thị cho kết quả sắc nét trên màn hình độ phân giải cao. Vượt quá mức đó chỉ nặng thêm mà ít khác biệt nhìn thấy được. Ảnh responsive cho phép mỗi thiết bị tải đúng kích thước.

Ảnh trên web nên nặng bao nhiêu KB?

Tham khảo: banner dưới 200 đến 300 KB, ảnh nội dung dưới 100 đến 150 KB, ảnh thu nhỏ dưới 50 KB. Ảnh nhiều chi tiết có thể cần nhiều hơn, còn đồ họa đơn giản thì ít hơn.

Nên hạ chất lượng hay giảm kích thước?

Hãy giảm kích thước trước. Ít pixel hơn làm file nhỏ đi nhiều hơn hẳn so với hạ chất lượng, mà ít hư hại nhìn thấy hơn. Sau đó mới chỉnh chất lượng nếu vẫn cần giảm thêm.

Thử các công cụ