Những định dạng đồ họa web để sử dụng?

Các trang web có thể chứa đồ họa định dạng JPEG, GIF, PNG, SVG. Những cái nào nên được sử dụng, và khi nào?

Khi nào nên sử dụng JPG

• hình ảnh chụp ảnh
• khi nén không thành vấn đề

Khi nào nên sử dụng PNG

• khi bạn cần minh bạch
• khi bạn có khuôn mẫu (hình nền)

Khi nào nên sử dụng GIF

• khi bạn cần hoạt hình tương thích ngược *
• khi một hình ảnh chủ yếu chỉ bao gồm một số ít màu (2-16) **
• khi bạn không cần sự minh bạch và có khuôn mẫu (mặc dù png được ưa thích hơn)

_{* Với sự gia tăng của hoạt hình CSS như một tùy chọn khả thi cho gần như tất cả các trình duyệt, việc sử dụng định dạng .GIF ngày càng ít hơn định dạng chuyển sang hoạt hình web. .jpg, .pngvà .giftất cả có thể được đặt thành tính năng "hoạt hình" với việc sử dụng CSS. Mặc dù gifs hoạt hình có thể được sử dụng hấp dẫn trong thiết kế web trong một số trường hợp nhất định, ngoại lệ rất hiếm, vì vậy tốt nhất là chỉ nên tránh chúng.}

_{** ( .gifhình ảnh bị giới hạn chỉ 256 màu trong bảng màu của chúng.)}

(di chuyển từ câu hỏi trùng lặp)

Điều này hoàn toàn phụ thuộc vào loại hình ảnh bạn muốn lưu trữ.

• PNG là định dạng nén không mất dữ liệu phù hợp nhất với đồ họa bitmap "giống như vectơ" (nghĩa là đồ họa có diện tích lớn, thông thường có cùng màu và các cạnh được xác định rõ ràng; đồ họa chứa văn bản rõ ràng).

• SVG là một định dạng vector , phù hợp nhất để chứa đồ họa vector (nói ngắn gọn là các bộ sưu tập các yếu tố hình học thay vì các bộ sưu tập pixel). SVG có khả năng mở rộng vô hạn, trong khi đồ họa bitmap mất chất lượng khi được phóng to.

• JPG là một định dạng nén mất dữ liệu (trong số những thứ khác, nó loại bỏ các sắc thái trong hình ảnh vô hình với mắt người để tiết kiệm không gian lưu trữ). Nó là phù hợp nhất cho hình ảnh; do phương pháp nén của nó, nó không phù hợp cho hình minh họa vector hoặc văn bản.

Tính tương thích của trình duyệt web:

• Đồ họa PNG được hỗ trợ trên các trình duyệt, ngoại trừ IE 6 nếu PNG chứa độ trong suốt alpha (các phần trong suốt sẽ được hiển thị dưới dạng màu xám) và tất cả các phiên bản IE nếu PNG nằm trong phần tử HTML có độ mờ nhỏ hơn 100 % (nhưng đó là trường hợp cạnh).

• SVG không phải lúc nào cũng là một tùy chọn vì hỗ trợ trình duyệt không phải là 100% vào lúc này . Cũng có thể có những khác biệt về hành vi đối với một <img>thẻ thông thường . Chỉ sử dụng cái này nếu bạn biết bạn đang làm gì.

• JPG tiêu chuẩn được hỗ trợ trên tất cả các trình duyệt miễn là được lưu ở chế độ RGB thay vì CMYK (nếu chương trình của bạn không tạo ra sự khác biệt, có lẽ đó là mặc định).

Bạn nên chú ý đến một vài yếu tố chính ...

Đầu tiên, có hai loại nén: Mất mát và Mất mát .

• Lossless có nghĩa là hình ảnh được làm nhỏ hơn, nhưng không ảnh hưởng đến chất lượng.
• Mất mát có nghĩa là hình ảnh được làm cho (thậm chí) nhỏ hơn, nhưng có hại cho chất lượng. Nếu bạn đã lưu hình ảnh ở định dạng Mất nhiều lần, chất lượng hình ảnh sẽ ngày càng tệ hơn.

