No matter what website host you use, compressing images before you upload them is a great practice for your site.
Server side compression is happening more and more, but the less space you take up in the first place means less bandwidth is required for someone to access that piece of content, and your website size is easily manageable into the future.
Size and Crop
Before resizing your image, decide on its usage and if you can crop any of it before you resize it. This way the image is less likely to stretch and skew incorrectly on different screen sizes.
I go by the general rule that 800px wide is plenty for half a page and 1200px
File Type
.webp is the best option for your images as it’s fast loading and specifically designed for web.
.jpg is popular for images with higher detail and as a fallback if webp is not supported by your host or browser.
.png is good for transparent images, but nothing else – the files are quite large so the less
.svg is the smallest file size but not suitable for images, but all logos/icons etc should be uploaded as vectors wherever possible.
Photoshop and Illustrator
If you’ve got these tools then you probably already know this and don’t need my help 🙂 But I generally use 60-80% quality unless it needs to be the highest quality.
I have just found Photopea when looking for a solution for a client who needed slightly more than your standard operating system supplied image editor on their computer.
What’s better is that it even saves images in .webp natively – no more needing to convert JPGs!
I even did a video to quickly show you how to resize and save images for your website.
Note: I mention in this email to use png for transparent images, not webp. Webp format does not support transparency but I’ve seen it fail a few times, especially on the Microsoft Edge browser, so I’ve not switched to using this.
