Export an image for a website in Photoshop

The speed of a website is extremely important. And the images you use can make a huge difference. Sizes should always be as small as possible, but without any loss in quality for the visitor. Thankfully Photoshop has an extremely good function to do exactly this.

1. Go to “File” and then click on “Export”
2. Now choose “Safe for web”
3. In the new window you can do all the adjustments (more information below)

Which format should I choose?

GIF: The most common format for simple web-animations.
JPEG: Use this lightweight format if you have an image without transparency.
PNG-8: Simpler PNG with only a few colors (not recommended).
PNG-24: If you have an image with transparency use this one.

I would recommend to use JPEGs whenever possible. This is the most lightweight format. You can even change the quality. Try to use “Medium” or “High” if possible.

Which image size do I need?

This is hard to say and depends from website to website. Try to figure out or guess, which is the maximum size that can be displayed on your website. If you have a full width picture, then I often recommend using a width of 1920px.

Good luck!


Inline Feedbacks
View all comments