Ngoài ra còn có các độ sâu màu khác nhau (bảng màu): Màu được lập chỉ mục và Màu trực tiếp .

• Được lập chỉ mục có nghĩa là hình ảnh chỉ có thể lưu trữ một số lượng màu giới hạn (thường là 256), do tác giả kiểm soát, trong một thứ gọi là Bản đồ màu
• Trực tiếp có nghĩa là bạn có thể lưu trữ hàng ngàn màu mà chưa được tác giả chọn trực tiếp

BMP - Lossless / Indexed và Direct

Đây là một định dạng cũ. Đó là lossless (không có dữ liệu hình ảnh nào bị mất khi lưu) nhưng cũng không có chút nén nào, nghĩa là tiết kiệm vì BMP dẫn đến kích thước tệp RẤT lớn. Nó có thể có các bảng màu của cả Index và Direct, nhưng đó là một sự an ủi nhỏ. Kích thước tệp quá lớn không cần thiết đến nỗi không ai thực sự sử dụng định dạng này.

Tốt cho: Không có gì thực sự. Không có bất cứ điều gì BMP vượt trội, hoặc không được thực hiện tốt hơn bởi các định dạng khác.

GIF - Chỉ mất / Chỉ mục

GIF sử dụng nén không mất dữ liệu, nghĩa là bạn có thể lưu hình ảnh nhiều lần và không bao giờ mất bất kỳ dữ liệu nào. Kích thước tệp nhỏ hơn nhiều so với BMP, vì thực sự sử dụng nén tốt, nhưng nó chỉ có thể lưu trữ một bảng Chỉ mục. Điều này có nghĩa là đối với hầu hết các trường hợp sử dụng , chỉ có thể có tối đa 256 màu khác nhau trong tệp. Nghe có vẻ như một lượng khá nhỏ, và nó là.

Hình ảnh GIF cũng có thể được hoạt hình và có tính minh bạch.

Tốt cho: Logo, bản vẽ đường và các hình ảnh đơn giản khác cần phải nhỏ. Chỉ thực sự được sử dụng cho các trang web.

JPEG - Mất / Trực tiếp

Hình ảnh JPEG được thiết kế để làm cho hình ảnh chụp chi tiết càng nhỏ càng tốt bằng cách xóa thông tin mà mắt người sẽ không nhận thấy. Kết quả là định dạng Mất dữ liệu và việc lưu cùng một tệp nhiều lần sẽ dẫn đến việc mất nhiều dữ liệu hơn theo thời gian. Nó có một bảng màu gồm hàng ngàn màu và rất tuyệt cho các bức ảnh, nhưng việc nén mất dữ liệu có nghĩa là nó không tốt cho logo và hình vẽ đường kẻ: Không chỉ chúng trông mờ, mà những hình ảnh như vậy cũng sẽ có kích thước tệp lớn hơn so với GIF!

Tốt cho: Hình ảnh. Ngoài ra, độ dốc.

PNG-8 - Không mất dữ liệu / Được lập chỉ mục

PNG là định dạng mới hơn và PNG-8 (phiên bản được lập chỉ mục của PNG) thực sự là một sự thay thế tốt cho GIF. Tuy nhiên, thật đáng buồn, nó có một vài nhược điểm: Thứ nhất, nó không thể hỗ trợ hoạt hình như GIF có thể (cũng có thể, nhưng chỉ Firefox dường như hỗ trợ nó, không giống như hoạt hình GIF được hỗ trợ bởi mọi trình duyệt). Thứ hai, nó có một số vấn đề hỗ trợ với các trình duyệt cũ hơn như IE6. Thứ ba, phần mềm quan trọng như Photoshop có định dạng rất kém. (Chết tiệt, Adobe!) PNG-8 chỉ có thể lưu trữ 256 màu, như GIF.

