DEV Community

Kaziu
Kaziu

Posted on

๐Ÿคจโ‰ How do you manage about picture file size in your company?

๐Ÿ’Ž I've engaged in frontend performance task

It was big .svg file (180kb), so I changed it to png file (45kb). Next.js Image component gets it even smaller in app.

and length and height was also unnecessary long(1180px / 550px), so I also changed it smaller

๐Ÿ’Ž But I thought like that

Performance gets better now, but absolutely this problem will repeat in the future because now image files put on server in this way

๐Ÿ‘ฉโ€๐ŸŽจ(designer) I've created new svg file, so nice hehe
๐Ÿ‘ฉโ€๐Ÿ’ป(engineer) thanks! put it on server!
Enter fullscreen mode Exit fullscreen mode

โ“ question

How do you manage about image size in your company?

I have three candidates

  1. educate about file size to designers, and they adjust file size (not to decrease image quality so much)

  2. engineer optimise file image size manually

  3. set some system in server to decrease image size automatically

it's better to create some system which image size decrease automatically somewhere, not by human though

Top comments (3)

Collapse
 
rouilj profile image
John P. Rouillard

One thing to remember is that SVG files are text. Hence they get compressed by the web server. So file size on disk is not file size sent to client (for most properly set up servers). png files while smaller on disk are already compressed so that is what you send to the client.

Also depending in what was used to create the SVG, you may have a lot of cruft that can be removed with no effect on the image. IIRC there are also svg optimizers that can help reduce size. However if somebody is trying to use an SVG to make a photo-realistic image other image formats like png would be a better choice.

Collapse
 
kaziusan profile image
Kaziu

thank you :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Using the right compression tools.