PNG, GIF, JPEG, SVG의 다른 사용 사례는 무엇입니까?

PNG, GIF, JPEG, SVG의 다른 사용 사례는 무엇입니까?

---

웹 사이트 나 인터페이스 등을 구축 할 때 특정 이미지 파일 유형을 언제 사용해야합니까?

그들의 강점과 약점은 무엇입니까?

PNG와 GIF는 손실이없고 JPEG는 손실이 있다는 것을 알고 있습니다.
그러나 PNG와 GIF의 주요 차이점은 무엇입니까?
왜 내가 다른 것보다 하나를 선호해야합니까? SVG 란 무엇이며 언제 사용해야합니까?

모든 픽셀을 신경 쓰지 않는다면 JPEG가 "가장 가벼운"픽셀이기 때문에 항상 JPEG를 사용해야합니까?

---

몇 가지 핵심 요소를 알고 있어야합니다.

첫째, 두 가지 유형의 압축이 있습니다 : Lossless 및 Lossy .

• 무손실 은 이미지가 더 작아 지지만 품질에는 영향을주지 않음을 의미합니다.
• 손실 은 이미지가 (심지어) 더 작아 지지만 품질이 저하됨을 의미합니다. 이미지를 Lossy 형식으로 계속 저장하면 이미지 품질이 점점 더 나빠질 수 있습니다.

또한 다양한 색상 심도 (팔레트)가 있습니다. 인덱스 색상 및 직접 색상 .

• Indexed 는 이미지가 Color Map이라는 이름으로 작성자가 제어하는 ​​제한된 수의 색상 (일반적으로 256) 만 저장할 수 있음을 의미합니다.
• 직접 은 작성자가 직접 선택하지 않은 수천 가지 색상을 저장할 수 있음을 의미합니다.

---

BMP- 무손실 / 인덱싱 및 직접

이것은 오래된 형식입니다. 무손실 (저장시 이미지 데이터가 손실되지 않음)이지만 압축이 거의 또는 전혀 없습니다. 즉, BMP로 저장하면 파일 크기가 매우 커집니다. Indexed와 Direct의 팔레트를 모두 가질 수 있지만 작은 위로입니다. 파일 크기가 너무 커서 아무도 실제로이 형식을 사용하지 않습니다.

좋은 대상 : 정말 아무것도 없습니다. BMP가 뛰어나거나 다른 형식으로 더 잘 수행되지 않는 것은 없습니다.

---

GIF- 무손실 / 인덱싱 만

GIF는 무손실 압축을 사용합니다. 즉, 이미지를 반복해서 저장할 수 있고 데이터를 잃지 않습니다. 좋은 압축이 실제로 사용되기 때문에 파일 크기는 BMP보다 훨씬 작지만 인덱스 팔레트 만 저장할 수 있습니다. 이는 대부분의 사용 사례 에서 파일에 최대 256 개의 서로 다른 색상 만있을 수 있음을 의미 합니다. 그것은 아주 적은 양처럼 들립니다.

GIF 이미지는 애니메이션이 가능하고 투명도를 가질 수 있습니다.

적합한 대상 : 로고, 선 그리기 및 기타 작아야하는 간단한 이미지. 실제로 웹 사이트에만 사용됩니다.

---

JPEG- 손실 / 직접

JPEG 이미지는 사람의 눈으로 알아 채지 못하는 정보를 제거하여 세부적인 사진 이미지를 최대한 작게 만들도록 설계되었습니다. 결과적으로 손실 형식이며 동일한 파일을 반복해서 저장하면 시간이 지남에 따라 더 많은 데이터가 손실됩니다. 수천 가지 색상의 팔레트가있어 사진에 적합하지만 손실 압축은 로고와 선 그리기에 좋지 않음을 의미합니다. 이미지가 흐릿 해 보일뿐만 아니라 GIF에 비해 파일 크기도 더 커집니다!

좋은 대상 : 사진. 또한 그라디언트.

---

PNG-8- 무손실 / 인덱싱

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.

Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.

---

PNG-24 - Lossless / Direct

PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be bigger than JPEGs (for photos), and GIFs/PNG-8s (for logos and graphics), so you still need to consider if you really want to use one.

Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)

Just like PNG-8, PNG-24 supports alpha-transparency, too.

---

SVG - Lossless / Vector

A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a vector file format (the above are all raster). This means that it's actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.

For example:

This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes. It also means a small SVG logo can be used at a much larger (bigger) size without degradation in image quality -- something that would require a separate larger (in terms of filesize) file with raster formats.

SVG file sizes are often tiny, even if they're visually very large, which is great. It's worth bearing in mind, however, that it does depend on the complexity of the shapes used. SVGs require more computing power than raster images because mathematical calculations are involved in drawing the curves and lines. If your logo is especially complicated it could slow down a user's computer, and even have a very large file size. It's important that you simplify your vector shapes as much as possible.

Additionally, SVG files are written in XML, and so can be opened and edited in a text editor(!). This means its values can be manipulated on the fly. For example, you could use JavaScript to change the colour of an SVG icon on a website, much like you would some text (ie. no need for a second image), or even animate them.