Tốt cho: Điều chính mà PNG-8 làm tốt hơn GIF là có hỗ trợ Alpha Trans minh bạch.

Lưu ý quan trọng: Photoshop cuối cùng đã thêm hỗ trợ cho độ trong suốt alpha trong các phiên bản mới nhất của họ. Nếu bạn có một cái cũ hơn, có nhiều cách để chuyển đổi các tệp Photoshop PNG-24 thành PNG-8 trong khi vẫn giữ được độ trong suốt của chúng. Một phương pháp là PNGQuant , một phương pháp khác là lưu các tệp của bạn bằng Pháo hoa .

PNG-24 - Không mất dữ liệu / Trực tiếp

PNG-24 là một định dạng tuyệt vời kết hợp mã hóa lossless với màu Direct (hàng nghìn màu, giống như JPEG). Nó rất giống với BMP về vấn đề đó, ngoại trừ việc PNG thực sự nén hình ảnh, do đó, nó dẫn đến các tệp nhỏ hơn nhiều. Thật không may, các tệp PNG-24 vẫn sẽ lớn hơn nhiều so với JPEG, GIF và PNG-8, vì vậy bạn vẫn cần xem xét nếu bạn thực sự muốn sử dụng nó.

Mặc dù PNG-24 cho phép hàng ngàn màu trong khi nén, chúng không có ý định thay thế hình ảnh JPEG. Một bức ảnh được lưu dưới dạng PNG-24 có thể sẽ lớn hơn ít nhất 5 lần so với ảnh JPEG tương đương, với rất ít sự cải thiện về chất lượng hiển thị. (Tất nhiên, đây có thể là một kết quả mong muốn nếu bạn không quan tâm đến kích thước tệp và muốn có được hình ảnh chất lượng tốt nhất có thể.)

Giống như PNG-8, PNG-24 cũng hỗ trợ độ trong suốt alpha.

SVG - Tổn thất / Vector

Một loại tệp hiện đang phát triển phổ biến là SVG, khác với tất cả các loại ở trên, đó là định dạng tệp vectơ (ở trên đều là raster ). Điều này có nghĩa là nó thực sự bao gồm các đường và đường cong thay vì pixel. Khi bạn phóng to hình ảnh vector, bạn vẫn thấy một đường cong hoặc đường thẳng. Khi bạn phóng to hình ảnh raster, bạn sẽ thấy pixel.

Ví dụ:

Điều này có nghĩa là SVG hoàn hảo cho các logo và biểu tượng bạn muốn giữ lại độ sắc nét trên màn hình Retina hoặc ở các kích cỡ khác nhau.

Ngoài ra, các tệp SVG được viết bằng XML và do đó, có thể được mở và chỉnh sửa trong trình soạn thảo văn bản, để có thể thao tác nhanh chóng nếu bạn muốn. Ví dụ: bạn có thể sử dụng JavaScript để thay đổi màu sắc của biểu tượng SVG trên trang web giống như bạn muốn một số văn bản (nghĩa là không cần hình ảnh thứ hai).

Tôi hy vọng điều đó sẽ giúp!

JPG:

Ưu điểm:

• Rất nhiều mức nén khác nhau có sẵn
• Dễ dàng thao tác với tất cả các trình chỉnh sửa hình ảnh

Người dùng:

• Cổ vật nén

Sử dụng:

• Ảnh lớn hoặc hình ảnh có nhiều màu sắc
• Khi cần nén cao

PNG:

Ưu điểm:

• Minh bạch với alpha!
• Nhiều màu sắc
• Có thể thay thế jpg

Người dùng:

• Nén ít hơn JPG (nhưng không nhiều)
• Không tương thích với IE6 (và 7 tôi tin) - phải sử dụng bản vá hoặc hack cho việc này. Nhưng, ai quan tâm? A phải sử dụng;)

Sử dụng:

