How to optimise hero images for web using Photoshop

At We are Chain we often get asked to look into business websites and discover what is making them slow. As you may know one of the biggest causes of reduced speed is images and videos. They tend to be the largest single pieces of content. Yes, there are lots of other causes like apps, plug ins and javascript, but for the purposes of this blog I want to focus on the Hero banner at the top of your homepage.

This is often the cause of a slow homepage because website owners believe it has to be a super large image. Yes, it needs to be high quality but that does not mean it has to be big. You also have to consider what it should be like on a mobile. Which is why I am writing this, having spent a lot of time optimising some of our clients’ websites recently it struck me it might be useful to run through the best process in my mind to get the best results.

In this post I will show you how to optimise your images using photoshop, crop for different screen sizes and what else you should be thinking about. Have you thought about the text that will go on top of the image, will you move the text below the image on a mobile. Does the image need an overlay if it is too pale?

The Hero Image:

We deal with lots of different website platforms, but our core business is based around Shopify and WordPress. Depending on your builder with WordPress you will get a lot of similar options as you do with Shopify. That is the ability to upload separate images for mobile and desktop. With both platforms you need to be thinking the same thing. What do you want people to think when they see the first image. This is your first chance to impress the website visitor, and it may be your last if the image doesn’t load quickly or fails to convey your key message.

Text or logo on the image

Depending on your website design, you may have either your logo on top of the image or a couple of lines of text and even some buttons. This can lead to problems on a mobile, desktops are easy because of the space allowed, but what if you have buttons and titles? This is when you might want them to drop off the image and sit below. A one click option with most Shopify themes.

On a mobile, if you wan to keep the text or logo on top, you might want to consider a taller image to make more space on the screen. On a desktop you want to think about which side of the image the text or logo sits. You also want to think about colours and overlays. If your image has a lot of white sky, what colour is your logo, will it disappear? In which case you might want to consider an overlay of a darker shade or even a box behind the text.

The problem with putting on an overlay or adding a background box is it reduces the impact of the image, even if you add transparency, it can be hard to get it right.

Choosing your image

It works well to have an image that has the hero or key figure to one side as opposed to spread the whole way across. That way you can use the same image for mobile as desktop and put the text or logo to one side of the image where it doesn’t get hidden by the messaging. You can use the full width image for your desktop and crop the figure out so it becomes a portrait. What this also does is reduce the image size on a mobile, saving you loading time and filling up more of the screen.

Selling a bar stool

For the hero image you have a couple of choices, you can make it a product focus or lifestyle image. I will leave that choice to you, but you may want to help people imagine what they look like using the product and save the bland imagery for product pages. In this instance I am going to have a bar stool as my key product. This could be anything but a bar stool was the first thing to come to mind.

How to optimise your images using 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.

1. 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.
2. 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.
3. 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.
4. 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.

You can also adjust how you view the image in the save for web pop up. You do this by choosing fromt he top left hand side - Optimised, Orginal or 2 x 2. This way you can see the original side by side with the image you are optimising and see if your setting begin to pixelate the image.

Cropping an image for mobile resolution

When you look at a hero image on a mobile it should stand out and not be a version of the hero which has been cropped by the website. You should take control of what the visitor sees by cropping it and uploading a s a separate image. In this case, I have cropped the stool using a crop preset of 4 : 6. You can select this by clicking the crop option and choosing from the preset dropdown at the top of your screen in photoshop. Then go about reducing file size in the normal way as save for web.

In our next video showing you how to do this for Shopify, the mobile image is a tiny 64kb which will really speed up your website homepage.

You can now upload both images and add them to the hero image as allowed in both Shopify and WordPress. In the video above you can see how to do this in Shopify using the Turbo Theme. If you have any questions about any of this, get in touch. We can do the work for you or train your teams to ensure they are optimising your website to be a fast as possible.