DEV Community

JPEG, GIF, PNG OR SVG - Which should You use?

Sarah Chima on January 07, 2018

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 s...
Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
sarah_chima profile image
Sarah Chima

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. :)

Collapse
 
arj profile image
arj

Do you still use gif?

Collapse
 
belhassen07 profile image
Belhassen Chelbi

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 β™₯

Collapse
 
sarah_chima profile image
Sarah Chima

Thanks for sharing this. Others can learn from the way you use it. Thank you. :)

Collapse
 
shanamaid profile image
Jingyi Zeng

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!)

Collapse
 
dusan100janovic profile image
DuΕ‘an

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.

Collapse
 
sarah_chima profile image
Sarah Chima

I'm glad you like it😊😊

Collapse
 
shanamaid profile image
Jingyi Zeng

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!)

Collapse
 
nikrunic profile image
KRUNAL R PRAJAPATI

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

Image description

Collapse
 
peoray profile image
Emmanuel Raymond

Thanks for the article. Please, what's the name of the course you took on responsive images?

Collapse
 
sarah_chima profile image
Sarah Chima

Sorry for my really late reply. It's a free course on Udacity called Responsive Images.

Collapse
 
peoray profile image
Emmanuel Raymond

No worries, thanks.

Collapse
 
hybrid_alex profile image
Alex Carpenter

This is great!

Collapse
 
morinoko profile image
Felice Forby

Thanks for this article! I didn't know much about the image types besides transparency. Bookmarked :)

Collapse
 
sarah_chima profile image
Sarah Chima

I'm glad you like it😊😊

Collapse
 
aalabi profile image
aalabi

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