• Hình ảnh / hình ảnh nhỏ hoặc trung bình với nhiều màu sắc
• Phải sử dụng nếu bạn muốn độ trong suốt của gradient
• Biểu tượng
• Biểu trưng

ẢNH ĐỘNG :

Ưu điểm:

• Có thể là hoạt hình
• Rất nhẹ nếu bạn chỉ sử dụng một số màu (như 8 - 16 hoặc 32 màu khác nhau)
• Minh bạch

Người dùng:

• Không thể có hơn 255 màu.
• Gif hoạt hình có thể làm cho mọi người chạy trốn
• Không có alpha cho độ trong suốt (nó trong suốt hay không!)

Sử dụng:

• Ảnh động (Tôi sử dụng chúng chủ yếu trong các bản tin)
• Biểu tượng
• Favicon hoạt hình \ o /
• Biểu trưng

Các trang web có thể chứa đồ họa định dạng JPEG, GIF, PNG, SVG. Những cái nào nên được sử dụng, và khi nào?

Đối với hình ảnh:

JPEG nếu không cần minh bạch. PNG cho đồ họa ảnh cần minh bạch.

Mặc dù không đúng 100% nhưng đó là một quy tắc tốt. Kiểm tra các câu trả lời khác cho câu hỏi này để tìm hiểu thêm về các định dạng khác. Ngoài ra, hãy xem định dạng hình ảnh raster nào tốt hơn để hiển thị hình ảnh kỹ thuật số khi không có độ trong suốt; JPEG hay PNG? và một lựa chọn các thẻ định dạng tệp của chúng tôi , chẳng hạn như jpeg , png , gif & svg để tìm hiểu thêm.

Đối với đồ họa:

SVG với dự phòng PNG / JPEG.

Hoàn toàn không có lý do để không cung cấp SVG trong thời đại ngày nay. Chúng được thực hiện theo cách gần như chính xác như bất kỳ hình ảnh bình thường nào, và linh hoạt hơn nhiều.

Vì vậy, quy trình làm việc cho bất kỳ nhà thiết kế trang web hiện đại nào đã không được thay đổi hoàn toàn, nó đã được cập nhật. Bạn vẫn chuẩn bị và phục vụ PNG và JPEG cho đồ họa, nhưng chúng chỉ là dự phòng khi SVG không hoạt động.

SVG là gì?

SVG là viết tắt của Scalable Vector Graphic. Không cần quá kỹ thuật, sự khác biệt giữa các SVG và các định dạng dựa trên pixel khác, là dữ liệu cho bố cục của đồ họa được lưu trữ dưới dạng các phép tính toán học. Khi một trình duyệt mở một SVG, nó phải thực hiện các tính toán để kết xuất SVG. Các trình duyệt cũ hơn không có chức năng thực hiện các tính toán này hoặc xử lý các SVG, hơn nữa, các máy tính cũ hơn có thể đã vật lộn để hiển thị một trang web nặng SVG ngay cả khi chúng có thể được sử dụng 10 năm trước (mà chúng không thể sử dụng). Dữ liệu cho một SVG được lưu trữ ở định dạng thập lục phân (cơ sở-16), cho phép nó được tối ưu hóa ở kích thước tệp rất nhỏ so với lưu trữ nhị phân của dữ liệu pixel.

Dưới đây là một số tài nguyên để tìm hiểu thêm về cách đạt được kỹ thuật dự phòng:

1. Nắm vững sử dụng SVG cho web võng mạc, dự phòng với tập lệnh PNG

2. Xem lại quy trình làm việc của SVG để thực hiện và phát triển lũy tiến với các URI dữ liệu trong suốt

3. Thủ thuật CSS - Dự phòng SVG

Đoạn mã JavaScript sau, được sao chép từ liên kết đầu tiên, là tất cả những gì bạn cần để phát hiện hỗ trợ SVG trong hầu hết, nếu không phải tất cả các trình duyệt và thay đổi tên tệp để cung cấp dự phòng PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Khi nào nên sử dụng SVG

