Có một số định dạng hình ảnh có thể được sử dụng trên các trang web. Một số ví dụ phổ biến là GIF , JPG và PNG . Các tệp SVG cũng thường được sử dụng trên các trang web hiện nay, cho các nhà thiết kế web một tùy chọn khác cho hình ảnh trực tuyến.
Ảnh GIF
Sử dụng tệp GIF cho hình ảnh có số lượng màu cố định nhỏ. Các tệp GIF luôn được giảm xuống không quá 256 màu duy nhất. Thuật toán nén cho các tệp GIF ít phức tạp hơn đối với các tệp JPG, nhưng khi được sử dụng trên các hình ảnh và văn bản màu phẳng, nó tạo ra kích thước tệp rất nhỏ .
Định dạng GIF không phù hợp với hình ảnh hoặc hình ảnh có màu gradient. Vì định dạng GIF có số lượng màu, số lượng và hình ảnh có giới hạn sẽ kết thúc bằng dải và pixel khi được lưu dưới dạng tệp GIF.
Tóm lại, bạn sẽ chỉ sử dụng GIF cho hình ảnh đơn giản chỉ với một vài màu, nhưng bạn cũng có thể sử dụng PNG cho hình ảnh đó (nhiều hơn trong thời gian ngắn).
Hình ảnh JPG
Sử dụng hình ảnh JPG cho ảnh và các hình ảnh khác có hàng triệu màu. Nó sử dụng một thuật toán nén phức tạp cho phép bạn tạo ra đồ họa nhỏ hơn bằng cách mất một số chất lượng của hình ảnh. Điều này được gọi là nén "mất dữ liệu" vì một số thông tin hình ảnh bị mất khi hình ảnh được nén.
Định dạng JPG không phù hợp với hình ảnh có văn bản, khối lớn màu đồng nhất và hình dạng đơn giản với các cạnh sắc nét. Điều này là do khi hình ảnh được nén, văn bản, màu sắc hoặc các dòng có thể làm mờ hình ảnh không sắc nét như hình ảnh sẽ được lưu ở định dạng khác.
Hình ảnh JPG được sử dụng tốt nhất cho ảnh và hình ảnh có nhiều màu sắc tự nhiên.
Hình ảnh PNG
Định dạng PNG được phát triển dưới dạng thay thế cho định dạng GIF khi xuất hiện hình ảnh GIF sẽ phải chịu phí bản quyền. Đồ họa PNG có tỷ lệ nén tốt hơn so với hình ảnh GIF dẫn đến hình ảnh nhỏ hơn so với tệp được lưu dưới dạng GIF. Các tệp PNG cung cấp độ trong suốt của alpha, có nghĩa là bạn có thể có các khu vực hình ảnh của bạn hoàn toàn trong suốt hoặc thậm chí sử dụng một loạt độ trong suốt của alpha. Ví dụ, một bóng đổ sử dụng một loạt các hiệu ứng trong suốt và sẽ phù hợp cho một PNG (hoặc bạn chỉ có thể kết thúc chúng tôi bằng cách sử dụng bóng CSS thay thế).
Hình ảnh PNG, như GIF, không phù hợp với ảnh chụp. Có thể gặp vấn đề về dải ảnh hưởng đến ảnh được lưu dưới dạng tệp GIF bằng màu sắc thực, nhưng điều này có thể dẫn đến hình ảnh rất lớn. Hình ảnh PNG cũng không được hỗ trợ tốt bởi điện thoại di động cũ và điện thoại phổ thông.
Chúng tôi sử dụng PNG cho bất kỳ tệp nào yêu cầu độ trong suốt. Chúng tôi cũng sử dụng PNG-8 cho bất kỳ tệp nào phù hợp dưới dạng GIF, thay vào đó, sử dụng định dạng PNG này.
Hình ảnh SVG
SVG là viết tắt của Scalable Vector Graphic. Không giống như các định dạng dựa trên raster được tìm thấy trong JPG, GIF và PNG, các tệp này sử dụng các vectơ để tạo các tệp rất nhỏ có thể được hiển thị ở mọi kích thước mà không làm giảm chất lượng kích thước tệp. Chúng được tạo ra để minh họa như biểu tượng và thậm chí là biểu tượng.
Chuẩn bị hình ảnh để phân phối web
Bất kể bạn sử dụng định dạng hình ảnh nào và trang web của bạn chắc chắn sử dụng một số định dạng khác nhau trên tất cả các trang của trang web, bạn cần đảm bảo rằng tất cả hình ảnh trên trang web đó đều được chuẩn bị để phân phối web . Các hình ảnh quá lớn có thể khiến trang web chạy chậm và ảnh hưởng đến hiệu suất tổng thể. Để chống lại điều này, những hình ảnh đó phải được tối ưu hóa để tìm sự cân bằng giữa chất lượng cao và kích thước tệp thấp nhất có thể ở mức chất lượng đó.
Chọn định dạng hình ảnh phù hợp là một phần của cuộc chiến, nhưng cũng đảm bảo rằng bạn đã chuẩn bị các tệp đó là bước tiếp theo trong quy trình phân phối web quan trọng này.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard.