Tại sao tối ưu hóa hình ảnh lại cải thiện trang web
Hình ảnh thường chiếm phần lớn dữ liệu tải về của một trang. Một tệp lớn sẽ làm chậm việc hiển thị nội dung, tốn nhiều dữ liệu di động hơn và có thể làm trải nghiệm người dùng tệ đi. Tối ưu hóa kết hợp ba quyết định: kích thước, định dạng và mức độ nén.
Không có giới hạn hoàn hảo cho tất cả hình ảnh. Một hình thu nhỏ nên nhẹ hơn nhiều so với một bức ảnh chiếm toàn bộ màn hình. Mục tiêu là cung cấp đủ pixel và chất lượng cho không gian thực tế, mà không buộc trình duyệt phải tải thông tin sẽ không sử dụng.
Quy trình đề xuất từng bước
- Xác định chiều rộng tối đa mà hình ảnh sẽ xuất hiện trong thiết kế.
- Cắt khung trước khi nén để không giữ lại các vùng sẽ bị loại bỏ.
- Chọn định dạng theo nội dung và nhu cầu về độ trong suốt.
- Mở tệp trong bộ nén hình ảnh và thử chất lượng trung-cao.
- So sánh dung lượng và kiểm tra văn bản, cạnh, khuôn mặt và các gradient.
- Xuất bản kết quả và kiểm tra trang trên thiết bị di động và máy tính để bàn.
Kích thước: tránh tải lên quá nhiều pixel cần thiết
Nếu một thẻ hiển thị hình ảnh rộng 600 pixel, việc tải một bức ảnh 5000 pixel thường là lãng phí. Trình duyệt sẽ giảm kích thước hình ảnh về mặt trực quan, nhưng trước tiên phải tải toàn bộ tệp. Hãy chuẩn bị một phiên bản gần với kích thước tối đa mà thiết kế yêu cầu.
Đối với màn hình độ phân giải cao, có thể hữu ích khi cung cấp phiên bản lớn gấp khoảng hai lần, nhưng lý tưởng là trang web sử dụng hình ảnh đáp ứng với srcset y kích cỡ. Như vậy mỗi thiết bị tải xuống một phiên bản phù hợp thay vì cùng một tệp khổng lồ.
Chọn định dạng
- JPG: tương thích tốt và kích thước hợp lý cho ảnh không có nền trong suốt.
- WebP: hữu ích cho ảnh và đồ họa web; có thể giữ độ trong suốt và cung cấp tệp gọn nhẹ.
- PNG: thích hợp cho độ trong suốt, chụp màn hình với văn bản rõ ràng và đồ họa đơn giản; có thể nặng đối với ảnh chụp.
- SVG: lý tưởng cho logo và biểu tượng vector khi tệp an toàn và thiết kế được tạo như vector.
Chuyển định dạng không đảm bảo tệp nhỏ hơn. Luôn so sánh kết quả và giữ nguyên định dạng gốc khi đó là lựa chọn hiệu quả nhất. Tham khảo so sánh giữa JPG, PNG và WebP nếu bạn không biết chọn cái nào.
Cách chọn chất lượng nén
Bắt đầu với một cài đặt ưu tiên vẻ ngoài và từ từ giảm xuống. Ảnh thường chịu nén tốt hơn so với ảnh chụp giao diện, sơ đồ và chữ nhỏ. Nếu xuất hiện quầng sáng, khối hoặc viền mờ, hãy tăng chất lượng hoặc thử định dạng khác.
Đánh giá tệp trong trang, không chỉ ở chế độ xem phóng to. Một sự khác biệt nhỏ có thể nhìn thấy 300% có thể không nhận thấy ở kích thước bình thường; Mặt khác, một chữ cái không đọc được trên thẻ lại là một vấn đề thực sự.
Việc nén không thay thế cho một triển khai tốt
Ngoài việc tối ưu hóa tệp, hãy giữ chỗ với các thuộc tính chiều rộng y chiều cao để tránh nhảy nội dung. Sử dụng tải trễ cho hình ảnh nằm ngoài khối đầu tiên có thể thấy, nhưng không trì hoãn hình ảnh chính nếu nó cần thiết để hiểu trang.
Cũng nên định nghĩa bộ nhớ đệm dài cho các tệp có tên phiên bản và tránh tải cùng một hình ảnh với nhiều độ phân giải bằng CSS. Những quyết định này đòi hỏi phải thay đổi địa điểm, nhưng bổ sung cho khoản tiết kiệm đạt được trong quá trình nén.
Lỗi thường gặp
Nén trước khi quyết định kích thước
Thay đổi kích thước sau buộc phải xử lý tệp hai lần và có thể tích lũy mất mát. Quyết định khung hình và kích thước trước; nén ở cuối.
Chuyển đổi ảnh chụp màn hình sang JPG chất lượng thấp
Các chữ cái và đường kẻ mảnh có thể tạo ra đốm. Thử PNG hoặc WebP với chất lượng cao hơn và so sánh trọng lượng.
Sử dụng hình ảnh nhỏ làm tiêu đề
Phóng to không phục hồi chi tiết. Bắt đầu từ nguồn đủ lớn và tạo các biến thể nhỏ hơn từ phiên bản đó.
Câu hỏi thường gặp
Một hình ảnh web nên nặng bao nhiêu?
Tùy thuộc vào kích thước, tầm quan trọng và độ phức tạp của chúng. Sử dụng tiêu chí là trọng lượng nhẹ nhất mà vẫn giữ chất lượng chấp nhận được ở kích thước cuối cùng của nó, thay vì theo đuổi một con số chung.
Tôi có nên chuyển tất cả hình ảnh sang WebP không?
Không nhất thiết. WebP hữu ích, nhưng một PNG đơn giản hoặc một tệp đã tối ưu có thể không cải thiện. Chuyển đổi một mẫu, đo lường và giữ các tệp gốc.
Nén hình ảnh có tự động cải thiện thứ hạng không?
Giúp cải thiện trải nghiệm và hiệu suất, nhưng vị trí cũng phụ thuộc vào nội dung hữu ích, thu thập dữ liệu, liên kết, ý định tìm kiếm và nhiều tín hiệu khác. Nén là một phần của một trang web được chuẩn bị tốt.
Chuẩn bị một hình ảnh nhẹ hơn
Điều chỉnh chất lượng hoặc đặt kích thước mục tiêu, so sánh kết quả và tải phiên bản phù hợp nhất với trang của bạn.
Nén hình ảnh cho web