Tôi nên sử dụng loại hình ảnh nào khi? GIF, JPG hoặc PNG?

Question

Tôi đang cố gắng tạo trang chủ cá nhân cho chính mình để tìm hiểu thêm về thiết kế web (JavaScript, sử dụng Photo Shop, v.v.). Tôi có kế hoạch có một menu đồ họa ở bên trái, một biểu ngữ trên đầu trang và cũng là một phần "Hình ảnh" nơi tôi có thể hiển thị hình ảnh của các hình ảnh khác nhau mà tôi đã chụp.

Tuy nhiên, khi tôi xem các trang web khác làm bất kỳ điều gì tương tự, tôi thấy một số sử dụng GIF và một số sử dụng JPG và một số thậm chí sử dụng PNG. Có sự khác biệt nào giữa chúng không? Tôi có nên sử dụng GIF cho hình ảnh đồ họa được sử dụng trên trang web và JPG cho ảnh của tôi không? Tôi có nên làm mọi thứ PNG không?

---

Duplicate chính xác:

• PNG vs. GIF vs. JPEG vs. SVG - When best to use?
• Website Image Formats: Choosing the right format for the right task.
• Which format for small website images? GIF or PNG?

Answer 1

PNG nên được sử dụng khi:

• Bạn cần minh bạch (hoặc 1-bit hoặc alpha minh bạch)
• Lossless nén sẽ làm việc tốt (ví dụ như đối với một biểu đồ hoặc biểu tượng, hoặc máy tính tạo ra hình ảnh)

JPEG nên được sử dụng khi:

• Lossless nén sẽ không hoạt động tốt (ví dụ như một bức ảnh)

GIF nên khi:

• PNG không có sẵn, chẳng hạn như trên phần mềm rất cũ hoặc các trình duyệt
• Hoạt ảnh là cần thiết

Mặc dù có điều gì đó ngược lại, PNG hoạt động tốt hơn GIF ở hầu hết các khía cạnh. PNG có khả năng xử lý mọi chế độ hình ảnh của GIF ngoài hoạt ảnh và khi sử dụng cùng một chế độ hình ảnh, PNG sẽ nén tốt hơn nhờ thuật toán DEFLATE cao cấp so với LZW. PNG cũng có khả năng bổ sung các chế độ mà GIF không thể thực hiện, như màu 24 bit và độ trong suốt của alpha, nhưng đây là nơi bạn cần cẩn thận: nếu bạn quên chuyển sang chế độ bảng màu, ảnh PNG của bạn có thể được lưu ở màu 24 bit sẽ chiếm nhiều không gian hơn.

chế độ PNG bao gồm (điều này chỉ là một nhóm nhỏ)

• màu Palette từ 2 đến 256 màu (như GIF)
• Palette màu từ 2 đến 256 màu, với màu sắc trong suốt (như GIF)
• True color (24 bit màu)
• True color với kênh alpha (24 bit màu + 8 bit alpha minh bạch)

Đối với b est nén trong PNG cho web, sử dụng chế độ bảng màu. Nếu bạn tìm thấy tệp PNG lớn hơn các tệp GIF tương đương, thì bạn sẽ lưu PNG ở màu 24 bit và GIF ở chế độ bảng (vì GIF luôn ở chế độ bảng màu). Trước tiên, hãy thử chuyển sang chế độ bảng màu.

PNG cũng có các chế độ khác như màu bảng màu có độ trong suốt alpha. Các chế độ như thế này không thể được tạo ra trong Photoshop, nhưng các ứng dụng khác có thể tạo chúng.

Chỉnh sửa năm 2013: Đã xóa một loạt nội dung về tính tương thích của IE6.

Answer 2

GIF là tốt nhất cho hình ảnh với nhiều màu sắc rắn - JPEG cho hình ảnh với rất nhiều màu vari ance (EDIT: cảm ơn, cletus). PNG là một định dạng mới hơn và thường tốt hơn so với JPEG của GIF - đặc biệt là cho ảnh chụp màn hình.

Xem http://www.ou.edu/class/digitalmedia/articles/CompressionMethods_Gif_Jpeg_PNG.html

Answer 3

phong cách XKCD dải truyện tranh giải thích nó:

http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/

Answer 4

Sử dụng JPG cho các bức ảnh và PNG cho tất cả mọi thứ ngoại trừ hình ảnh. GIF không thực sự là một định dạng rất tốt và PNG có thể thay thế hoàn toàn về nén và chất lượng cho hầu hết các ứng dụng, nhưng đôi khi có vấn đề về tính tương thích, không chắc chắn liệu chúng có được tạo ra trong tất cả các trình duyệt web hiện tại hay không. GIF có thể được đọc bởi tất cả mọi thứ về cơ bản, vì vậy đó là khi nó rất hữu ích.

