3 Mẹo hàng đầu giúp tối ưu hóa hình ảnh trang web của bạn

Tối ưu hoá hình ảnh trên trang web sẽ giúp cải thiện tốc độ tải trang, tốc độ sao lưu trang web, cải thiện SEO và giúp tăng khả năng được xếp hạng cao trên Google. Ngay say đây, Bachvietedu sẽ chỉ ra những mẹo để tối ưu hóa hình ảnh cho trang web  và cải thiện tốc độ chuẩn SEO cho trang web của bạn.

Hãy thử hình dung ra rằng bạn vừa ra mắt trang web hoàn toàn mới sau nhiều tháng quản lý dự án. Và ngay sau đó, bạn nhận được phản hồi rằng trang web của mình đang quá chậm. Điều này xảy ra rất phổ biến. Trên thực tế, các vấn đề về tốc độ tải web diễn ra liên tục và ngay cả các trang web của các công ty lớn cũng không ngoại lệ.

Mục tiêu hướng đến là làm sao để trang web của bạn có thể tiếp cận với nhiều đối tượng nhất có thể và tải được nhanh chóng bất cứ lúc nào,từ bất kỳ thiết bị kết nối nào. Không quá ngạc nhiên khi một trang web tải chậm có thể mất đi lượng lớn khách hàng tiềm năng. Người ta ước tính rằng, có khoảng 40% người dùng rời khỏi trang web nếu trang web đó mất hơn 3 giây để tải.

Kể từ tháng 6 năm 2021, Google đã giới thiệu 1 bản cập nhật thuật toán đưa chỉ số hiệu suất của trang web (được gọi là “ Web Vitals”) trở thành một yếu tố xếp hạng. Bạn có thể thấy thứ hạng trang web của mình bị giảm sút nếu có các trang tải chậm trên trang web của mình. Vậy nên bắt đầu tối ưu hóa trang web mình từ đâu? Bước đầu tiên bạn có thể thực hiện để giảm thời gian tải trang đó là đảm bảo rằng tất cả hình ảnh trên trang web của bạn đều đã được nén và tối ưu hóa.

Những hình ảnh trên 100 Kilobyte đều có thể ảnh hưởng nặng nề đến thời gian tải trang, đặc biệt là đối với người dùng thiết bị di động. Tiêu chuẩn này có thể thay đổi nhưng chúng tôi khuyên bạn không nên vượt quá 200 Kilobyte trong mọi trường hợp. Upload hình ảnh đã được tối ưu hóa là bước đầu tiên để trang web hoạt động hiệu quả. Đảm bảo sự cân bằng giữa chất lượng và kích thước hình ảnh là rất quan trọng.

Chọn định dạng ảnh phù hợp

Khi chọn đúng định dạng, bạn đã tạo hình ảnh nhẹ hơn ngay từ khởi đầu. Một số hướng dẫn chi tiết:

– JPG / JPEG ➜ Thích hợp với các nội dung ảnh phức tạp và hình ảnh “đời thực”. Đây là định dạng phổ biến nhất nhưng cũng là một trong những định dạng nặng nhất. Bạn nên cân nhắc trước khi sử dụng những hình ảnh này trên trang web của mình.

– PNG ➜ Thích hợp với các logo, biểu tượng, hình ảnh minh bạch và nội dung đồ họa nói chung. Chúng không chiếm nhiều không gian trên trang web nếu chúng được tối ưu hóa đúng cách.

– SVG ➜Thích hợp với các biểu tượng, hình dạng và mẫu nền đơn giản. Nó cũng có thể được sử dụng cho logo và bất kỳ loại hình ảnh vector nào. Định dạng này siêu nhẹ nên đừng lo lắng về kích thước của nó. Bạn có thể sử dụng bao nhiêu tùy thích.

– GIF ➜ Là định dạng hình ảnh tiêu chuẩn cho ảnh động. Bạn nên sử dụng chúng một cách khéo léo vì chúng thường là những hình ảnh rất nặng.

Nén hình ảnh của bạn

Đôi khi chúng ta nghĩ rằng, đăng tải hình ảnh sắc nét, có độ phân giải cao lên trang web của mình là một ý tưởng hay. Bởì nó làm cho trang web trông chuyên nghiệp hơn. Nhưng trên thực tế, đây là một quan điểm sai. Một hình ảnh chất lượng muốn rõ nét còn cần phải được hiển thị với mức độ chi tiết trên một màn hình HD tiêu chuẩn.

Kích thước đề xuất cho từng định dạng hình ảnh

–  JPG / JPEG ➜ không quá 150KB.

–  PNG ➜ không quá 100KB.

–  SVG ➜ không quá 50KB.

–  GIF ➜ không quá 200KB.

Lưu ý rằng số lượng hình ảnh cũng là một yếu tố cần xem xét. Bạn càng có nhiều hình ảnh trên một trang, thì bạn càng nên giảm kích thước của chúng xuống thấp hơn.

Những hình ảnh trên sẽ được thêm vào nội dung mà trình duyệt tải xuống và hiển thị. Dữ liệu từ HTTP Archive sẽ cho chúng ta biết kích thước trang trung bình vào năm 2021 là 2,1MB. Mất khoảng 5,6 giây để tải khi kết nối 4G, và có thể lên đến 13 giây khi kết nối 3G.

Làm cách nào để nén hình ảnh trên trang web của mình?

1. Sử dụng phần mềm đồ họa như Adobe Photoshop hoặc GIMP

  –  Đây là cách bạn có thể nén hình ảnh trong Photoshop.
  –  Đây là cách nén hình ảnh trong GIMP.

2. Sử dụng công cụ nén trực tuyến – chẳng hạn như tinyJPG

Sau khi bạn đã nén hình ảnh của mình, hãy thay thế hình ảnh gốc trên trang web và bạn đã hoàn tất. Nếu trang web của bạn được xây dựng trên WordPress, bạn có thể sử dụng plugin để thay thế hình ảnh.

3. Sử dụng thông số kỹ thuật hình ảnh phù hợp (Rộng x Cao)

Nên chia tỷ lệ hình ảnh của bạn một cách hợp lý, sử dụng màn hình máy tính tiêu chuẩn làm tài liệu tham khảo. Ví dụ: nếu hình ảnh bạn đăng tải được hiển thị với độ phân giải 300 × 300 pixel, thì tệp gốc của bạn phải gần với kích thước đó.

Trên thực tế, việc tải một hình ảnh có độ phân giải lớn và thay đổi kích thước bằng CSS là rất phổ biến. Tuy nhiên, các quy tắc CSS chỉ dành cho hiển thị màn hình, chúng không thực sự thay đổi kích thước ảnh. Nghĩa là hình ảnh gốc của bạn vẫn đang được tải xuống.

Thêm văn bản ALT Hình ảnh

Alternative (văn bản thay thế), còn được gọi là“ thuộc tính alt”được sử dụng trong mã HTML để mô tả hình thức và chức năng của hình ảnh trên một trang.”
 
Alt text của hình ảnh (còn được gọi là “Alt tags”) rất quan trọng đối với SEO, vì nó giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung của hình ảnh.

  Các phương pháp hay cho Alt text là:
– Đảm bảo rằng nó mang tính mô tả hình ảnh.
– Cố gắng bao quát một từ khóa hoặc chủ đề có liên quan nếu có thể. Hy vọng bạn thấy những lời khuyên này hữu ích.