• Bất cứ khi nào bạn có thể như kích thước tệp và độ phân giải tệp nhỏ nhất thường có nghĩa là nó có thể xử lý bất kỳ tỷ lệ pixel thiết bị nào (ví dụ như màn hình võng mạc)
• Khi nghệ thuật của bạn phù hợp với các định dạng tệp vector (đặc biệt là các biểu tượng)
• Khi bạn có sự sang trọng chỉ phải nhắm mục tiêu các trình duyệt hiện đại (hỗ trợ SVG tương đối mới đối với một số trình duyệt)

Khi nào nên sử dụng phông chữ biểu tượng

• Khi bạn cần một bộ biểu tượng phong phú
• Khi, giống như SVG, bạn muốn lợi ích của các định dạng tệp vectơ
• Khi bạn có sự sang trọng chỉ phải nhắm mục tiêu các trình duyệt hiện đại (hỗ trợ phông chữ web là tương đối mới đối với một số trình duyệt)

</DA01>

Tại sao SVG là lựa chọn tốt nhất?

• Chia tỷ lệ đẹp đến bất kỳ kích thước nào từ một tệp (không cần phục vụ @2x.jpgcho màn hình võng mạc hoặc kéo dài đồ họa)

• Kích thước tệp thường rất nhỏ hơn JPEG và PNG

• Hầu như không bao giờ phải hy sinh chất lượng trong logo

• Làm cho thiết kế đáp ứng dễ dàng hơn theo nhiều cách

Ghi chú

• Hỗ trợ ít phổ biến hơn đối với các SVG nội tuyến, vì vậy để an toàn, tốt nhất là liên kết với các tệp thông qua các thẻ hình ảnh tại thời điểm này. (Nếu bạn định sử dụng lại đồ họa ở bất kỳ nơi nào khác, ví dụ như các biểu tượng điều hướng, bạn muốn liên kết với bên ngoài bằng mọi cách để trình duyệt lưu trữ nó và tiết kiệm thời gian tải các trang khác.)

• IE không hỗ trợ SVGZ, định dạng nén có sẵn cho đồ họa SVG. Để có khả năng tương thích cao nhất trên các trình duyệt và các phiên bản trước đây, tốt nhất nên sử dụng SVG 1.0tại thời điểm này.

• Bạn vẫn có thể tạo các tấm sprite với SVG theo cách tương tự như với các định dạng hình ảnh khác, nhưng thay vì sử dụng các giá trị pixel thực tế để xác định tọa độ x và y của mỗi hình ảnh, hãy sử dụng các giá trị dựa trên tỷ lệ phần trăm.

  Còn những trường hợp đó khi giá trị phần trăm không đủ chính xác thì sao?

  Bạn nên xây dựng bảng sprite với mục tiêu có thể chia cả chiều rộng và chiều cao cho 100 và đạt được toàn bộ số hoặc số có tối đa 1 chữ số thập phân. Ví dụ: nếu bạn sắp xếp 7 10px x 10pxbiểu tượng x với nhau trong một bảng sprite, đừng tạo một khung vẽ 70px x 10px.

  Tại sao? Bởi vì khi bạn chia 100 cho 7, bạn nhận được 14.285714285714285714285714285714, với tỷ lệ phần trăm được làm tròn, chắc chắn sẽ gây ra một số phép toán không hoàn hảo ở đâu đó.

  Thay vào đó, hãy tạo một 80px x 10pxkhung vẽ và đừng lo lắng về 12,5% trống. Các biểu tượng sẽ ở mức tăng chính xác 12,5%, mà, không cần phải nói, dễ dàng hơn để làm việc với.

