Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen. Ilya Grigorik
Exporting Images
Web Image Optimization
Exporting from Sketch
When saving images for web via Sketch, make sure to set your quality via the first export. Steps below on how to do this. The width of your artboard should be 1440px.
Select and Export
Select one image you would like to export and choose JPG at 1x size
- Choose Export
- Format JPG
- Size 1x
- Export Selected
Image Credit: Sketch
Choose JPG quality
- Choose 60%
- Check Progressive JPG
- Export
Image Credit: Apple
Check Image File Size
Check file size
- Right Click on image
- Select Get Info
- Make sure file is under 200 KB
Image Credit: Apple
Exporting from Photoshop
When saving images for web via Photoshop, make sure to Save as Web (Legacy). The width of your image shouldn’t exceed 1440px.
Select image you would like to export
- Select File dropdown
- Choose Export
- Select Save for Web (Legacy)
Image Credit: Adobe
Check format and quality
- Choose Optimized Tab
- Select JPG as format
- Choose High for quality
- Select Progressive
- Make sure file is under 200 KB
Image Credit: Adobe
What is a progressive JPG?
If you are wondering what a progressive JPG is, here is an article that explains it well.