Save Sharp Images at Low File Sizes

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.

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