Thủ thuật tối ưu hình ảnh trước khi đăng lên website

Thủ thuật tối ưu hình ảnh trước khi đăng lên website

Một website chắc chắc không thể nào thiếu hình ảnh, nhưng nếu không tối ưu đúng cách thì nó sẽ làm giảm tốc độ tải trang, tốn băng thông, tốn bộ nhớ. Hậu quả của việc này dẫn tới gây khó chịu cho người dùng, giảm chất lượng SEO. Vậy sử dụng và tối ưu hình ảnh như thế nào cho đúng cách?

Xem thêm: Thủ thuật SEO hình ảnh đạt thứ hạng cao trên Google

Có những định dạng ảnh nào?

Các định dạng ảnh

Hiện nay hình ảnh sẽ được định dạng thành các đuôi sau đây:

  • JPEG: Là một định dạng phổ biến cho các file ảnh kỹ thuật số và đồ họa kỹ thuật số. Các tập tin JPG được lưu có sử dụng thuật toán “lossy”, có nghĩa là chất lượng hình ảnh giảm khi kích thước bị giảm đi.
  • GIF: Là định dạng tập tin ảnh thường được sử dụng trong website có sử dụng kỹ thuật nén “lossless” mà không giảm chất lượng hình ảnh. Mỗi ảnh GIF có thể bao gồm tối đa 256 màu.
  • PNG: Là một định dạng tập tin đồ họa raster (dạng lưới) hỗ trợ nén dữ liệu không bị suy giảm chất lượng và được coi như một cải tiến thanh thế cho GIF. PNG Có 2 định dạng là PNG-8 (tương đương GIF) và PNG-24 (tương đương JPEG).
  • TIFF: Là một định dạng file hình ảnh chất lượng cao ra đời từ 1986 như là một định dạng dùng cho ảnh scan, dùng trong in ấn. TIFF ra đời nhằm muốn nó trở thành định dạng ảnh chuẩn thay vì sử dụng nhiều định dạng ảnh khác nhau.
  • BMP: Là định dạng file hình ảnh dưới dạng lưới (raster) được sử dụng lưu trữ ảnh kỹ thuật số bitmap.

Trên internet hiện nay thì 3 định dạng JPEG, PNG và GIF là phổ biến nhất. Mình sẽ chỉ hướng mọi người tới 3 định dạng ảnh đó trong bài này.

Nên sử dụng định dạng nào cho website?

Như mình đã nói ở trên thì bài này sẽ phân tích các trường hợp sử dụng 3 định dạng JPEG, PNG và GIF cho hình ảnh để upload lên website.

So sánh JPEG, PNG, GIF

Khi nào nên dùng GIF?

Được đánh giá là định dạng tệ nhất để sử dụng làm định dạng hình ảnh cho website nhưng ưu điểm của GIF là kích thước nhỏ, load nhanh nên người ta thường sử dụng cho các icon, logo web và đặc biệt đây là định dạng tối nhất cho ảnh động.

Khi nào nên dùng JPEG?

Nếu bạn có một bức ảnh chụp từ máy ảnh hay hình ảnh nào đó mà có màu sắc phức tạp, sử dụng dốc màu (gradient) thì hãy dùng JPEG vì khi lưu nó sẽ cho ra ảnh có chất lượng tốt với dung lượng nhỏ hơn.

Khi nào nên dùng PNG?

Vì PNG có 2 định dạng khác nhau nên mình sẽ phân tích thành 2 trường hợp:

  • PNG-8: Định dạng này thích hợp cho các hình ảnh đơn giản có màu sắc trong tổ hợp màu RBG, hình ảnh có nền trong suốt, logo trang web. Hỗ trợ ảnh trong suốt
  • PNG-24: Định dạng này thích hợp cho các hình ảnh có độ chi tiết cao, đa màu sắc. Hỗ trợ ảnh trong suốt.

Như vậy đối với website thì 2 định dạng PNG và JPEG sẽ được sử dụng nhiều nhất.

Chọn kích thước phù hợp

Tùy vào website mà có cách chọn kích thước hình ảnh khác nhau, bạn nên chọn những hình ảnh có kích thước phù hợp chứ đừng chọn những hình ảnh quá lớn vì chúng sẽ có dung lượng lớn, ảnh hướng đến quá trình tải trang.

Giảm kích thước ảnh

