Advertisement
  1. Web Design
  2. General

Các định dạng và cách sử dụng hình ảnh trong thiết kế web

Scroll to top
Read Time: 17 min

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Bạn đã bao giờ tự hỏi sự khác biệt giữa các hình ảnh JPEG, GIF và PNG mà chúng ta sử dụng trên web là gì? Là một nhà thiết kế - và đặc biệt là một nhà thiết kế web - điều quan trọng là phải biết sự khác biệt giữa các định dạng hình ảnh khác nhau và cách sử dụng chúng trong từng tình huống. Bài viết này sẽ bao gồm cách sử dụng chúng cho từng tình huống để có kích thước tập tin nhỏ và chất lượng hình ảnh cao. Chúng ta đang đề cập một cách cơ bản, nhưng thông tin này sẽ rất thú vị cho bất cứ ai đang muốn có sự hiểu biết sâu sắc hơn về các định dạng hình ảnh.


Sự khác biệt

Để sử dụng một công cụ hiệu quả nhất, trước tiên bạn cần phải hiểu cách công cụ đó hoạt động như thế nào. Để hiểu cách sử dụng các định dạng hình ảnh tốt hơn, chúng ta cần hiểu thuật toán nén của chúng hoạt động như thế nào. Tôi biết, bạn không phải là một người đam mê những con số và ai mà quan tâm đến những điều đó cơ chứ? Mặc dù vậy, nó giống như việc lái xe; bạn có thể lái nó tốt hơn khi bạn biết tất cả các phần nhỏ tương tác như thế nào. Ngoài ra, khi có sự cố, bạn sẽ biết cách sửa nó!

Giới thiệu về định dạng .JPG

JPEG được phát triển bởi Joint Photographic Experts Group. Như bạn có thể đoán, nó có hiệu quả tốt cho các định dạng hình ảnh tự nhiên (ảnh chụp). Các định dạng hình ảnh tự nhiên, như ảnh chụp, có các biến thể mượt mà về màu sắc, có nghĩa là định dạng JPEG cũng hoạt động tốt cho các hình ảnh chứa các hiệu ứng chuyển màu và các tông màu và màu sắc khác nhau.

Một điểm quan trọng về JPEG đó là chúng thường là một định dạng bị hao tổn, trừ khi bạn sử dụng một biến thể khác mà nó bảo toàn chất lượng. Nén giảm chất lượng đơn giản là một dạng mã hóa mà nó bỏ đi (mất đi) một số dữ liệu của nó ... đó là lý do tại sao nếu bạn lưu JPG 100 lần, nó sẽ dần dần trở nên xấu đi theo thời gian. JPG có các phiên bản "bảo toàn chất lượng", nhưng các biến thể này không phổ biến và không được hỗ trợ rộng rãi. Nếu bạn cần lưu trữ dữ liệu hình ảnh theo định dạng bảo toàn chất lượng, tốt nhất bạn nên sử dụng định dạng như TIFF hoặc PSD.

Bây giờ cho phần kỹ thuật: Quá trình JPEG chia hình ảnh thành các khối 8 × 8 pixel và thực hiện chúng thông qua phép tính DCT (Discrete Cosine Transform) tiếp theo là lượng tử hóa (JPEG 2000, một phiên bản mới hơn, sử dụng biến đổi wavelet thay vì DCT ).

Theo thuật ngữ của người không chuyên: về cơ bản, nó nhìn vào các khối hình ảnh và xác định các biến thể nhỏ về màu sắc, sau đó bỏ đi một số biến thể dựa trên mức độ nén mà bạn đã chọn. Dữ liệu mà nó bỏ sẽ bị xóa khỏi tập tin hoàn toàn, kết thúc bằng việc có một tập tin nhỏ. Hậu quả là, điều này cũng làm giảm đi chất lượng của hình ảnh; Bạn có thể biết rằng nếu bạn thiết lập mức nén rất cao, bạn sẽ có một hình ảnh bị giảm chất lượng, bị răng cưa ... trong khi thiết lập nén thấp hơn sẽ có một hình ảnh có chất lượng cao hơn.

Giới thiệu về định dạng .GIF