Answer 5

Nói chung, jpeg phù hợp hơn cho ảnh, trong khi gif thì tốt hơn cho các đối tượng đồ họa, như nút hoặc chữ được hiển thị. png là tốt trong cả hai liên quan, nhưng cuộc thảo luận có xu hướng để có được một chút tôn giáo bởi vì có lệ phí giấy phép để trả tiền nếu bạn phát triển một programm đọc/viết gif hoặc jpeg, trong khi png là miễn phí.

Sự khác biệt chủ yếu ở dạng nén, gif nhận được kích thước tệp nhỏ hơn cho các nút, jpeg cho ảnh.

Lời khuyên tốt nhất của tôi là để chơi xung quanh với các optioopns nén khác nhau được cung cấp bởi tất cả ba định dạng và xem cho chính mình mà bạn muốn sử dụng cho mục đích nào.

Ồ và vì điều này chủ yếu là về kích thước tệp: Xem bạn có thể kiểm tra trang chủ của mình từ máy tính có kết nối băng thông thấp hay không. Bằng cách đó bạn sẽ có cảm giác nếu bạn cần phải lo lắng về việc nén ;-)

Answer 6

Đối với các nút, biểu tượng, biểu tượng sử dụng PNG. Chỉ sử dụng GIF nếu bạn cần hình ảnh động nhỏ.

PNG có thể làm tất cả những gì GIF có thể (trừ hoạt ảnh, và thậm chí là đến trong APNG), và hầu như luôn luôn sẽ nhỏ hơn. Nếu PNG không nhỏ hơn GIF, thì phần mềm của bạn có thể tiết kiệm kém hơn - hãy tìm các phần mềm tối ưu hóa PNG, như PNGOUT và pngnq.

Answer 7

Trước đây, GIF ở đây trước tiên, sau đó là JPG, sau đó là PNG.

GIF rất hiệu quả đối với hình ảnh có diện tích lớn cùng màu (ví dụ: nền trắng), vì mã hóa RLL nén tốt. Tuy nhiên, GIF là công nghệ được cấp bằng sáng chế (Unisys) và ngày càng ít được sử dụng hơn. Độ sâu màu được giới hạn ở 256 màu (tôi nghĩ).

JPG và PNG hoạt động tốt cho hầu hết các ứng dụng, nhưng các tệp sẽ lớn hơn GIF cho đồ họa rất đơn giản. GIF có thể xử lý tính minh bạch và hoạt ảnh.

Chỉnh sửa: Bạn nói đúng - bằng sáng chế đã hết hạn vào ngày 1 tháng 10 năm 2006.

Answer 8

Phụ thuộc vào những gì bạn muốn tạo. Thông thường, đối với đồ họa web của bạn, đi với PNG. Đối với ảnh, JPG là tốt. PNG 24 bit hỗ trợ alpha transpancy, vì vậy nếu bạn muốn sử dụng độ trong suốt "màu sắc trung thực" thì đó là lựa chọn duy nhất của bạn thực sự. PNG 8 bit tốt hơn và nhỏ hơn GIF và cũng có khá nhiều cài đặt minh bạch giống như GIF (bảng màu được lập chỉ mục) nên không có lý do gì để sử dụng GIF nữa (trừ khi bạn đang tạo ... ?). Hãy nhớ định dạng PNG là nén không mất dữ liệu, vì vậy sẽ đẹp hơn khi xem JPG nén. Một điều cần lưu ý là việc hỗ trợ PNG trong Internet Explorer 6 trở xuống có thể là một nỗi đau, nhưng có nhiều cách giải quyết.

Answer 9

GIF - losless, nhỏ, nhưng giới hạn 256 màu, và có một sự minh bạch chút (trong suốt hay không)

JPEG - lớn hơn, không có giới hạn màu nhỏ, tổn hao. Tốt nhất cho ảnh.

PNG - không bị mất, minh bạch tốt hơn (kênh alpha), nhưng IE6 không hỗ trợ alpha chính xác, chỉ với các bản sửa lỗi đặc biệt (fix here).

Answer 10

Có vấn đề với GIF:

• Nó chỉ hỗ trợ lên đến 256 màu.
• Nó sử dụng thuật toán nén được cấp bằng sáng chế.

Nhưng nó có một lợi thế:

• Nó có thể được sử dụng để hiển thị một hình ảnh động

JPEG có thể có một tỷ lệ nén cao hơn PNG/GIF nhưng là lossy như phim hoạt hình ở trên thể hiện. Nó được sử dụng tốt nhất cho những hình ảnh mà các hiện vật nén không đáng chú ý, ví dụ như ảnh.

Kết hợp hình ảnh thành kết cấu và sử dụng CSS để giải nén chúng sẽ làm giảm kích thước một chút và giảm số lượng yêu cầu máy chủ.