How to optimise images for websites using Photoshop
At We are Chain, we often get asked to help businesses figure out why their websites are running slow. One of the most common culprits? Images and videos! They tend to be the biggest content on the page, hogging all the load time. Sure, there are other reasons like plugins, apps, and JavaScript that can slow things down, but today, we’re zooming in on a major offender—the Hero Image at the top of your homepage.
The Hero Image is your website's first impression. It’s often the largest image on the page, and many people think it needs to be massive for high quality. Spoiler alert: It doesn’t! You can have a stunning image without sacrificing speed, and that’s exactly what we’ll dive into. In this guide, I’ll show you how to optimize your Hero Image using Photoshop, crop for different devices, and ensure that you balance visuals with performance.
Why Your Hero Image Might Be Slowing You Down
The Hero section can easily drag your site’s speed down if not done correctly. A slow-loading homepage is a dealbreaker for visitors. Think of it this way—if your Hero image takes too long to load, potential customers might already be gone before your brand message even appears.
So let’s get to it: how can we keep your Hero image high-quality without turning it into a web-speed disaster? And most importantly, how can you make sure it looks good on all devices, from desktops to mobile?
Optimising Your Hero Image with Photoshop
The first step is opening your Hero image in Photoshop. We’ll use my go-to technique to optimize file size without losing image quality.
Open Your Image: Let’s say I’m working with a product image, like a bar stool. The original file size might be a whopping 13.1MB—way too large for a web homepage! Your goal is to reduce this size while keeping the image sharp and impactful.
Save for Web: In Photoshop, go to File → Export → Save for Web (Legacy). This is where the magic happens. A pop-up will appear giving you options for file optimization.
Set Image Quality: I typically go with the “JPEG Medium” preset. You’ll see that this drastically reduces the file size—maybe down to 3.76MB. For web, a Hero image width of 1920 x 1080 pixels is usually perfect for most desktop screens.
Play with the Quality Slider: If the image is still too large, use the quality slider to make adjustments. Don’t go below 30% on quality though, or you risk pixelation. If needed, stick with the medium quality setting for best results.
Cropping for Mobile: Keep It Consistent, But Different
Your Hero image isn’t just about desktops. You also need to think mobile. Mobile screens are smaller, and images can get cropped automatically by your platform, often with ugly results. Take control and manually crop for mobile instead of letting your platform do the dirty work.
Hero Image Selection: Product or Lifestyle?
Now let’s talk about the actual image. Whether you choose a product-focused image or a lifestyle shot, your Hero image should resonate with your audience and convey your brand’s message instantly. For example, a well-placed barstool in a stylish room is more engaging than a bland product shot on a white background.
Key Tip: Consider choosing an image where the subject (in this case, the barstool) is off to one side. This gives you space to add your text or logo without covering up the main subject. Plus, this approach makes it easier to crop for mobile without losing the essence of the image.
Wrapping Up
With Photoshop, optimizing your Hero image for both speed and aesthetics doesn’t have to be hard. By following the steps we’ve covered—reducing file size, cropping for mobile, and considering overlays—you can create a visually stunning and fast-loading homepage that impresses visitors no matter what device they’re using.
Want to see how it’s done? Check out our video guide where I walk you through the process in Shopify, and stay tuned for the WordPress version!