GIF (Graphics Interchange Format) được CompuServe phát triển và sử dụng phương pháp nén LZW (Lempel-Ziv-Welch), là bảo toàn chất lượng. Phương pháp nén này xây dựng một bảng màu cho hình ảnh nơi mỗi giá trị màu được gán thành pixel. Phương pháp nén này làm cho định dạng hình ảnh này lý tưởng cho nghệ thuật đường nét, logo hoặc các hình ảnh đơn giản khác mà không có hiệu ứng chuyển màu hoặc màu khác nhau.

Một lưu ý thú vị về phương pháp nén này là nó nhìn vào sự thay đổi điểm ảnh theo chiều ngang. Điều đó có nghĩa là các hình ảnh nơi mà các màu sắc thay đổi xảy ra thường xuyên hơn theo chiều ngang sẽ lớn hơn hình ảnh nơi mà sự thay đổi màu sắc pixel xảy ra thường xuyên hơn theo chiều dọc. Định dạng này hỗ trợ tối đa 8 bit trên mỗi pixel - cho phép một hình ảnh đơn lẻ tham chiếu đến một bảng màu lên tới 256 màu riêng biệt. Bạn có thể sử dụng ít màu hơn (bạn có thể đã thấy ảnh GIF chỉ bằng một số màu), điều này có thể tạo ra một số số kết quả thú vị, thậm chí là mang tính nghệ thuật.

GIF có thể làm hai thứ bổ sung mà JPEG không thể làm được. Đầu tiên, GIF có thể sử dụng độ trong suốt. Trong một GIF pixels có thể có độ trong suốt 100% hoặc mờ đục 100%. GIF cũng là một định dạng đa hình ảnh, vì vậy bạn có thể sử dụng hoạt ảnh (để làm tốt hơn hoặc tệ hơn).

Giới thiệu về định dạng .PNG

PNG (Portable Network Graphics) được tạo ra để thay thế cơ bản, hoặc ít nhất là cải thiện định dạng GIF. PNG sử dụng phương pháp nén DEFLATE - cùng một thuật toán được sử dụng trong zip và gzip. Tôi sẽ không đi vào cách phương thức nén này hoạt động như thế nào vì nó quá phức tạp cho bài viết này, nhưng nó là nén bảo toàn chất lượng. Do đó, định dạng PNG có xu hướng cho kích thước hình ảnh lớn hơn JPEG khi được sử dụng cho hình ảnh kiểu ảnh chụp. Khi được sử dụng cho hình ảnh kiểu hình nghệ thuật nét vẽ, các kết quả PNG cho kích thước tập tin nhỏ hơn nhiều so với JPEG và hầu như luôn có kích thước nhỏ hơn GIF.

Không giống như GIF, PNG cũng giống như JPEG theo khía cạnh mà nó là một định dạng hình ảnh duy nhất; nghĩa là PNG không hỗ trợ hoạt ảnh. Tuy nhiên, nó hỗ trợ một lợi thế lớn mà JPEG hoặc GIF không hỗ trợ, đó là: độ trong suốt của alpha. Pixel trong hình ảnh PNG có thể là 50% trong suốt, trong khi trái ngược với định dạng GIF, nó sẽ yêu cầu các pixel đó phải là 100% trong suốt hoặc 100% mờ đục. Như bạn có thể hình dung, điều này sẽ cho phép kết hợp đồ họa mượt mà hơn và pha trộn hơn GIF. PNG cũng thực hiện một số cải tiến khác trên định dạng GIF, nhưng chúng không cần thiết để tham gia.

Không cần phải nói, PNG là một định dạng tốt hơn nhiều để sử dụng hơn GIF trong hầu như tất cả các khía cạnh ngoại trừ các tập tin rất nhỏ (ví dụ như được sử dụng trong các mẫu pattern hình nền). Định dạng PNG đã thu hút các nhà phát triển web vì nó không tương thích với một số trình duyệt web cũ, nhưng ngày nay, phần lớn vấn đề đó có thể được giải quyết thông qua một vài script tuyệt vời, như script DD_Belated.

Như bạn có thể đã biết, PNG có hai định dạng chính.

  • PNG8 (8-bit) - về cơ bản giống như một GIF có giới hạn màu sắc (tối đa 256 màu) nhưng cho phép độ trong suốt alpha.
  • PNG24 (24 bit) - cho phép có nhiều màu sắc hơn.

Sử dụng JPEG, GIF và PNG

Dưới đây là hai hình ảnh ví dụ mà tôi sẽ sử dụng để hiển thị cách thức và thời điểm sử dụng cho mỗi định dạng hình ảnh. Bạn có thể đã quen thuộc với các phương pháp này, nhưng nếu bạn chưa thực sự tìm hiểu về chúng, điều này cũng đáng để tham khảo.

