Learn the best way to export images from Photoshop for web use, ensuring a perfect balance between image quality and file size for fast-loading websites.
With your image open, go to the top menu and select File > Export > Save for Web (Legacy). You can also use the keyboard shortcut Alt + Shift + Ctrl + S.
In the top-right corner of the dialog box, select a web-friendly format from the dropdown menu. Use JPEG for photos, PNG for images with transparency, and GIF for simple animations.
For JPEGs, use the Quality slider (60-80 is often a good starting point). For PNGs, ensure the Transparency checkbox is ticked if needed. Watch the estimated file size in the bottom-left corner as you make changes.
Under the Image Size section on the right, enter your desired width or height in pixels. Ensure the chain icon is linked to maintain the aspect ratio.
Once you are happy with the preview and file size, click the Save... button, choose a location for your file, and click Save again.
Tips for Perfect Web Exports
Click the 2-Up tab at the top of the preview window to compare your original image side-by-side with the optimized version. This helps you spot quality loss.
Ensure the Convert to sRGB checkbox is ticked. This is the standard color profile for the web and ensures your colors look consistent across different browsers and devices.
For a more modern interface, try File > Export > Export As... (Alt+Shift+Ctrl+W). It offers similar controls in a streamlined panel.
The goal is the smallest possible file size with acceptable visual quality. A smaller file means a faster-loading webpage, which is crucial for user experience and SEO.
Explore other Photoshop guides and shortcuts