Bạn nên sử dụng .jpeg cho ảnh hoặc hình ảnh có nhiều màu. Loại tệp .gif hữu ích cho hình ảnh hoạt hình hoặc khi cần độ trong suốt, nhưng nó đang giảm sử dụng. Định dạng phổ biến nhất là .png, cũng có thể cung cấp độ trong suốt alpha và dải màu lớn hơn loại tệp .gif. Để biết tổng quan chi tiết hơn, hãy xem bài viết của Jonathan Snook, Định dạng hình ảnh nào là tốt nhất .

Một công thức hay có thể là sử dụng JPEG cho ảnh và PNG cho mọi thứ khác.

Tất nhiên, nếu bạn có đồ họa không cần độ trong suốt alpha và có ít hơn 256 màu, GIF có thể giúp bạn tiết kiệm một phần băng thông nhưng chắc chắn nó đang trên đường ra.

Tôi sử dụng PNG cho hầu hết mọi thứ, vì nó không có các tạo tác nén mà JEPG làm, và nó tương thích với mọi người ngày nay (tôi đã thấy một vài trình soạn thảo trang web không phù hợp với nó, chẳng hạn như phiên bản máy tính để bàn của phần mềm SiteBuilder của Homestead, nhưng đó là về nó).

Bạn nên chọn hình ảnh của bạn trong cơ sở ở mức độ nén / chất lượng bạn muốn đạt được.

Web là tất cả về tốc độ tải xuống thông tin và nhỏ hơn là kích thước của hình ảnh, tốt hơn là tốc độ tải trang.

JPG : Dành cho hình ảnh có hàng triệu màu (chụp ảnh)

PNG và GIF : Để minh bạch và ít màu sắc. Tôi chỉ sử dụng dưới 64/128 màu khác nhau, nhưng nói chung là dưới 256. (biểu tượng, hình ảnh vector cần phải raster, màu tương phản cao, độ dốc với ít màu)

Làm cách nào để chọn giữa PNG và GIF?

Trước hết Kiểm tra tối ưu hóa nén / chất lượng và chọn người mang lại cho bạn kết quả tốt hơn để giảm cân. Tôi vẫn sử dụng GIF rộng rãi và đôi khi nó tốt hơn PNG cho cùng một loại hình ảnh. Không phân biệt định dạng này cho định dạng khác, chỉ cần kiểm tra định dạng phù hợp hơn với tối ưu hóa của bạn.

• Chọn GIF: cho hình ảnh hoạt hình không quá 256 màu
• Nếu bạn không cần hoạt hình, bạn có thể chọn PNG. Chọn PNG đúng: Có 2 loại 8 bit và 24 bit. 8bit nó có xu hướng là một phiên bản GIF tốt hơn mà không có hình ảnh động cho chất lượng / nén (nhưng như tôi đã nói không phải lúc nào cũng vậy, hãy kiểm tra nó khi bạn Lưu cho Web). 24bit không có nén (vì vậy hiếm khi sử dụng nó cho một số hiệu ứng đồ họa đặc biệt) và có bản alpha để sử dụng độ trong suốt của màu (Các trình duyệt IE cũ không hỗ trợ điều này, nếu bạn không áp dụng bộ lọc đặc biệt hoặc hành vi .htc cho trang ).

Tôi có thể thấy từ các bài viết khác nhau, 90% các nhà thiết kế web vẫn nghĩ rằng PNG chỉ là định dạng lossless . Nhiều chuyên gia thậm chí không biết về sự tồn tại của PNG-8.

Nhưng rõ ràng PNG-8 là thứ họ nên sử dụng cho web, thay vì PNG-32. Bởi vì nó cung cấp kích thước tệp nhỏ hơn 2x-5x với chất lượng chấp nhận được.

Đôi khi thật khó để quyết định nén nào tốt hơn cho ảnh. Ví dụ: nếu đó không phải là ảnh, nhưng có nhiều màu và độ dốc. Công cụ đó cho phép so sánh cả hai định dạng mất trực quan và chọn biến thể tốt nhất.

Đây là một công cụ tuyệt vời để so sánh các định dạng PNG và JPEG bị mất: PNG và JPEG

