JPG vs. PNG vs. GIF vs. SVG(uxdesign.cc) |
JPG vs. PNG vs. GIF vs. SVG(uxdesign.cc) |
A photograph that's not real big is probably still better suited for JPG. And there's no reason to use GIF for any still image - PNG will be superior in all situations. A moving image may be better off as an MP4 for modern browsers in terms of file size and quality, but there's no mention of that here.
For small icons with few colors, I find GIFs to be consistently smaller than PNGs.
For example, my website's favicon:
http://alexvh.me/favicon.gif 216 bytes
http://alexvh.me/favicon.png 1041 bytesEdit: I just tried it with your example:
% giftopnm favicon.gif | pnmtopng > favicon.png
pnmtopng: 5 colors found
% ls -l
-rw-r--r-- 1 jandrese jandrese 216 Aug 7 17:33 favicon.gif
-rw-r--r-- 1 jandrese jandrese 255 Aug 7 17:33 favicon.png
On the other hand, if you are loading enough small PNGs for this to make a difference, perhaps any performance issues that come up might be helped by switching from PNG to GIF.
Is it a vector image? -> Use .svg
Is it an illustration (bitmap) with transparency (i.e. a cutout of a man) -> Use .png
Is it animated? -> Use .mp4 and fallback to .gif
Is it a photo? -> Use .jpg and compress as much as possible
if an mp4 doesn't play, a webm probably won't play either.
you can do mp4 -> webm -> gif if needed, but that's extra encoding that probably isn't needed.
But just in general all of it needs to be redone when Webp is more widely used.
https://developers.google.com/speed/webp/
And in that case almost everything can be a webp - animations, transparency, lossy for compression or lossless if need be. You can still burn the bathroom selfies if you want. Except vector, you still want SVG for those.
Firefox 66.0.4 for Fedora
PNG are handled by Firefox since Firefox 1 or 2, over ten years ago.
This is clearly aimed at people who already know this. It's a joke.
It's a rather flexible format, even if you're only embedding it within an img element/via CSS (ie: disabling its other possible functionality like video/JS/interactivity, though this comes at the downside of requiring base64'ing the embedded images, offsetting the some of the filesize savings...).
One can also utilize CSS animations within them (or alternatively SMIL in any Blink or Gecko based browser), whether embedded as an object or image.
Is it a logo? No
Result: GIF
I can't even
I can imagine it a bit more useful and less cluttered by removing bathroom selfies. Yet I understand the viral element: Burn it with fire!
Yes: JPG
No: SVG
If you're uploading bitmap diagrams logos etc. they should be vector.
As noted in a thread comment elsewhere, under the hood our display rendering engines are already entirely or significantly vector engines, but what we appear to lack is an industry-wide representation scheme.
It might be apropriate in some cases at least.
As always we need to wait for Apple to get their shirt together.
You can even add media queries to the <source> tags to deliver different images based on the user's device.
There is literally no downside to using it.
https://www.macobserver.com/news/webp-comes-ios-10-macos-sie...
Step 1: Suggest GIF as an option.
Is it a photograph? No
Is it vector? Yes
For a Website? No
Does it have a gradient? No
Gif
Wat? Once you get to "Is it vector?" it should just point to SVG
(In this case, it just saves 3 bytes, but it can make a huge difference sometimes.)
So you'd want to do webm → mp4/h264 → gif.
(I agree this isn't worth the time to set up in most cases)
h.264 gives you good performance, hardware encoders/decoders, best compatibility. Most of the time just using it alone is the best value.
All that depends on how many videos you need to transcode though. If you just have a few, do all the main codecs.
This is the exact problem with developers building for the Web. You'd rather avoid a relatively small amount of additional complexity than build something that's better for users (loads faster, reduces bandwidth, renders quicker).
Even ignoring WebP, you really should be resampling the upload to the right size and running it through something like imagemin to optimize the file size. And there are APIs out there that will do it all for you - it's a post request at most if you don't want to set it up on a server.
