Optimize Your Images in Photoshop
Optimizing images before uploading them to your website is one of the simplest and highest-impact things you can do for your site's performance. Unoptimized images are the most common cause of slow-loading pages — and slow pages hurt both user experience and SEO. Here's how to do it right in Photoshop.
Step 1: Resize to the Right Dimensions
Never upload an image larger than it needs to be. If your website displays images at 800px wide, there's no reason to upload a 4000px original. Go to Image > Image Size (Ctrl/Cmd-Alt-I). Make sure the chain link between Width and Height is locked (maintains proportions), set the resolution to 72 ppi (standard for web), and resize to your target dimensions.
Step 2: Use Save for Web (Export As)
Don't use regular Save or Save As for web images. Use File > Export > Save for Web (Legacy) or File > Export > Export As. These options give you direct control over file format, quality level, and final file size — with a preview showing the result before you commit.
Step 3: Choose the Right File Format
- JPEG: Best for photographs. Adjust the Quality slider — 60–80 is usually a good balance between quality and file size. Above 80 offers diminishing returns on quality with significant file size increase.
- PNG: Best for graphics, logos, and images requiring transparency. PNG-8 for simple graphics with few colors; PNG-24 for images with gradients or many colors.
- WebP: The modern format — smaller file size than JPEG or PNG at equivalent quality. Supported by all modern browsers. Use Export As and choose WebP when possible.
Step 4: Check Your Final File Size
In Save for Web, the file size preview is shown in the lower left of the image preview. For most web images, aim for under 200KB. Hero images can be larger (up to 500KB) but should never be multi-megabyte files. The smaller the file, the faster the page loads.
Step 5: Use a Consistent Naming Convention
Before saving, rename your file with a descriptive, SEO-friendly name using hyphens — not spaces or underscores. web-design-portland-homepage.jpg is better for SEO than IMG_4823.jpg. See SEO Tips for Images for the full breakdown.