💎 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!
❓ question
How do you manage about image size in your company?
I have three candidates
educate about file size to designers, and they adjust file size (not to decrease image quality so much)
engineer optimise file image size manually
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)
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.
thank you :)
Using the right compression tools.