Body
The file sizes of your web images are too big and they could look sharper. This tutorial will help you save sharp images in Photoshop at a low file size. Want to see the results? Take the Eye Test.
Photo Saving Guidelines
Description |
Image Dimensions |
Filesize Suggestion |
banner |
2100 x 700 |
90-300 kb |
card image 1 |
900 x 599 |
30-150 kb |
card image 2 |
900 x 450 |
25-145 kb |
portrait images |
600 x 900 |
35-100 kb |
How to Save Sharper Banner Images in Photoshop
Summary - save images at larger dimensions than you need and use low/medium quality export settings.
Download Your Image at 2x
Choose an image size that is bigger than what you need, but not too big. I recommend:
- Flickr - "Large 2048 x 1365"
- Portfolio - "Size - Medium (within 2100px)
Crop in Photoshop
Use the crop tool with the following settings: Ratio 1280 x 425
The height can be lower/higher than 425, but try to keep it under 450px.
Export for Web
File > Export > Save for Web (Legacy)
JPEG
Quality: 10-60
Target file size | 70-275 KB
Check " Convert to sRGB"
Alternative
File > Export > Export As…
Use Your Best Judgement
Every image is different. Sometimes you'll need to save a file at a higher file size than my suggestions. The goal is sharp images without file size bloat. As the eye test highlights, a large file size does not guarantee the image will look better.
If your image file is over 300KB, it can likely be optimized using the techniques shown in this tutorial. The benefit is faster loading pages, which is considered by Google when ranking search results.
How to Save Sharper Card Images in Photoshop
Download Your Image
- Flickr - "Large 2048 x 1365"
- Portfolio - "Size - Medium (within 2100px)
Reduce Image Width to 900px
Image > Image Size… > Set Width to 900
Export for Web
File > Export > Save for Web (Legacy)
JPEG
Quality: 30-60
Target file size | 30-150 KB
Check " Convert to sRGB"
The Eye Test
Take a look at the images below. Can you believe that the file size of image B is 4 times lower than image A!
Image A - 444KB
Image B - 106KB