There are a lot of things frontend developers are concerned about. Image management and optimization are part of them. Why is that so? Images are said to make up about 60% of the web, so as a Frontend developer you very likely to work with images.
Before I took a course on Responsive images, I did not care about which image format I used for my images. I mean, just give me anyone..lol :) Taking that course, however, practically changed my view of images and how they affect a webpage and why it is important to use the right image format at all times. This is because as a frontend developer, you shouldn't only be concerned with making your image appear well on a webpage, but you also want it to use the smallest file size possible without compromising quality, you want it to be responsive, you want it to load fast.
With different file formats available for images, we might face a crucial question at each point, which image format should I use? JPEG, PNG, SVG or GIF? Before we get an answer to that question, let's take a look at each of these file formats.
JPEG
JPEG or JPG is an acronym for Joint Photographic Expert Groups. This is a very common image format. It is a 24-bit image format which means that JPEG images can incorporate and display millions of colors - 16.8 million colors precisely. This makes them great for photographs and images with more than 256 colors.
JPEG stores data in a lossy format. Therefore, when compressed, they lose some of the image details to make the file smaller. This gives us the freedom to choose how much we compress a JPEG file. So it's usually great for making smaller file sizes. Be careful with the compression though, so that you don't get a compressed image that's very different from the original image.
The JPEG file format is not ideal for images with lots of lines and text as they tend to get jagged due to data loss after compression or when magnified. It does not also support transparency.
GIF
The Graphics Interchange Format (GIF) is an image format that has been around for a while. Unlike the JPEG, GIF supports only 256 colors. While this might sound like a lot of colors, it is actually very small as typical photographs usually have thousands of tones. These tones will be lost when the photographs are converted to the GIF format and thus, the GIF is not ideal for photographs or images with a lot of colors.
GIF can, however, be used for graphics with a low pixel to pixel variation like logos, icons, and flags. It is great for simple animations.
Unlike JPEG, GIF supports lossless compression i.e. compression done without any loss of data.
One major advantage of GIF is its ability to support transparency. This means that you can put a GIF over a colored background or a photograph and won't see any border around it. However, GIF transparency is not selective. If you make a color transparent, that color will be transparent in the entire image. For many years, GIF was the only image format to support transparency but now PNG and SVG can do the same.
PNG
The PNG(Portable Network Graphics) is an image format designed for the web. It takes the best parts of JPEG and GIF. It comes in two formats: PNG-8 and PNG-24. The major difference in the two formats is the number of colors it supports. While PNG-8 can display a maximum of 256 colors, the PNG-24 format can display millions of colors and is good for photographs.
Unlike the JPEG, it is a lossless file format. Therefore, it preserves its quality and details after compression. This leads to a larger file size. So it should only be used for an image when the quality of the image is more important than the file size.
PNG images support transparency better than the GIF. It also supports control of image brightness, color correction and two-dimensional interlacing which is a method of progressive display.
PNG images also support embedded text which can hold a short text description of the image’s content. This helps search engines to search for images based on the content of this embedded text.
PNG images cannot be animated. It is not supported by all web browsers.
SVG
The SVG(Scalable Vector Graphics) is a vector format. It is widely becoming popular because of the number of amazing things that can be done with it. SVG is written in XML-based markup, it is just like HTML for illustrations and it's quite different from other image formats we have talked about.
SVGs are very scalable. They are vectors and are drawn from mathematically declared shapes and curves and such, so pixels are no limitation, unlike the other formats that depend on pixels. They look the same no matter the screen size and level of magnification of screen. This makes then great for responsive design.
SVGs can be modified using CSS and JavaScript. So if you need an image that can be manipulated on the go, SVG is a great choice. They can also be animated using CSS animations and JavaScript.
SVGs typically have smaller file sizes. The size of an SVG file depends on how complex it is, not how large it is. So for simple images with few shapes and line like logos, an SVG will likely have a smaller file size than any raster counterpart(JPEG, PNG). But for complex images or graphics, it might not be so small and might not be a perfect choice.
SVG is best-suited to displaying logos, icons, maps, flags, charts, and other graphics that consists of lines and shapes. But for complex images like photographs that contain lots of lines and shapes, it might not be ideal. Though it looks beautiful on the web, it is not a format that we can use to save and upload images on the web.
Now that we have discussed all of these image formats, let's go back to our big question: which image format should I use? If you carefully read all of the above, you'll notice that no image format wins every time. There is no best image format. The image format you choose to use depends on the scenario and what you really want. Is it a photograph? Do you need a small file size? Do you need it to look good on all screens? Do you need an animation? Do you want to be able to modify it? Do you ... and the list goes on and on.
Just because I want you to make a right choice, here's a recap of key facts of each image format. I believe it can guide you in your choice.
JPEG
- Can display about 16.8 million colors
- Lossy Compression
- Cannot be animated
- Great for still images and photographs
GIF
- Can display 256 colors
- Lossless Compression
- Supports transparency
- Great for simple animations
- Good for graphics with flat colors and graphics without gradients
PNG
- PNG-8:Can display 256 colors
- PNG-24:Can display millions of colors
- Lossless Compression
- Better transparency than GIF
- Cannot be animated
- Good for icons;Can be used when an SVG format is not available
SVG
- Very scalable and great for responsive design
- Can be modified using CSS and JavaScript
- Smaller file size; depends on how complex the image is
- Can be animated
- Great for logos, icons, maps, flags, charts etc.
- Not so good for photographs
EXTRA
Hey, there's another image format becoming quite popular. It's the WebP format. You can read about it here.
Need more information on our main topic, here are some articles I found useful.
PNG, GIF, or JPEG? Which is the Best Image Format for Email?
GIF, PNG, JPG or SVG. Which One To Use?
Everything You Need To Know About SVG
Have any question or addition? Please leave a comment.
Thank you for reading.:)
Top comments (17)
Great overview. On dev.to we load different formats based on the situation and browser. Cloudinary handles a lot of the heavy lifting if our code is correct, which is really nice.
Because Chrome supports WebP and it's also our most popular browser in terms of traffic, most of our image traffic is served as WebP.
The subject is pretty poorly understood so this article goes a long long way.
Thanks Ben for sharing this. Cloudinary is great for image management. I'm amazed at what can be done with it. Thank you for reading. :)
Do you still use gif?
I really like SVG , they can be easily responsive, not just because "scalable" is in the name, they're good for performance and accessibility and when mixing it with JavaScript , we can do a lot of amazing things, I mean look at the projects with d3.js. I like PNG for the transparency wen I need it, and jpeg when I need to make the website faster , of course without loosing a remarkable losss of quality.
This is a cool article Sarah ,as always ♥
Thanks for sharing this. Others can learn from the way you use it. Thank you. :)
You can use archer-svgs to load svg async and cache it in localStorage, when you reuse svg without http request!Remove svgs from your js-bunilde and Thin your js-bundle forever!(eg: Dont reload 100kb svg bundle only for 1kb svg update!)
Thank you for the great post. I've never thought about it before, but after your post I am convinced that I will in the future. It was always like this for me: "Hmmmm.... What should I choose?... PNG or JPEG... Let it be PNG, WHO CARES!" :) Thanks.
I'm glad you like it😊😊
You can use archer-svgs to load svg async and cache it in localStorage, when you reuse svg without http request!Remove svgs from your js-bunilde and Thin your js-bundle forever!(eg: Dont reload 100kb svg bundle only for 1kb svg update!)
This is also beautiful website for free svg icon - custicon.com
10000+ free icons for use in web, iOS, Android, and desktop apps. Support for SVG. License: MIT, Free for commercial or personal use.
This provide svg icon and svg code and also provide the icon image and it should be free
Thanks for the article. Please, what's the name of the course you took on responsive images?
Sorry for my really late reply. It's a free course on Udacity called Responsive Images.
No worries, thanks.
This is great!
Thanks for this article! I didn't know much about the image types besides transparency. Bookmarked :)
I'm glad you like it😊😊
Great one Chima but "The PNG is an image format designed for the web..., It comes in two formats: PNG-8 and PNG-24"; what of PNG-32