.SVG, .JPG, .PNG,... file extensions
Hello, can someone explain what's the deal with all the file extensions that exist please, Both a .JPG and .PNG are image file extension, what's the difference then? I know that transparency maybe the little quirk, for example (I think) SVGs have transparent background by default?
Would really appreciate if someone can elaborate on that and which extensions to use when uploading an image or a small favicon in our browser please.
45 Replies
They're different file formats. For images, jpg uses lossy compression based on describing the image as a series of gradients, png uses lossless compression and supports transparency. Ico files are pure and I think just bitmap images? Svg files are a vector format, which means they are infinitely zoom able without quality loss.
xkcd: Standards
Fortunately, the charging one has been solved now that we've all standardized on mini-USB. Or is it micro-USB? Shit.
ico images can also have png compression and multiple sizes
It's different tools for different purposes at the end of the day
Same as there's a hundred different types of hammer
and there's more:
- avif - uses the av1 video codec to render the image, limited to 2048x2048 images
- webp - google's format using vp8 (and vp9, i think) which supports lossy, lossless, opacity and animations
- gif - very old format (from 1987) that supports animations (max 50fps) and 1-bit opacity, but limited to 256 colors per image
- jpegxl - the latest iteration of the jpeg format, with support for many many things including hdr
And even that is just the common ones
yup
oh, and png is improving now, after over 20 years or so
now it supports hdr and apng is part of the spec
As for which to use... It Depends. Ico for favicons, though png is fine too. Webp for most large images. Svg for in-site icons and symbols.
But, most importantly, whichever format the image actually is. You can't just change the extension and assume it'll work
that's like putting a porche badge on a fiat, which won't change the fact that it is a fiat
each one has their use cases I guess? One question, for the transparency, I'm confused, I remember having watch a video which describes that, don't really remember, png supports backgroup transparency ? I think there is one file extension which doesn't, no? I forgot the video but it was on the shape that background images took I think (was surely one of kevin's video)
png supports 256 levels of transparency
yes, each has their use cases.
That XKCD comic is a good blanket answer for "why is there more than one" btw. It applies everywhere. Folks optimize for different things
yeah it's the same idea for frameworks
As a graphic designer the answer to which image format to use depends on many things.
JPG
pro: support millions of colors / photorealistic images
smaller file size than a PNG
con: does not support transparency
can not be animated
GIF
pro: supports transparency
can be animated
con only supports 256 colors
larger file size for images where it tries to represent more than 256 colors / dithering
PNG
pro: support millions of colors / photorealistic images
supports transparency
con can not be animated
larger file size than JPG / GIF
WebP
Pro supports millions of colors
supports transparency
supports animation
smaller file size than GIF / JPG or PNG.
Con may not work in older browsers
If the image is downloaded to the users computer, many operating systems are not setup to view webp files natively and they would need to download patches or software that could view them
webP may not work in some browsers as a favicon image format.
So, the answer is really what is the most important to you and your website users. If you only care about the website loading as quickly as possible I would say use webP files. If you want users to download and share the images in emails / Twitter than a legacy format like PNG or JPG might work better for making the image easy to access.
Not to make things more complicated, but there is an SVG image file as well. The difference for that is an SVG format is a vector based graphic file, while JPG, GIF, PNG and WebP are raster or pixel based graphic files. SVGs are great, but they have issues are well.
SVG
pro infinitely scalable without image degradation.
smaller file size than a pixel image of the same dimensions
cons
SVGs do not support millions of colors and do not have the complexity to make images look photo-realistic. Think of them as illustrations or logos where they represent an image, but are not meant to be exact represetations.
Like with WebP if the image was downloaded to the users computer it may be difficult to view the image without specific software that the user would need to install, like a PDF reader.
Hope this helps'
If I may tag on a bit as a digital illustrator:
PNG images may actually be smaller than a JPG if an image only has a few flat colors. JPG is typically always more efficient than PNG though when dealing with photos or things with many colors to them.
An additional con of JPG: it is lossy, meaning image quality degrades the more times you save the image, no matter what quality level you save your image as.
PNGs on the other hand are lossless.
There is actually a format for animated PNGs: the aPNG. It is not well supported and not many people know about it, but it exists. I wish there was more support for this format, really, GIFs kind of suck.
GIF images are actually capable of supporting more than 256 colors--it's not 256 colors per gif, it's 256 colors per frame. GIF images utilize a color table, and each frame can have its own unique color table (as well as it's own unique dimensions). If you're clever about it, you can use each frame of a GIF as an individual tile for a larger image, and then piece it back together--there's actually an example of this use on the wikipedia page for GIF images. I believe that was the original intent of the animated version of the format iirc, animation is just a side thing. Also there are two distinct GIF formats--GIF87a and GIF89a. 87 cannot be animated, while the newer 89 format can. They are otherwise very similar, although I don't think the 87 version of the format supports transparency, but I could be misremembering that.
Additionally, regarding a GIF: they do support transparency, but it's either on or off, there's no in between. You can't have a black pixel at 50% transparency on a green background and see a darker green through that pixel, it's just gonna be a black pixel (or a gray pixel if the matte is white). PNG, WebP, and aPNG won't have that issue.
All that said, and like others have already pointed out, the format you use depends entirely on context.
SVG is great for things like logos and simple little icons, and can actually have raster images embedded into them, and what's extra cool about them is if you embed them directly into your HTML you can manipulate what color things are with CSS. They're neat.
Additionally, regarding a GIF: they do support transparency, but it's either on or off, there's no in between. You can't have a black pixel at 50% transparency on a green background and see a darker green through that pixel, it's just gonna be a black pixel (or a gray pixel if the matte is white). PNG, WebP, and aPNG won't have that issue.in short, it has 1-bit opacity also, apng is part of the png 3.0 spec, which came out recently this, plus the
<use> of <symbol>s, allows you to use the same svg <symbol> multiple times in the document without repeating the same chunk of svg code
a pro of webp is that it has a lossless mode as well, which makes it a better png, but the cons of it are still a pain
also, don't forget avif and jpegxl
i think avif has better integration than webp
and jpegxl is still a dream 😭
GIF images are actually capable of supporting more than 256 colors--it's not 256 colors per gif, it's 256 colors per frame.oh, yeah, that is actually a cool technique! and with some dithering, you can present 16 million colors ... if you don't mind downloading a gif that's the size of a movie ... it's best to just use the dreadful webp or, as many websites do, use mp4 videos which have really good inter-frame compression and can be much much smaller
I wish webp had more support, it's absolutely stupid that if I want to save a webp for an image I made in Photoshop, I either have to open up Rebelle or Krita and do it there, or run the PHP script I made a while ago to do it in a big batch. There's probably a plugin I don't know about, but it should just be part of the software. webp is great.
most artists are the worst about saving their images properly so odds are if you're dealing with artwork you're going to end up with the world's least optimized image anyway, format be damned
AVIF is great, but i wont recommend my students use it until there is better general support in browsers....which will be like 3-4 years from now
there is already really good browser support
i think windows has better support for those than webp
or use squoosh.app, which you can use in offline mode as well
there you can finetune your image too
i have never heard of that, thank you!
i should show that some other artists i know, they might get use out of it
to prepare images for the web, it is fantastic
dont think it saves presets, but, thats another step
for websites like imgur, facebook, instagram and others, just a jpeg is fine
for your personal website, a preview and a good size image, in jpeg or webp or avif, is also easy to do
most of the artists I know seems to think a 10+mb jpeg is normal and even small, and it makes me feel like an insane person when i try to explain otherwise and their reason for disagreeing is, "I don't know how to make it smaller while retaining quality so I must be right," so this being so user friendly is absolutely great, thank you again
you're welcome
what do they do with those 10mb jpegs?
they just upload it to wherever and usually those sites handle it, but these are people who also talk about wanting to have their own websites so it's a good idea to learn how to actually save an image properly
by "wherever" i mean twitter or bluesky or what have you
that is not so bad
but to publish on their own website, that is absolutely a showstopper
yeah absolutely
nobody is downloading your 10mb monstruosity
exactly
no matter how pretty it is
unless ... it is a background image
the average person isn't going to notice it's a little crunchy or zoom all the way in to see the paper fibers
to put on the desktop
then a 4k jpeg would be a good idea
for viewing, 960px should be fine, and that is not 10mb
right yeah but even then you should put a button somewhere so that gets downloaded separately and not just have it be both your thumbnail and the primary image
exactly
"Why is my site so slow?" I look, all of their thumbnails are just their fullsize image but they're having CSS make it be thumbnail sized, I point it out, they pout,
🤣
what the fuck did they expect? a salad? a tv? the spanish inquisition?
it's shocking to me how many of these people are digital artists but they don't know anything about tech at all lol
or images
both, really
i had to teach a designer on how to resize an image with photoshop
i've met people who didn't understand that you can draw something at 1000x1000 and then shrink it when you're done so that it fits the 100x100 requirement
yup, but it sometimes loses fine details
god same, i don't get it lmao
that's true, but that's just how making something smaller works, you can't warp space to fit more pixels. no one looking will notice
yeah, but they want all the detail but tiny 🤣
they should just learn vector then (and then continue to be unhappy because of how that is lol)
🤣
vector is great, but it isnt always 100% consistent everywhere for everything
a jpeg is