In all, they are best for simple flat shapes like logos or graphs.

I hope that helps!

---

JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.

So basically here is a way to decide the image format:

• GIF if needs animation or transparency that works on IE6(note, PNG transparency works after IE6)
• JPEG if the image is a photograph.
• PNG if straight lines as in a comic or other drawing or if a wide color range is needed with transparency(and IE6 is not a factor)

And as commented, if you are unsure of what would qualify, try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best. I am only giving rules of thumb.

---

I usually go with PNG, as it seems to have a few advantages over GIF. There used to be patent restrictions on GIF, but those have expired.

GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression, which favors flat areas of uniform color with well defined edges (in contrast to JPEG, which favors smooth gradients and softer images).

GIFs can be used for small animations and low-resolution film clips.

In view of the general limitation on the GIF image palette to 256 colors, it is not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or the lossy JPEG, which is more suitable for compressing photographs.

The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors, but PNGs do not support animations. The MNG and APNG formats, both derived from PNG, support animations, but are not widely used.

---

JPEG will have poor quality around sharp edges etc. and for this reason it is unsuitable for most web graphics. It excels at photographs.

Compared to GIF, PNG offers better compression, larger pallette and more features, including transparency. And it is lossless.

---

GIF is limited to 256 colors and do not support real transparency. You should use PNG instead of GIF because it offers better compression and features. PNG is great for small and simple images like logos, icons, etc.

JPEG has better compression with complex images like photos.

---

png has a wider color pallete than gif and gif is properitary while png is not. gif can do animations, what normal-png cannot. png-transparency is only supported by browser roughly more recent than IE6, but there is a Javascript fix for that problem. Both support alpha transparency. In general I would say that you should use png for most webgraphics while using jpeg for photos, screenshots, or similiar because png compression does not work too good on thoose.

---

GIF based on a palette of 256 colours per image (at least in its basic incarnation). PNG can do "TrueColour", i.e. 16.7 Million colours out of the box. Lossless PNG compresses better than lossless GIFs. GIF can do "binary" transparency (0% opacity or 100% opacity). PNG can handle alpha transparencies.

All in all, if you don't need to use Alpha-transparent images and support IE6, PNG is probably the better choice when you need pixel-perfect images for vector illustrations and such. JPG is unbeatable for photographs.

---

There is a hack that can be done to use GIF images to show true color. One can prepare a GIF animation with 256 color paletted frames with 0 frame delay and set the animation to be shown only once. So, all frames could be shown at the same time. At the end, a true colored GIF image is rendered.

Many software is capable of prapaering such GIF images. However, the output file size is larger than a PNG file. It must be used if it is really necessary.

---

The main difference is GIF is patented and a bit more widely supported. PNG is an open specification and alpha transparency is not supported in IE6. Support was improved in IE7, but not completely fixed.

As far as file sizes go, GIF has a smaller default color pallet, so they tend to be smaller file sizes at first glance. PNG files have a larger default pallet, however you can shrink their color pallet so that, when you do, they result in a smaller file size than GIF. The issue again is that this feature isn't as supported in Internet Explorer.

Also, because PNGs can support alpha transparency, they're the only option if you want a variation of transparency other than binary transparency.

---

As of 2018, we have several new formats, better support for previous formats and some clever hacks of using videos instead of images.

For photographs

jpg - still the most widely supported image format.

webp - New format from google. Good potential, though browser support is not great.

For Icons and graphics

svg - whenever possible. It scales well in retina screens, editable in text editors and customisable via JS/CSS if loaded in DOM.

png - if it involves raster graphics (ie when created in photoshop). Supports transparency which is very essential in this use-case.

For Animations

svg - plus css animations for vector graphics. All advantages of svg + power of css animations.

gif - still the most widely supported animated image format.

mp4 - if animated images are actually short video clips. Twitter / Whatsapp converts gifs to mp4.

apng - decent browser support (i.e. no IE, Edge), but creating it is not as straightforward as gifs.

webp - close to using mp4. Poor support

This is a nice comparison of various animated image formats.

Finally, whichever be the format, make sure to optimize it - There are tools for each format (eg SVGO, Guetzli, OptiPNG etc) and can save considerable bandwidth.

---

GIF has 8 bit (256 color) palette where PNG as upto 24 bit color palette. So, PNG can support more color and of course the algorithm support compression

---

If you opt for JPEG, and you're dealing with images for a website, you may want to consider the Google Guetzli perceptual encoder, which is freely available. In my experience, for a fixed quality Guetzli produces smaller files than standard JPEG encoding libraries, while maintaining full compatibility with the JPEG standard (so your images will have the same compatibility as common JPEG images).

The only drawback is that Guetzli takes lot of time to encode.. but this is done only once, when you prepare the image for the website, while the benefits remains forever! Smaller images will take less time to download, so your website speed will increase in the everyday use.

참고 URL : https://stackoverflow.com/questions/2336522/what-are-the-different-usecases-of-png-vs-gif-vs-jpeg-vs-svg