Một số định dạng ảnh thường dùng cho Website
Hình ảnh trên website rất đa dạng, bao gồm hình slide, logo, các biểu tượng, hình sảnh phẩm hay hình mô tả các bài viết. Việc sử dụng hình ảnh có thể giúp khách hàng hiểu rõ hơn về nội dung, hiểu rõ hơn về sản phẩm,… Bên cạnh đó, hình ảnh phải rõ nét, đẹp thì mới thu hút được khách hàng.
1. Định dạng SVG
SVG là viết tắt của Scaable Vector Graphic, nghĩa là đồ họa Vectơ có thể mở rộng. SVG được định nghĩa bằng XML, nên nó có dung lượng nhẹ.
Ưu điểm SVG
Vì SVG là ảnh vector lại được viết bằng mã XML nên nó không cố định kích thước. SVG có thể thu phóng thoải mái mà không làm tăng kích thước và hiển thị tốt như nhau trên tất cả các màn hình.
Vì SVG được viết bằng mã, bạn có thể dễ dàng tạo hiệu ứng cho toàn bộ SVG hoặc các phần của chúng.
Bạn có thể lập trình chuyển đổi hình ảnh SVG bằng JavaScript hoặc CSS bằng cách chỉnh sửa các phần tử, lớp hoặc thẻ của chúng.
SVG rất nhẹ và không chiếm nhiều dung lượng trên mẫu web đẹp của bạn.
Nhược điểm SVG
SVG không thể tạo lại các chi tiết ảnh phức tạp.
Các trình duyệt cũ hơn thường không hỗ trợ SVG.
Kết luận: SVG thường được dùng để tạo các hình ảnh đơn giản, như là các biểu tượng trên website.
2. Ảnh PNG
Đuôi ảnh PNG là chữ viết tắt của cụm từ Portable Network Graphics - tạm dịch “Đồ hoạ mạng di động” là định dạng tệp đồ hoạ raster hỗ trợ nén dữ liệu nhưng không làm mất chất lượng hình ảnh thường dùng thay thế GIF và JPEG.
Ưu điểm
PNG cho phép nén không mất dữ liệu, bảo toàn chất lượng và siêu dữ liệu cho dù bạn mã hóa hoặc giải mã chúng bao nhiêu lần.
Vì PNG hỗ trợ độ sâu màu rộng, tức là bảng màu RGB 24 bit, 32 bit RGBA và thang độ xám, nên hình ảnh rất lý tưởng để chụp ảnh.
Ảnh PNG có nền trong suốt.
Nhược điểm
Do nén không mất dữ liệu, PNG có dung lượng lớn hơn JPEG.
CMYK không hoạt động trong PNG, khiến chúng không thích hợp để in.
3. Định dạng JPEG
Định dạng của JPEG có lẽ là định dạng nổi tiếng nhất. Nó có 2 dạng JPEG không liên tục và JPEG liên tục. Khi được hiển thị, các ảnh JPEG không liên tục tải từ trên xuống dưới. Có nghĩa là khi có kết nối chậm, bạn sẽ thấy ảnh JPEG tải từng phần một cách chậm rãi cho đến khi tải xong.
JPEG liên tục, phiên bản mới hơn, mang lại trải nghiệm người dùng tốt hơn khi hiển thị vì chúng bắt đầu bằng cách tải toàn bộ hình ảnh ở độ phân giải thấp hơn. Sau khi tải xong hình ảnh trở nên sắc nét hơn.
Ưu điểm
Các ảnh JPEG có dung lượng nhỏ hơn do nén hiệu quả hơn.
Hình ảnh nén vừa phải vẫn cho chất lượng hình rất tốt.
Nhược điểm
JPEG liên tục chiếm nhiều bộ nhớ và tài nguyên CPU hơn để mã hóa và giải mã vì chúng phải quét hình ảnh nhiều lần.
Kết luận: ảnh JPEG được dùng bất cứ đâu trên website, thay cho các định dạng khác có dung lượng lớn hơn.
4. Định dạng GIF
Bạn có thể tạo ảnh tĩnh hoặc ảnh động bằng ảnh định dạng GIF. Tuy nhiên, bạn chỉ nên tạo các hoạt ảnh ngắn với GIF vì chất lượng hình ảnh của chúng kém hơn các định dạng khác.
Ưu điểm
Ảnh động GIF nhỏ hơn so với các định dạng ảnh khác. Khi được triển khai trên các trang web, GIF tải nhanh và tiết kiệm băng thông.
GIF hỗ trợ nền trong suốt.
Tính năng nén không mất dữ liệu của GIF đảm bảo chất lượng.
Nhược điểm
GIF chỉ hỗ trợ một bảng màu hạn chế (256 màu), có thể tạo ra hình ảnh và hoạt ảnh có pixel không mong muốn.
Bạn không thể chỉnh sửa tệp ảnh động GIF được mã hóa. Để kết hợp các thay đổi, bạn phải làm lại toàn bộ hình ảnh.
Ảnh động GIF bắt nguồn từ nhiều ảnh tĩnh, hiển thị chúng riêng lẻ. Do đó, hình ảnh động có thể bị giật hoặc đơ.
Kết luận: ảnh GIF chỉ nên dùng để chèn vào nội dung nhằm mô tả thêm cho nội dung đó.
5. Định dạng hình ảnh thế hệ tiếp theo WEBP
Sự ra đời của công nghệ hình ảnh và web đã dẫn đến sự phát triển của các định dạng mới hoặc thế hệ tiếp theo, đó là Webp. Webp thường mang lại chất lượng và độ nén tốt hơn so với các định dạng truyền thống, dẫn đến yêu cầu băng thông thấp hơn và tải nhanh hơn.
Một yếu tố chính khác ảnh hưởng đến việc áp dụng các định dạng thế hệ tiếp theo là việc Google ưu tiên các trang web sử dụng chúng.
WebP là định dạng do Google tạo ra nhằm duy trì chất lượng hình ảnh với tỷ lệ nén cao hơn. Cả nén mất dữ liệu và nén không mất dữ liệu đều hoạt động trong WebP, hiển thị tốt trong hầu hết các trình duyệt hiện đại.
Ưu điểm
WebP có dung lượng nhỏ hơn đáng kể so với các định dạng truyền thống có chất lượng tương đương.
WebP hỗ trợ tính minh bạch, do đó lý tưởng cho việc xây dựng thương hiệu và biểu trưng.
WebP có hỗ trợ nền trong suốt, và tạo hoạt ảnh như ảnh GIF.
Nhược điểm
Giải mã WebP mất nhiều thời gian hơn so với các định dạng khác.
Các phần mềm chỉnh sửa ảnh thông dụng như Photoshop không đọc được định dạng WebP. Để chỉnh sửa ảnh WebP bằng Photoshop, bạn phải tải và cài đặt Plugin hỗ trợ.
