How do i handle different logo sizes on a single web page with page load time in mind?
suppose i have 2 same logos on my web page, one is 64px wide, one is 160px wide. is it better to have 2 separate files for their respective resolutions or just 1 file but style the logos' widths in css differently?
also, not losing the quality, should i always use svg or is png enough?
3 Replies
using the SVG solves the first problem instantly. vector graphics scale losslessly where a PNG might not
if I had to use PNGs, I'd take a high resolution version and then shrink that down to both sizes, making sure to start with the high resolution version each time. That way you're in control of any artifacting or aliasing happening, and you don't rely on the browser to do it at runtime
but yeah, SVG is better if you have it
thank you very much!
In your question, I can conclude you didnt work very much with images. I would encourage you to google webp format of images sew what is the difference between png, svg, webp and also explore the img "srcset" attribute, I think it is going to be of a great help to you.
Later on, when you learn frameworks, you will use components that will render the picture based on viewwidth of the screen, but be sure to learn how that functions under the hood.
Also, learn the difference between the size of the fetched picture and displayed size of that picture, as this can impact the performance on your website. As tested by the lighthouse tool.
Good luck! :)