Hình ảnh luôn là thứ làm chậm website của bạn đi rất nhiều, còn nặng hơn nếu bạn không biết lựa chọn định dạng phù hợp để tối ưu cho bứchình ảnh cho dung lượng tốt nhất và chất lượng hình ảnh tốt nhất.

Lựa chọn định dạng đúng giúp chất lượng hình ảnh của bạn luôn là đẹp nhất và giảm được dung lượng file hình ảnh tăng thêm tốc độ load cho website.

Khi nào nên sử dụng png-8, khi nào thì dùng jpg hay png, đó là thứ chúng ta cần phải lưu ý ví dụ.

đây là một ví dụ theo mình hình ảnh png-8 chất lượng còn đẹp hơn jpg hình ảnh ở bên trên, nhưng phải điều kiện là ảnh ít màu và ít chi tiết png-8 sẽ luôn làm tốt hơn jpg về chất lượng và dung lượng file hiệu quả hơn rất nhiều.

trong bài viết này mình sẽ hướng dẫn các bạn lựa chọn định dạng ảnh phù hợp nhất để tăng tốc độ load website và tăng chất lượng hình ảnh nhé.

Các định dạng phổ biến trên website

trên thị trường website ngày nay có rất nhiều định dạng hình ảnh tuy nhiên chỉ còn một số định dạng hình ảnh tốt nhất thì mới còn có thể tồn tại đến ngày nay.

• JPG (JPEG) tạo ra các tệp nhỏ hơn cho hình ảnh hoặc hình ảnh với nhiều màu sắc, định dạng này để nén được tốt
• PNG-8 : là định trong suốt, chất lượng không cao nhưng rất nhẹ
• PNG-24: là định dạng trong suốt, chất lượng cao nhưng không thể nén tốt và dung lượng ca
• WEBP: định dạng này do google phát triển, kết hợp tốt nhất của JPEG và PNG, cho phép chất lượng hình ảnh tuyệt vời và minh bạch, và nén tốt hơn so với JPEG (nhỏ hơn FileSize). Có thể được sử dụng tại chỗ của JPEG hoặc PNG 24, mọi thứ đều rất ngon tuy nhiên một số trình duyệt không hỗ trợ ví dụ safari, nên khuyến cáo là thời điểm này vẫn chưa nên sử dụng hình ảnh webp
• GIF : hình ảnh chuyển động dạng video chất lượng thấp
• PDF: định dạng in ấn, mình vẫn thấy một số website vẫn chơi định dạng này

Nên sử dụng định dạng nào và ưu nhược điểm

có 3 định dạng theo mình thì nó tốt nhất cho web ( còn định dạng webp thì dạng nén nâng cao của 3 định dang dưới để hỗ trợ cho website nên mình không cập nhật lưu ý vào đây ):

• PNG-8
• PNG-24
• JPG

Mỗi một định dạng có mỗi thế mạng trong một điều kiện hình ảnh mình sẽ phân ra làm 4 điều kiện để chia sẻ.
1: Ít màu ít chi tiết
2: Ít màu nhiều chi tiết
3: Nhiều màu ít chi tiết
4: Nhiều màu nhiều chi tiết

Lúc nào sử dụng hình ảnh PNG-8 tốt nhất

PNG-8 là định dang trong suốt, định dạng màu dưới 256 color, định dạng ảnh không nén sẵn

PNG-8 lựa chọn tốt nhất ở điều kiện ít màu ít chi tiết.

Nếu ảnh bạn đang sử dụng là ảnh ít màu, ít chi tiết thì hãy chọn định dạng png-8 là lựa chọn tốt nhất.

PNG-8 không hỗ trợ trên 256 color màu, nếu điều kiện ảnh trên 256 color phải dành cho PNG-24 hoặc JPG.

có một kỹ thuật mình thường xuyên sử dụng nhưng chả có ai chia sẻ với bạn đâu, nay mình sẵn sàng chia sẻ cho mọi người là ảnh càng ít màu dung lượng file càng ít, cố gắng hãy dùng ít màu đơn giản nhất có thể dùng bạn dùng file gì thì nó cũng giúp bạn giảm dung lượng.