Image Types on the WebImage Types on the WebImage Types on the Web

Sử dụng JPG

Như bạn có thể thấy, hình ảnh bên dưới là ảnh chụp tự nhiên với các màu sắc và tông màu thay đổi rất nhiều. Rõ ràng, không phải tất cả các hình ảnh đều sử dụng nhiều màu sắc này - nhưng hình ảnh này rất phù hợp để sử dụng như một ví dụ về việc sử dụng định dạng JPEG.

JPEG Compression ExamplesJPEG Compression ExamplesJPEG Compression Examples
JPG đơn giản

Hình ảnh dưới đây cho thấy nén JPEG từ thiết lập chất lượng 100% xuống 0%. Với chất lượng 100%, hình ảnh xuất hiện không bị tổn hao, nhưng dữ liệu vẫn bị loại bỏ khỏi hình ảnh gốc. Mắt người không thể nhìn thấy sự tổn hao của dữ liệu vì nó là rất nhỏ. Với 50%, chất lượng hình ảnh giảm đáng kể, nhưng như bạn có thể thấy, kích thước tập tin nhỏ hơn 100K. Đó là một sự khác biệt rất lớn với phần nào sự giảm thiểu chất lượng có thể nhìn thấy. Tại 25%, hình ảnh thực sự bắt đầu trông xấu và không lưu nhiều kích thước tập tin bổ sung. Ở mức 0%, hình ảnh có vẻ khủng khiếp và mặc dù hình ảnh có kích thước tập tin nhỏ hơn nhiều so với thiết lập 100% nhưng sự cân bằng không đáng giá.

JPEG Compression ExamplesJPEG Compression ExamplesJPEG Compression Examples
Ví dụ về nén hình ảnh JPG

Hình ảnh này có lẽ sẽ trông đẹp nhất ở mức ~ 65% chất lượng làm giảm kích thước hình ảnh gần 100K. Để xác định các thiết lập tốt nhất để sử dụng cho một JPEG, từ từ giảm thanh trượt cho đến khi bạn có thể bắt đầu thấy chất lượng hình ảnh thực sự suy giảm. Sau đó di chuyển chất lượng sao lưu khoảng 5-10% hoặc hơn.

JPEG Compression at 65%JPEG Compression at 65%JPEG Compression at 65%
Nén hình ảnh JPG 65%

Chúng tôi biết rằng JPG này trông có vẻ phù hợp cho web; Hãy xem xét một số so sánh các loại nén kích thước tập tin / chất lượng cho các định dạng khác:

Kết quả GIF có kích thước tập tin là 63,77K và hình ảnh trông khủng khiếp.

Kết quả PNG8 có kích thước tập tin là 53,52K do các phương pháp nén nâng cao hơn, nhưng trông giống như GIF.

Kết quả PNG24 có kích thước tập tin là 253,9K và trông gần với kích thước gốc nhưng không hiệu quả với kích thước tập tin lớn.

Tùy chọn khả thi nhất cho định dạng hình ảnh này là JPEG với ~65% chất lượng; kích thước tập tin nhỏ (39.77K) với rất ít hao tổn về chất lượng hình ảnh.


Sử dụng GIF và PNG8

Như bạn có thể thấy bên dưới, hình ảnh không sử dụng các màu sắc hoặc tông màu khác nhau, nhưng thay vào đó là các màu đồng nhất. Hình ảnh này là 5.72K (GIF) và sử dụng tổng cộng 8 màu. Điều này làm cho các định dạng GIF và PNG8 tuyệt vời cho nghệ thuật đường nét, logo có màu đơn giản, v.v. PNG8 sẽ là lựa chọn tốt hơn ở đây vì nó có kích thước tập tin nhỏ hơn (3,54K) do phương pháp nén tốt hơn mà nó sử dụng.

GIF CompressionGIF CompressionGIF Compression
Nén GIF (Lưu ý bảng màu giới hạn)

Khi bạn cố gắng lưu GIF, giống như hình ảnh trên, dưới dạng JPEG, nó có thể bị răng cưa hoặc biến dạng hình ảnh. Nó sẽ luôn luôn có kết quả là các kích thước tập tin lớn hơn nhiều khi bạn xử lý với ảnh chụp và những hình ảnh phong phú khác. Hình ảnh dưới đây được đặt ở mức nén tối đa và kết quả là kích thước tập tin gần 8K đối với JPEG so với 5.72K đối với GIF và 3.54K đối với PNG8.