Các định dạng đồ họa Web chính là GIF, JPG và PNG. Điều quan trọng là phải biết sự khác biệt và chọn định dạng tốt nhất cho mỗi hình ảnh, để hình ảnh trông đẹp và nhỏ gọn nhất có thể để chúng xuất hiện nhanh trên màn hình của khách truy cập trang web của bạn.

GIF - Định dạng thông tin đồ họa

Định dạng đồ họa GIF là tốt nhất cho hình ảnh chỉ có một vài màu: biểu đồ, đồ thị hoặc văn bản được đặt làm đồ họa. Bạn càng sử dụng ít màu sắc, các tệp GIF càng hiệu quả. Tệp GIF ...

• có thể chứa tối đa 256 màu.

• hỗ trợ một tính năng gọi là độ trong suốt, trong đó một màu trong số 256 màu được đặt thành trong suốt. Điều này giữ cho đồ họa của bạn trông như thể chúng ở trong hộp, vì nền của tệp là vô hình, cho phép nền của trang Web hiển thị.

• có thể là hoạt hình. Bên trong một tập tin được lưu trữ nhiều khung hình và một chỉ mục cho biết mỗi khung hình sẽ được hiển thị trong bao lâu. GIF hoạt hình được coi là một tệp hình ảnh tiêu chuẩn, do đó, nó được tải với thẻ tiêu chuẩn.

• không mất dữ liệu, điều đó có nghĩa là chất lượng hình ảnh không bị suy giảm do quá trình nén.

• có thể được đặt xen kẽ để chúng có vẻ mờ dần, từ chất lượng thấp hơn đến chất lượng cao hơn trong khi tải. Điều này cung cấp cho khách truy cập của bạn một cái gì đó để xem trong khi họ đang chờ đợi.

• không tốt cho ảnh - bạn mất chất lượng và các tệp sẽ không được nhỏ gọn. Sử dụng định dạng đồ họa JPG cho ảnh.

JPG - Nhóm chuyên gia chụp ảnh chung

Định dạng đồ họa JPG là tốt nhất cho hình ảnh có nhiều màu sắc, chẳng hạn như ảnh hoặc tác phẩm nghệ thuật được quét. Tệp JPG ...

• có thể chứa tới 16 triệu màu.

• hỗ trợ nén biến. Bạn có thể áp dụng nén nhiều hay ít cho từng ảnh riêng lẻ. Bạn càng nén, bạn càng mất chất lượng. Mặc dù kích thước tệp có thể được thực hiện khá nhỏ với định dạng đồ họa này, bạn thường phải thỏa hiệp giữa kích thước tệp và chất lượng hình ảnh. Phần mềm đồ họa mới hơn cung cấp cho bạn bản xem trước trước khi lưu - điều này cho phép bạn thử nghiệm nhiều mức độ nén khác nhau để chọn sự thỏa hiệp tốt nhất giữa chất lượng và kích thước tệp.

• có ba loại: đường cơ sở hoặc tiêu chuẩn, tối ưu hóa đường cơ sở hoặc tối ưu hóa tiêu chuẩn và tiến bộ. Đường cơ sở được thiết kế cho các trình duyệt mà chúng tôi coi là cổ xưa ngày nay (chẳng hạn như Internet Explorer phiên bản 1). Đường cơ sở được tối ưu hóa cung cấp khả năng nén nhiều hơn đường cơ sở tiêu chuẩn và thực tế mọi trình duyệt ngày nay đều có thể đọc được hình ảnh như vậy. Một JPG tiến bộ, giống như một tệp GIF xen kẽ, được xây dựng khi tải xuống, đi từ một hình ảnh thô sơ cho hình ảnh hoàn thiện của nó. Mặc dù đây là một định dạng đồ họa Web đẹp, nhưng các trình duyệt cũ hơn không hỗ trợ định dạng này.