Cố gắng nếu bạn là người chia sẻ về công nghệ những hình ảnh hoạt hình cố gắng sử dụng png-8 là tốt nhất.

Bạn chất các công cụ nén ảnh họ thường sử dụng thuật toán kéo đầu màu lại sẽ nhẹ file hơn.

Lúc nào sử dụng hình ảnh PNG-24 tốt nhất

PNG-24 là cũng là định dạng hỗ trợ trong suốt, định dạng màu trên trên 256 color, định dạng ảnh không nén sẵn.

Điều kiện ảnh: ảnh bạn nhiều màu, ít chi tiết rất phù hợp PNG-24
Nhu cầu load tăng tốc website: thì định dạng điều kiện ảnh bạn nhiều màu, ít chi tiết sử dụng PNG-24 rất phù hợp.

Trường hợp dành cho photographer: điều kiện ảnh nhiều màu nhiều chi tiết đặc biệt nếu bạn là photographer thì hãy sử dụng định dạng này nhé, định dạng PNG-24 chất lượng hình ảnh tốt hơn nhiều so với JPG tuy nhiên nhược điểm của nó là dung lượng file rất nặng PNG-24 điều kiện trên thì nặng hơn JPG

PNG-24 lựa chọn tốt nhất ở điều kiện ảnh nhiều màu ít chi tiết, riêng nếu bạn là photographer chất lượng hình là tất cả điều kiện :nhiều màu nhiều chi tiết lựa chọn tốt nhất là PNG-24

PNG luôn ra chất lượng ảnh tốt hơn JPG

Lúc nào sử dụng hình ảnh JPG tốt nhất

JPG là đinh đạng hỗ trợ nhiều màu, không hỗ trợ trong suốt, định dạng nén sẵn.

Điều kiện ảnh: nhiều chi tiết và nhiều màu.

Muốn nhu cầu nhẹ load dung lượng nhẹ load nhanh JPG là lựa chọn tốt nhất vì PNG-8 không hỗ trợ nhiều màu, PNG-24 vì quá nặng.

JPG lựa chọn tốt nhất dành cho điều kiện ảnh nhiều chi tiết và nhiều màu ( yêu cầu chất lượng đủ tốt và tốc độ load hơn là cần chất lượng xuất sắc )

Còn định dạng webp thì không cần gì phải lựa chọn và lưu ý gì cả

giới thiệu qua về ảnh webp được giới thiệu bởi google, google là công ty phát minh lên định dạng ảnh webp.

Ưu điểm lớn nhất của nó là nén ảnh rất tốt chất lượng vẫn giữ nguyên giảm được từ 20% đến 35% so với định dạng anh thông thường png hay jpg.

Nhược điểm lớn nhất là không phải trình duyệt nào cũng hỗ trợ ảnh webp.

Theo mình webp là định dạng để phân phối tối ưu không phải định dạng sử dụng nên không ghi vào đây.

có sự thật rằng định đạng ảnh webp rất tốt mình sẽ viết một bài chi tiết về định dạng ảnh webp hướng dẫn sử dụng cách kích hoạt nó như thế nào.

Với bài viết chia sẻ bí quyết về lựa chọn định dạng ảnh tối ưu nhất thì hy vọng sẽ giúp ích được cho bạn trong công việc chúc bạn một ngày thật tuyệt vời.

Tóm tắt:

Để lựa chọn được một định dạng ảnh nào tốt nhất dành cho bạn nó phụ thuộc vào điều kiện ảnh của bạn, thì mới có thể quyết định được lên lựa chọn định đạng ảnh nào là tối ưu nhất dành cho bạn.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh Facebook của chúng tôi và xem thêm 1 số Plugin chất lượng và nhiều mẫu theme đẹp nhất của chúng tôi trên Đầu Hẻm nhé