GIF CompressionGIF CompressionGIF Compression
Nén GIF ...
GIF vs JPG Compression ExampleGIF vs JPG Compression ExampleGIF vs JPG Compression Example
So với nén JPG chất lượng thấp

Không giống như JPEG và PNG24, GIF và PNG8 cho phép bạn chọn số lượng màu có thể được sử dụng (tối đa 256). Trong trường hợp các hình ảnh như logo và hình nghệ thuật đường nét đơn giản, bạn có thể đạt được kích thước tập tin nhỏ hơn bằng cách chọn ít màu hơn. Hãy lưu ý rằng bạn không chọn quá ít màu mặc dù nó có thể làm cho hình ảnh trông tồi tệ hơn nhiều.

GIF Color Selection ExampleGIF Color Selection ExampleGIF Color Selection Example
Ví dụ lựa chọn màu GIF

Hình ảnh dưới đây là một PNG8 với độ trong suốt (GIF trông giống như vậy) giống như trong Photoshop. Khi sử dụng độ trong suốt với GIF hoặc PNG8, bạn sẽ muốn thiết lập độ mờ của hình ảnh thành màu nền bất kỳ - để pha trộn tốt hơn và hình ảnh rõ hơn. Như đã đề cập trước đó, điều này là do GIF không hỗ trợ tính trong suốt của alpha và Photoshop không hỗ trợ tính trong suốt của alpha với định dạng PNG8 mặc dù nó hỗ trợ điều này (Edit - điều này đã được sửa trong các phiên bản Photoshop mới).

PNG8 ExamplePNG8 ExamplePNG8 Example
Ví dụ về PNG8

Rất may là Fireworks cho phép chúng ta sử dụng Alpha Transparency với định dạng PNG8. Như bạn có thể thấy trong hình dưới đây, gradient màu đen vẫn bị hạn chế trong sự thay đổi của tông màu làm cho sự chuyển màu trông hơi bị thay đổi. Điều tuyệt vời về việc sử dụng độ trong suốt của alpha với PNG8 là bạn vẫn có được kích thước tập tin nhỏ nhưng các cạnh pha trộn trơn tru và thậm chí cả các chuyển màu nhỏ trông vẫn tuyệt vời.

Một lợi thế lớn khác của định dạng PNG8 là IE6 hỗ trợ việc sử dụng tính trong suốt của alpha với nó một cách nguyên bản! Điều đó có nghĩa là đối với các hình ảnh đơn giản cần độ trong suốt của alpha (đổ bóng, biểu tượng,...), bạn không cần phải hack IE6 khi sử dụng PNG8 và độ trong suốt alpha!

PNG8 Alpha Transparency ExamplePNG8 Alpha Transparency ExamplePNG8 Alpha Transparency Example
Ví dụ tính trong suốt của Alpha trên định dạng PNG

Thật không may là bạn không thể lưu ảnh dưới dạng PNG8 với độ trong suốt của alpha trong Photoshop, vì vậy bạn sẽ cần phải sử dụng Fireworks để làm điều này.

PNG8 Alpha Transparency Example

Trong pallet Optimize, chọn định dạng PNG8 có tính trong suốt của alpha được chọn, sau đó nhấp vào “Rebuild” ở góc dưới bên phải.

Bạn không cần phải chọn màu mở và bạn có thể điều chỉnh số lượng màu sắc cho phù hợp với nhu cầu của bạn và để giảm kích thước tập tin. Trong ví dụ bên phải, tôi đã lưu các thiết lập này dưới dạng "PNG8 Alpha-T", do đó, tôi không cần phải chọn lại từng tùy chọn mỗi lần tôi muốn lưu hình ảnh PNG8 với tính trong suốt của alpha.

Đó là tất cả những gì về nó!


Sử dụng PNG24

Sử dụng PNG24 về cơ bản là tương tự như sử dụng GIF hoặc PNG8, ngoại trừ việc nó sẽ có kích thước tập tin lớn hơn vì nó hỗ trợ phạm vi biến thể màu rộng hơn rất nhiều. Nếu bạn có hình ảnh với các chuyển màu phức tạp hơn mà cần tính trong suốt hoặc độ sâu màu lớn hơn, PNG24 là lựa chọn tốt nhất. Thật không may, IE6 không hỗ trợ PNG24; vì vậy bạn sẽ phải "hack" nó để sử dụng một cách phù hợp.