• không tốt cho hình ảnh chỉ có một vài màu, chẳng hạn như văn bản được đặt thành đồ họa hoặc hình ảnh có các vùng màu phẳng. Nếu bạn sử dụng JPG cho các đồ họa này, chúng sẽ lớn hơn mức cần thiết và trông "lốm đốm".

PNG - Đồ họa mạng lũy ​​tiến

PNG là định dạng đồ họa Web mới nhất. Tệp PNG ...

• được hỗ trợ bởi tất cả các trình duyệt hiện đại. Các tệp này có thể không xuất hiện trong các trình duyệt cũ hơn, vì vậy sử dụng định dạng đồ họa này có thể khiến một số khách truy cập trang web của bạn không thể nhìn thấy hình ảnh của bạn.

• nhỏ gọn và linh hoạt và có thể kết hợp các tính năng tốt nhất của GIF và JPG, chẳng hạn như khả năng có nền trong suốt hoặc khả năng chứa hình ảnh với hàng triệu màu.

• vẫn chưa được sử dụng rộng rãi, chủ yếu là vì chúng không được hỗ trợ bởi các trình duyệt cũ hơn.

Khi nào nên sử dụng?

Chọn định dạng đồ họa Web phù hợp có thể đảm bảo rằng hình ảnh của bạn trông đẹp và xuất hiện nhanh chóng trên máy tính của khách truy cập. Chọn định dạng sai làm cho hình ảnh của bạn trông xấu và mất thời gian để tải xuống.

Lỗi đồ họa phổ biến nhất mà mọi người mắc phải trên Web là sử dụng sai định dạng đồ họa cho hình ảnh của họ. Nhưng sự lựa chọn thực sự khá đơn giản ...

• Nếu đồ họa của bạn có nhiều màu sắc (như ảnh), hãy chọn JPG.

• Nếu đồ họa của bạn có ít màu, hãy chọn GIF. Khi sử dụng GIF, hãy thử các bảng màu được tối ưu hóa chỉ chứa các màu được sử dụng - chúng có thể cắt giảm một nửa kích thước tệp.

Trong một thế giới lý tưởng, nó sẽ đi xuống này:

JPEG - Dành cho ảnh và ảnh raster

PNG - Đối với đồ họa vector (ví dụ: logo, v.v.)

Thật không may, Internet Explorer 6 (vẫn không may là một số lượng lớn người dùng) không hỗ trợ độ trong suốt trong hình ảnh PNG. Vì vậy, nếu PNG của bạn chứa độ trong suốt, nó có thể gặp sự cố. May mắn thay, có một hack có thể được sử dụng để bỏ qua vấn đề này, mặc dù không phải là một cách thanh lịch:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Ngoài ra, tôi nghĩ ngay cả IE 7 cũng có vấn đề với một số tính năng của PNG.)

GIF chỉ có hai lợi thế so với PNG:

1. (Hầu như) hỗ trợ trình duyệt hoàn hảo (mặc dù không có tính minh bạch, vì vậy đây không phải là phần thưởng nhiều)
2. Chúng có thể là hoạt hình, tuy nhiên đồ họa hoạt hình nên được sử dụng một cách tiết kiệm trong thiết kế web.

EDIT: PNG luôn thích hợp hơn GIF khi được hỗ trợ và sử dụng được, vì PNG là định dạng mở.

Như hầu hết đã chỉ ra, JPEG tốt cho chụp ảnh và PNG tốt cho đồ họa với văn bản và đồ thị. GIF có lợi thế duy nhất, đó là hỗ trợ hoạt hình, nên được sử dụng rất cẩn thận.

Một mẹo hay là, để xuất hình ảnh của bạn dưới dạng JPEG và PNG. Gần như luôn luôn định dạng tốt hơn cho kết quả đồ họa của bạn trong một tệp nhỏ hơn. Ảnh trở nên nhỏ hơn dưới dạng JPEG và đồ thị nhỏ hơn dưới dạng PNG. Vì vậy, nếu bạn không chắc chắn nên chọn cái nào, đó có thể là một người quyết định tốt.