Hình ảnh: Thực hiện hoặc phá vỡ
Hình ảnh có thể tạo nên hoặc phá vỡ trang web của bạn theo nhiều cách. Nếu hình ảnh của bạn quá mờ hoặc quá nhỏ thì sẽ không có ai mua sản phẩm của bạn. Tuy nhiên, hình ảnh quá lớn sẽ làm chậm thời gian tải trang, điều này cũng làm giảm doanh số bán hàng của bạn.
Làm cách nào để biết hình ảnh của tôi quá lớn?
Nếu bạn đã đọc chương 1, bạn sẽ biết cách thực hiện báo cáo lighthouse và xác định xem hình ảnh có phải là vấn đề lớn nhất hay không, nhưng bạn cũng có thể kiểm tra mà không cần chạy báo cáo lighthouse.
Nếu bạn có hình ảnh lớn hơn 300 kb, hình ảnh sẽ làm chậm trang web của bạn.
Hai phương pháp bạn có thể sử dụng để tối ưu hóa hình ảnh của mình
Việc tối ưu hóa hình ảnh nghe có vẻ hơi đáng sợ nhưng bạn sẽ khá dễ dàng làm quen sau khi thực hiện một vài lần. Chỉ cần làm theo ba bước sau: Thay đổi kích thước, Loại tệp, Nén.
Bước 1: Thay đổi kích thước
Nếu bạn tải lên một hình ảnh có chiều rộng 4,000 pixel nhưng chỉ hiển thị trong một hộp nhỏ trên trang web chiếm một nửa chiều rộng của trang thì hình ảnh đó có kích thước tệp lớn không cần thiết. thay đổi kích thước hình ảnh của bạn thành những gì chúng thực sự hiển thị như bước đầu tiên và là một trong những bước quan trọng nhất trong việc tối ưu hóa hình ảnh của bạn.
Bạn có thể sử dụng Canva.com hoặc Photoshop để dễ dàng thay đổi kích thước hình ảnh của mình.
Nếu bạn không chắc chắn về kích thước hình ảnh của mình, hãy làm theo các nguyên tắc chung sau:
- Hình ảnh trải dài toàn bộ chiều rộng của trang web của bạn: Chiều rộng không quá 1600 pixel. Kích thước tệp không quá 400 KB.
- Hình ảnh trải dài theo chiều rộng của trang web của bạn: Chiều rộng không quá 800 pixel. Kích thước tệp không quá 200 KB.
- Hình ảnh trải dài 1/4 chiều rộng trang web của bạn: Chiều rộng không quá 400 pixel. Kích thước tệp không quá 100 KB.
Thỉnh thoảng, bạn có thể có một hình ảnh thực sự chi tiết cần phải phá vỡ quy tắc này và có kích thước tệp cao hơn một chút để nó trông không bị mờ. Không sao đâu, bạn chỉ cần cố gắng để hình ảnh nhỏ nhất có thể.
Bước 2: Loại tệp
Hai hình ảnh có thể có cùng kích thước chính xác, nhưng nếu một hình ảnh là JPG và một hình ảnh khác là PNG thì chúng sẽ có kích thước tệp khác nhau.
Nếu bạn đang sử dụng Canva để thay đổi kích thước: Đảm bảo bạn bật “Chất lượng” lên 100% trong cài đặt tải xuống để hình ảnh của bạn không bị mờ. Khả năng nén của Canva không tốt.
Bạn có thể thấy một số đề xuất sử dụng WebP thay vì JPG. Mặc dù các loại tệp WebP nhỏ hơn đáng kể nhưng chúng không hiển thị trên các trình duyệt cũ hơn. Việc bạn chọn sử dụng WebP hay JPG là tùy thuộc vào bạn.
Bước 3: Nén
Nén hình ảnh của bạn là một cách tuyệt vời để giảm kích thước tệp hơn nữa và nếu bạn thực hiện đúng, điều đó sẽ không ảnh hưởng đến chất lượng hình ảnh của bạn. Bạn có thể dùng nhỏpng.com để nén hình ảnh của bạn trước khi tải chúng lên trang web của bạn.
Thu nhỏ.media có thể được sử dụng để nén và thay đổi kích thước hình ảnh chỉ trong một bước.