PNG24 Alpha Transparency ExamplePNG24 Alpha Transparency ExamplePNG24 Alpha Transparency Example

PNG24 rất tuyệt vời trong hầu hết các trường hợp khi bạn cần tính trong suốt - chúng có kích thước tập tin lớn hơn, nhưng hoạt động tốt trong các trường hợp như biểu tượng thương hiệu nơi chất lượng là quan trọng và bạn không cần sử dụng một định dạng bị mất chất lượng.


Các định dạng khác

WebP (Định dạng Hình ảnh Web của Google):

Đây là một định dạng hoàn toàn mới, được Google công bố chỉ vài tuần trước. Từ thông cáo báo chí của họ:

"Để cải thiện độ nén mà JPEG cung cấp, chúng tôi đã sử dụng công cụ nén hình ảnh dựa trên codec VP8 mà Google mở nguồn vào tháng 5 năm 2010 Chúng tôi áp dụng các kỹ thuật từ phương pháp Intra-frame coding video VP8 để gia tăng giới hạn mã hóa hình ảnh tĩnh. Chúng tôi cũng đã điều chỉnh một vùng chứa rất nhẹ dựa trên RIFF. Mặc dù định dạng vùng chứa này gia tăng giới hạn cho phép tối thiểu chỉ 20 byte cho mỗi hình ảnh, thì nó có thể cho phép các tác giả lưu dữ liệu meta mà họ muốn lưu trữ.

Mặc dù các lợi ích của định dạng hình ảnh dựa trên VP8 đã rõ ràng về mặt lý thuyết, nhưng chúng tôi cần kiểm tra chúng trong thế giới thực. Để đánh giá hiệu quả của những nỗ lực của chúng tôi, chúng tôi đã chọn ngẫu nhiên khoảng 1.000.000 hình ảnh từ web (Phần lớn là JPEG và một số ít là PNG và GIF) và mã hóa chúng thành WebP mà không ảnh hưởng đến chất lượng hình ảnh. Kết quả có được là kích thước tập tin trung bình giảm 39% Chúng tôi hy vọng rằng các nhà phát triển sẽ đạt được trong thực tế có thể giảm kích thước tập tin thậm chí tốt hơn với WebP khi bắt đầu từ một hình ảnh chưa được nén".

Mục tiêu ở đây rất đơn giản: để tăng tốc độ hình ảnh trên web bằng các thuật toán hiện đại hơn. Câu hỏi đặt ra là: Nó sẽ được thông qua? Google là một công ty lớn với sức mạnh thực sự để đưa định dạng này đến công chúng, nhưng như chúng ta đã thấy với một số sản phẩm của nó, thì ngay cả những ý tưởng tuyệt vời cũng có thể bị bỏ rơi.

Định dạng SVG

"Scalable Vector Graphics" là một định dạng không bao giờ bị bắt gặp như một loại định dạng hình ảnh được sử dụng rộng rãi. Ý tưởng đằng sau định dạng này là để cho phép "các đồ họa vetor" sử dụng được trên trang web. Định dạng sử dụng XML là cơ sở để mô tả hình ảnh 2D trên web. Trình duyệt hỗ trợ cho SVG không phù hợp, nhưng nếu bạn thực sự muốn bao gồm các đồ họa có khả năng mở rộng, thì nó rất đáng để đọc trên định dạng này.


Kết luận

Khi bạn rảnh, tôi khuyến khích bạn đào sâu hơn một chút vào các định dạng hình ảnh này và tất cả những gì chúng phải cung cấp. Bạn sẽ biết được rất nhiều và biết chính xác những điều bạn có thể làm với các định dạng hình ảnh này hoặc loại nào để sử dụng cho mỗi tình huống. Giá trị của các kích thước tập tin siêu nhỏ cho hình ảnh có vẻ như sẽ đi qua vì băng thông rộng mở rộng trên internet, nhưng tốc độ thì sẽ luôn là một đặc điểm trang web hữu ích và hiểu các định dạng hình ảnh này là bước đầu tiên để tối ưu hóa hình ảnh của riêng bạn trên trang web.

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, vui lòng đăng chúng dưới đây!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.