Tối ưu hóa hình ảnh – lưu hình ảnh cho web ở kích thước tệp nhỏ hơn – góp phần làm cho trang web tải nhanh hơn, góp phần vào SEO và trải nghiệm người dùng tốt hơn.
Tối ưu hóa hình ảnh là gì?
là một quá trình góp phần vào thời gian tải nội dung web nhanh hơn. Phần đầu tiên của quy trình là giảm kích thước tệp của mỗi hình ảnh bằng quy trình duy trì chất lượng độ phân giải hình ảnh. Thêm thẻ alt có ý nghĩa và mang tính mô tả vào hình ảnh được tối ưu hóa của bạn trong quá trình tải lên là bước tiếp theo. Quá trình này góp phần vào SEO nội dung.
Tại sao tối ưu hóa hình ảnh lại quan trọng?
-
Thời gian tải nhanh
Liên quan đến thời gian tải nhanh, chúng ta đều biết cảm giác khó chịu như thế nào khi truy cập vào một trang web có thời gian tải chậm. Nó khiến bạn muốn nhảy ra ngoài và thử ở một nơi khác
-
SEO
Mọi người rời khỏi trang web của bạn quá sớm vì thời gian chậm sẽ có nghĩa là tỷ lệ thoát cao, không phải là dấu hiệu tốt của cơ quan quản lý trang web nếu trang web nhiều hơn, chẳng hạn như trang “liên hệ với chúng tôi”.
-
Khả năng tiếp cận
Thẻ Alt cho mỗi hình ảnh cung cấp mô tả về hình ảnh. Điều này góp phần tăng khả năng tiếp cận cho những người khiếm thị dựa vào trình đọc màn hình để họ có được trải nghiệm và thông tin mà người khác có từ nội dung của bạn. Thẻ thay thế cũng là một cơ hội để đóng góp vào việc SEO nội dung bằng cách sử dụng các từ khóa mà chúng có liên quan đến ngữ cảnh (đừng nhồi nhét từ khóa vào thẻ thay thế!). Thêm thẻ alt vào hình ảnh trên trang web của bạn là hoàn thành tốt công việc cung cấp nội dung chất lượng cho trang của bạn.
Tối ưu hóa hình ảnh bằng cách giảm kích thước tệp hình ảnh
Bắt đầu với hình ảnh có độ phân giải cao khi có thể. Điều này sẽ giúp đảm bảo hình ảnh cho trang web của bạn trông sắc nét nhất có thể.
Chất lượng hình ảnh được duy trì (ở mức tốt nhất có thể) trong khi giảm độ phân giải hình ảnh và kích thước tệp.
Các bước để tối ưu hóa hình ảnh
1. Thay đổi kích thước kích thước hình ảnh
Nếu bạn có nhiều hình ảnh trên một trang web, nguyên tắc cơ bản để có một giao diện chuyên nghiệp được tiêu chuẩn hóa là phải có cùng kích thước hình ảnh.
Trên các trang web thương mại điện tử, tất cả hình ảnh sản phẩm phải có kích thước phù hợp với kích thước để đảm bảo hình ảnh hiển thị trên trang của bạn mà không bị lệch, kéo giãn và / hoặc không có độ phân giải kém.
Các nền tảng trang web thương mại điện tử như Squarespace hoặc Shopify thường hiển thị hình ảnh sản phẩm ở cùng một kích thước. Tuy nhiên, nếu hình ảnh tải lên quá nhỏ hoặc có kích thước khác nhau rõ rệt, hình ảnh đó có thể bị kéo giãn hoặc lệch và do đó có chất lượng kém.
2. Giảm thiểu kích thước tệp (độ phân giải)
Các tệp hình ảnh có độ phân giải cao, được sử dụng trong giấy in, quá lớn (về kích thước tệp) để sử dụng làm hình ảnh trên web.
Hình ảnh được sử dụng trong giấy in có độ phân giải cao (300+ dpi).
Hình ảnh được tối ưu hóa cho web có độ phân giải từ thấp đến trung bình (72 – 200 dpi).
Điều gì sẽ xảy ra nếu bạn sử dụng hình ảnh quá lớn? Thời gian tải trang web sẽ rất chậm, đặc biệt là trên thiết bị di động – không phải là trải nghiệm người dùng tốt.
Hướng dẫn sơ bộ về kích thước tệp cho hình ảnh web:
Kích thước tệp hình ảnh biểu ngữ web: dưới 200kb
Hình ảnh nội dung nhỏ hơn cho các trang và widget: dưới 100kb.
3. Áp dụng thẻ ALT
Thẻ ALT rất quan trọng đối với việc tuân thủ khả năng truy cập nội dung web. Nếu một số người dùng đặt trình duyệt web của họ không hiển thị hình ảnh, thẻ alt vẫn hiển thị và cung cấp mô tả về hình ảnh.
Thẻ ALT có thể hoạt động theo hướng tối ưu hóa công cụ tìm kiếm: nếu bạn áp dụng thẻ alt có ý nghĩa mô tả hình ảnh liên quan đến ngữ cảnh trang và bao gồm (các) từ khóa nếu có liên quan theo ngữ cảnh, thẻ sẽ đóng góp vào SEO. Ngoài ra, các công cụ tìm kiếm coi rằng các thẻ alt đã hoàn thành đóng góp vào nội dung có ý nghĩa và hữu ích.
Làm thế nào để áp dụng thẻ alt cho hình ảnh? Điều này thay đổi trên nền tảng trang web bạn đang sử dụng. Nhìn chung, bạn sẽ thấy một cửa sổ trong quá trình tải lên, nơi thẻ alt sẽ được thêm vào.
Các website hỗ trợ công cụ để giảm dung lượng hình ảnh
- tinypng.com
- https://www.iloveimg.com/compress-image/compress-png
- cloudconvert.com
- websiteplanet.com