Chia sẻ Tối ưu hóa hình ảnh để tăng tốc độ tải trang cho website, blog

Diễn Đàn SEO - vnseo.edu.vn -

Hình ảnh là một phần không thể thiếu trong một website và sử dụng hình ảnh như thế nào cho đúng liên quan rất nhiều đến chất lượng của một website,chất lượng của bài viết, tốc độ tải trang web, cải thiện khả năng seo cho website, seo cho bài viết…
Trong quá trình tìm hiểu về vấn đề sử dụng hình ảnh như thế nào cho đúng mình đã thu được rất nhiều kinh nghiệm quí báu và nghĩ cần phải viết bài chia sẻ lại ngay với các bạn về các định dạng hình ảnh, cách sử dụng thế nào cho đúng.

Để có những hình ảnh hiệu quả trên trang web, hình ảnh của bạn cần phải có được sự cân bằng hài hòa giữakích thước file ảnh, màu sắc và chất lượng ảnh.
Tối ưu hóa hình ảnh là quá trình chọn định dạng file ảnh, độ phân giải và các thiết lập về chất lượng ảnh để có một hình ảnh hiệu quả, bắt mắt.

1. Ý nghĩa của các định dạng ảnh phổ biến trên internet (JPEG, GIF, PNG)

Image Optimization

• Dạng JPEG được thiết kế để giữ lại độ màu rộng và độ sáng rõ của những ảnh có tông màu liên tục (chẳng hạn như những ảnh ở chế độ tô màu gradient). Dạng ảnh này có thể tiêu biểu cho những ảnh sử dụng hàng triệu màu.
• Dạng GIF hiệu quả đối với những ảnh nén màu đặc và những ảnh có những vùng màu lập lại (chẳng hạn như nghệ thuật đường thẳng, các biểu tượng và những hình minh hoạ có chữ). Dạng này sử dụng một bảng gồm 256 màu để thể hiện hình ảnh và hỗ trợ cho độ trong suốt của nền.
• Dạng PNG hiệu quả đối với những ảnh nén màu đặc và giữ được chi tiết sắc nét. Dạng PNG-8 sử dụng bảng 256 màu để thể hiện 1 ảnh. Dạng PNG-24 hỗ trợ màu 24 bit (hàng triệu màu), tuy nhiên nhiều ứng dụng trình duyệt trước đây không hỗ trợ các tập tin dạng PNG.

2. Sử dụng định dạng ảnh nào để tối ưu hóa website, blog?
Từ những khái niệm trên các bạn cần lưu ý các vấn đề sau để đạt được tốc độ tải trang tốt nhất, cũng như đảm bảo được chất lượng hình ảnh.

• Không sử dụng định dạng PNG cho ảnh. Nén ảnh dạng JPEG sẽ giúp ảnh có kích cỡ nhỏ hơn mà vẫn đảm bảo chất lượng ảnh tốt. Ví dụ: Thay vì sử dụng một hình ảnh định dạng PNG cỡ 1mb chúng ta có thể nén ảnh bằng định dạng JPEG như vậy ảnh sẽ chỉ còn khoảng 140kb. Như vậy các bạn đã có thể tiết kiệm được khá nhiều băng thông cho website, blog và giảm đáng kể thời gian tải trang.
• Không lạm dụng thuộc tính trong suốt của định dạng ảnh PNG. Trong suốt là một hiệu ứng tuyệt vời của định dạng ảnh PNG mà định dạng JPEG không hỗ trợ, tuy nhiên nếu không cần thiết thì bạn không nên sử dụng. Thường thì định dạng ảnh PNG được sử dụng cho logo hoặc hình ảnh với độ tương phản cao như dành cho text chẳng hạn.
• Thiết lập chất lượng hình ảnh dạng JPG đúng: Lưu ảnh với chất lượng 50-75% giúp bạn giảm kích cỡ file ảnh đáng kể mà không làm giảm chất lượng hiển thị ảnh. Kích cỡ file ảnh khoảng 100kb hoặc nhỏ hơn nữa càng tốt.
• Loại bỏ những thông tin không cần thiết trong ảnh: Các phần mềm chỉnh sửa ảnh hoặc các nhà thiết kế thường để lại thông tin trên file ảnh của mình như comment, hình thu nhỏ (thumbnail)… mà có thể bạn không để ý tới. Đó là những phần thừa và nó sẽ làm tăng kích cỡ file ảnh.

Remove Image Metadata

• Sử dụng thẻ Alt để thêm phần hiển thị thông tin hình ảnh khi người dùng rê chuột qua. Thẻ alt còn có tác dụng cực kì tốt nếu link hình ảnh không tồn tại, khi đó dòng chữ trong thẻ alt sẽ hiển thị thay vì hiển thị một hình dạng no-image hoặc không hiển thị gì cả (google chrome)

3. Các công cụ tối ưu hóa hình ảnh
Các bạn có thể sử dụng Photoshop và ImageReady để có được hình ảnh với kích cỡ nhỏ và chất lượng cao. Ngoài ra Photoshop và ImageReady còn giúp bạn có thể resize ảnh hàng loạt nữa.
Nếu không muốn sử dụng phần mềm các bạn cũng có thể sử dụng các công cụ tối ưu hóa hình ảnh miễn phí online như Yahoo Smush.It hoặc những phần mềm mã nguồn mở như PNGCrush hoặc JPEGTran.

Xem thêm: Tối ưu hình ảnh WordPress với Smush.IT

Trên đây là một số vấn đề về tối ưu hóa hình ảnh để giảm thiểu tối đa thời gian tải trang web cũng như đạt được những hiệu quả tốt nhất để SEO bài viết cũng như SEO cho website.
Trích Nguồn: SEO.TOT

 

Mình thường dùng cách chỉ dùng ảnh đuôi JGP, PNG thấy khá là hiệu quả

 

bài của bác chi tiết và rất hữu dụng cho em, cảm ơn bác nhiều

 

thế này là em có thể làm ngon rùi, cảm ơn bác nhiều

 

hôm nay đọc bài của bác em mới biết đến ý nghĩa của các dạng đuôi jpg với imgp,

 

em hay sử dụng hình ảnh dạng jpg và kích cỡ hình ảnh 75%

 

yếu tố tốc độ load trang giờ rất được mọi người quan tâm, khi mà người dùng di động vào website ngày càng nhiều thì tốc độ load trang là thứ mà họ cần nhanh