Quick guide for image size, file size, and resolution
Hi guys,
I wanted to know if you have any rules or guides for how much an image size should be.
I know it depends on the website or design, but I am just thinking as a guideline. Because I have read that somewhere: Optimal file size: Large images or full-screen background images should be no more than 1 MB.
Most other small web graphics can be 300 KB or less.
The simple answer: as small as possible. You want your site to be as fast as possible and every single extra byte costs time and resources.
But the more complex answer as usual: it depends. I can give you some tips if you like. To start with, 1MB and 300kB in my opinion are still pretty big. For instance, this is an Umbraco 8 website and the largest picture on the homepage is 289kB (and that image should have been an SVG...) and the entire page is around 2MB: https://www.olvg.nl/
So:
Use webp for photo's with a jpg fallback.
Use SVG for graphics and icons
Don't use PNG, unless you really need the transparency channel and can't use SVG.
Optimize file size (in pixels) for different screen sizes. This way a mobile user will download a much smaller image than a desktop user.
Umbraco has a lot of tooling for creating images in various formats and sizes.
No SVG's are vector graphics. Meaning that instead of pixels, they describe shapes. Essentially they are XML files. They work very well for graphics and icons because they require relatively little 'shapes'. And because they don't work with pixels, they always remain sharp no matter how much you zoom in.
This logo from that OLVG-website I mentioned before is relatively complex and is just 18kB. Also, open it in your browser and zoom in and you will see it remains sharp, no matter how much you zoom: https://www.olvg.nl/media/yugfokl1/logo-olvg.svg.
But SVG's are not meant for photo's, so you don't use them for that. (Well technically you could, but Base64 encoding a photo in an SVG probably is way larger than just using webp and jpg).
Quick guide for image size, file size, and resolution
Hi guys,
I wanted to know if you have any rules or guides for how much an image size should be.
I know it depends on the website or design, but I am just thinking as a guideline. Because I have read that somewhere: Optimal file size: Large images or full-screen background images should be no more than 1 MB.
Most other small web graphics can be 300 KB or less.
Do you have guidelines or rules on this?
The simple answer: as small as possible. You want your site to be as fast as possible and every single extra byte costs time and resources.
But the more complex answer as usual: it depends. I can give you some tips if you like. To start with, 1MB and 300kB in my opinion are still pretty big. For instance, this is an Umbraco 8 website and the largest picture on the homepage is 289kB (and that image should have been an SVG...) and the entire page is around 2MB: https://www.olvg.nl/
So:
Umbraco has a lot of tooling for creating images in various formats and sizes.
Hi Luuk,
Thanks for the answear.
But isn't SVG file very big? Do you compress them? How small do you make?
No SVG's are vector graphics. Meaning that instead of pixels, they describe shapes. Essentially they are XML files. They work very well for graphics and icons because they require relatively little 'shapes'. And because they don't work with pixels, they always remain sharp no matter how much you zoom in.
This logo from that OLVG-website I mentioned before is relatively complex and is just 18kB. Also, open it in your browser and zoom in and you will see it remains sharp, no matter how much you zoom: https://www.olvg.nl/media/yugfokl1/logo-olvg.svg.
But SVG's are not meant for photo's, so you don't use them for that. (Well technically you could, but Base64 encoding a photo in an SVG probably is way larger than just using webp and jpg).
is working on a reply...