Chuẩn bị hình ảnh sản phẩm và blog khi không biết thiết kế

Hình ảnh thường là phần nặng nhất của một trang web và là thứ khách truy cập chú ý đầu tiên. Một bức ảnh quá lớn làm mọi thứ chậm đi, còn ảnh quá nhỏ trông bị mờ. Tin tốt là một quy trình đơn giản, áp dụng trước khi tải lên, giải quyết được phần lớn vấn đề. Bạn không cần phần mềm thiết kế cho bất kỳ bước nào.

Vì sao điều này quan trọng

Một hướng dẫn của Shopify cập nhật vào tháng 9 năm 2026 chỉ ra rằng, trên hơn 70% số trang, phần tử lớn nhất trong màn hình đầu tiên là một hình ảnh. Điều đó có nghĩa là tốc độ của bức ảnh lớn nhất có thể quyết định trang cảm giác nhanh đến đâu. Hướng dẫn cũng trích dẫn Web Almanac 2025, theo đó một trang chủ điển hình mang khoảng 1.058 KB hình ảnh trên máy tính và 911 KB trên di động. Ảnh lớn cộng dồn rất nhanh.

Bước 1: chọn đúng kích thước

Ảnh sản phẩm: Shopify gợi ý ảnh vuông 2.048 x 2.048 pixel. Tính năng phóng to cần ảnh lớn hơn 800 x 800 pixel. Ảnh tải lên được chấp nhận đến 5.000 x 5.000 pixel và 20 MB mỗi ảnh.
Các vị trí phổ biến khác, theo hướng dẫn kích thước năm 2026 của Shopify: ảnh hero 1.280 x 720, ảnh đầu bài blog 1.200 x 800 và ảnh thu nhỏ (thumbnail) 300 x 300, với kích thước nhỏ hơn cho điện thoại.
Màn hình sắc nét: nếu một ảnh hiển thị ở 200 x 200, hãy cung cấp ảnh gốc 400 x 400 để các màn hình mật độ điểm ảnh cao vẫn rõ nét.
Giữ ảnh tải lên lớn hơn kích thước hiển thị, nhưng không lớn hơn quá nhiều. Kích thước trên trang do theme của bạn quyết định, còn tệp bạn tải lên quyết định dung lượng.

Đây là các gợi ý, và con số phù hợp phụ thuộc vào theme của bạn. Hãy xem tài liệu của theme hoặc hướng dẫn về media trong trình chỉnh sửa.

Bước 2: chọn định dạng

JPEG phù hợp cho ảnh chụp.
PNG hỗ trợ nền trong suốt nhưng cho tệp lớn hơn.
WebP cho tệp nhỏ và hỗ trợ nền trong suốt.
AVIF thường cho tệp nhỏ nhất với ảnh nhiều chi tiết, dù Yoast khuyên nên giữ bản dự phòng WebP hoặc JPEG cho các trình duyệt không hiển thị được.
SVG tốt nhất cho logo và biểu tượng vì luôn sắc nét ở mọi kích thước.

Trên Shopify, mạng phân phối nội dung (CDN) của nền tảng tạo các phiên bản đã tối ưu và phục vụ WebP hoặc AVIF ở nơi trình duyệt hỗ trợ, vì vậy hãy tải lên bản gốc chất lượng tốt nhất bạn có thay vì tệp đã bị nén sẵn.

Bước 3: nén ảnh

Với JPEG, WebP và AVIF, hãy hạ mức chất lượng cho đến khi vừa nhìn thấy sự suy giảm, rồi nâng lại một chút. Các công cụ trình duyệt miễn phí như Squoosh làm được việc này, và TinyPNG là lựa chọn phổ biến cho tệp PNG. Mục tiêu khác nhau giữa các hướng dẫn. Một nguồn gợi ý giữ tệp ở mức 200 KB hoặc ít hơn, trong khi nguồn khác cho rằng ảnh sản phẩm thông thường vào khoảng 300 KB. Hãy xem khoảng đó là điểm khởi đầu hợp lý và tự nhìn kết quả bằng mắt mình.

Bước 4: đặt tên tệp

Những tên do máy ảnh đặt như DSC4536 không cho ai biết điều gì. Yoast khuyên bắt đầu bằng chủ thể chính, và hướng dẫn của Shopify đề xuất các từ khóa sản phẩm ngắn, nối bằng dấu gạch ngang. Một tên như blue-ceramic-mug-front.jpg tốt hơn IMG_0231.jpg.

Bước 5: viết alt text

Mô tả hình ảnh cho thấy gì, như bạn mô tả cho người không nhìn thấy được.
Giữ ngắn gọn. Hướng dẫn kích thước của Shopify gợi ý dưới 100 ký tự kể cả dấu cách.
Chỉ nhắc đến chủ đề của trang ở chỗ tự nhiên. Đừng nhồi từ khóa vào mọi bức ảnh.
Với ảnh thuần trang trí, giá trị alt trống là chấp nhận được. Yoast lưu ý rằng không phải ảnh nào cũng cần văn bản mô tả.
Nếu một bức ảnh chứa thông tin quan trọng, như biểu đồ, hãy đưa thông tin đó vào phần văn bản.

Bước 6: ngăn bố cục bị nhảy

Khi trang tải và văn bản đột ngột dịch chuyển lúc ảnh xuất hiện, điều đó rất khó chịu. Yoast lưu ý rằng khai báo chiều rộng và chiều cao của ảnh sẽ ngăn điều này. Hầu hết theme hiện đại đã xử lý sẵn, nhưng nếu các trang của bạn bị nhảy, hãy báo cho lập trình viên.

Checklist trước khi tải lên

Đổi kích thước về mức hợp lý cho vị trí hiển thị.
Xuất ra WebP hoặc JPEG, và SVG cho logo.
Nén và so sánh với bản gốc.
Đổi tên bằng tên mô tả, nối bằng dấu gạch ngang.
Tải lên, rồi thêm alt text.
Xem trang trên điện thoại và kiểm tra trang tải nhanh.

Khi nào nên gọi lập trình viên

Hãy nhờ hỗ trợ nếu cả thư viện của bạn cần được xử lý hàng loạt, nếu theme thiếu thiết lập ảnh responsive, nếu banner chính là thứ chậm nhất trên trang, hoặc nếu bạn có thư viện media cũ đầy các tệp quá khổ. Lập trình viên có thể tự động hóa việc đổi kích thước và thiết lập cách tải ảnh phù hợp. Hãy xem trang dịch vụ của chúng tôi, hoặc các theme của chúng tôi nếu bạn đang cân nhắc một bố cục mới xử lý hình ảnh tốt hơn.