How To Export/Compress Images For Web
If you're looking for instructions on how to export a high quality image from a full-size layered PSD for your website, we're here to help!
The PSD is probably (and ideally) a high resolution file, well over 1500px wide. But you will change the export image to be 1500px wide in the export settings.
Ideally, you would have the exported image file size be less than 250KB. There will be times when it’s necessary to have the image file size larger (but hopefully never over 500KB). There will also be times when it’s totally possible to have images around 150KB - use your best judgement there.
As you change the quality/compression value, find a good balance between file size and visual compression artifacts.
You definitely don’t want the compression artifacts to be too overpowering/noticeable — but in some situations they will be somewhat obvious if you look at the right spots, which is OK as long as it isn’t distracting and overwhelming.
To save for web:
- Alt
- Shift
- Ctrl
- S
You can also:
- File
- Export
- Save For Web (Legacy)
Here's a checklist to make sure all the settings are correct:
- File Format: JPEG
- Quality/Compression: Usually Between 50 & 75
- Progressive: CHECK
- Embed Color Profile: CHECK
- Convert to sRGB: CHECK
- Metadata: None
- Image Size: 1500px wide (height will auto-adjust)
Check this screenshot for confirmation:
Related Articles
Best Practices for Website Images
IMAGE FILE SIZE, RESOLUTION, AND DIMENSIONS File size refers to how much space an image takes up on a hard drive. Smaller file sizes are better for web graphics as they will allow the website to load more quickly. This is important for many of the ...How to Upload New Files to the Media Library
Uploading New Media 1 - Select 'Media Library' from the left navigation 2 - Select 'Add New' top left 3 - Upload by browsing for files or drag in photos to upload - You will see them appear below. Note: Many modules and tools throughout the site ...