Không ai có đủ kiên nhẫn để đợi load một bức ảnh vài trăm kb hay thậm chí vài MB cả. Hãy chọn ảnh có kích thước tối đa cần thiết, như blog mình thì ảnh tối đa chỉ có kích thước là 700×350 thôi.

Nén ảnh trước khi đăng tải

Nếu không có nhu cầu giữ kích thước tối đa thì tốt nhất bạn nên nén ảnh lại, tức là giảm dung lượng hình ảnh những vẫn đảm bảo chất lượng (mắt thường không phân biệt được).

Dựa vào phân tích bên trên mà bạn có cách lựa chọn định dạng ảnh cho phù hợp. Đối với ảnh PNG thì có kích thước lớn hơn nhưng nén sẽ tốt hơn, còn với JPEG thì do đã được nén rồi nên cũng chỉ giảm được một ít mà thôi.

Một thủ thuật nho nhỏ là với những hình ảnh ít màu sắc, văn bản thì hãy lưu dạng PNG để cho dung lượng nhỏ và sau khi nén sẽ được dung lượng tối ưu nhất. Còn những hình ảnh đa màu sắc bạn nên lưu dạng JPEG sau đó có thể giảm chất lượng khoảng 70-80% cho dung lượng giảm xuống nhưng chất lượng vẫn đảm bảo.

Công cụ nén ảnh

  • FILEminimizer Pictures: Phân mềm này được rất nhiều người sử dụng, mình cũng đã từng sử dụng và cho kết quả nén rất tốt.
  • PngOptimizer: Phần mềm này khá nhỏ gọn, dung lượng ảnh PNG sau khi nén được giảm đáng kể.
  • Caesium: Hỗ trợ nén JPG và BMP rất tốt và cho chất lượng không bị thay đổi. Phần mềm này rất dễ sử dụng và miễn phí.
  • Kraken: Một website cung cấp công cụ nén ảnh phải nói là cực tốt, nếu bạn nâng cấp lên bản trả phí sẽ có thêm công cụ giảm kích thước ảnh.
  • JPEGmini: Phiên bản web của phần mềm này cho kết quả nén JPEG rất đáng nể, một bức ảnh 600kb sau khi nén chỉ còn khoảng 200kb mà chất lượng không hề thay đổi.

Tham khảo: Kraken.io – Công cụ nén hình ảnh trực tuyến

Kết

Qua bài viết này bạn sẽ thấy được tầm quan trọng của việc tối ưu ảnh, một công việc nhỏ nhưng giúp ích được rất nhiều việc. Bạn hãy hiểu kỹ về các định dạng để có được một bức ảnh ưng ý với chất lượng tốt và dung lượng nhỏ gọn để đang lên website của mình. Chúc bạn thành công!

Thủ thuật tối ưu hình ảnh trước khi đăng lên website
3.33 (3 votes)

Để lại một bình luận

7 Bình luận trên "Thủ thuật tối ưu hình ảnh trước khi đăng lên website"

avatar
500
Lộc Lê
Khách

Mình thấy bài viết này tuy ít lời nhưng chất lượng 🙂 http://blogvina.com/wordpress/plugin-wordpress/toi-uu-hoa-hinh-anh-tot-hon-voi-plugin-wp-smush.html

Nam Ngô
Khách

Hồi trước cũng từng xài plugin mà thấy nó không hay lắm, giờ toàn tối ưu rồi đăng lên ảnh cực nhẹ luôn 😀

Trường
Khách

Đồng ý với Nam, nén trước khi up hay hơn. Mà mình thấy dùng Kraken rất hay, nén rất tốt 😀

Nam Ngô
Khách

Cái JPEGmini nén cũng ok lắm

Thắng Đẹp Trai
Khách

Nào giờ có là up lên, chứ không biết nén như thế nào. Nhờ bài này mình sẽ áp dụng thử.

Nam Ngô
Khách

Làm vậy blog sẽ nhanh và tiết kiệm dung lượng hơn nha bạn

Btsoft
Khách

Cám ơn bạn bài viết rất hữu ích với mình!Mình đang cần để cải thiện tốc độ cho site mình.

wpDiscuz
Đăng kí BẢN TIN

Đăng kí BẢN TIN

Đăng kí bản tin to cập nhật bài viết nhanh nhất and receive the following phần quà hấp dẫn từ Nam Ngô Blog.

Bạn đã đăng kí thành công!