How to Optimise Images for your Website Hero Section using Photoshop
How to optimise your images for web using Photoshop
At We are Chain we often get asked to look into business websites, discover what is making them slow and as a result help them to optimise images on their website. 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. I will show you how to optimise your images for website to improve speed and user experience.
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?
A Website 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 Hero 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.
How to Choose your Hero 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.
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.
I have chosen my barstool image with a nice background and opened it up in Photoshop. The size of the original image is 13.1mb. That is huge, most homepages should be just over1mb in size.
In Photoshop I am going to reduce the file size by saving for web. File – Export – Save for web (legacy). A pop up will appear giving you options concerning the image optimization level. My preferred settings are:
Preset – JPG Medium
You can see a few options here and it will have already reduced the file size, in this instance to 3.76mb. Under the item saying Image size you can see the dimensions in pixels. Currently 7280 x 4096. I want to use this image as a hero so don’t want to make it too small or loose resolution so I am going to reduce the width to 1920 x 1080 which should be large enough for most screens without loosing definition.
You can play with other options in the save for web pop up to help you make changes and see if they adjust the quality. This includes adjusting the quality with the slider, I wouldn’t go below 30 and if you do you will see the image start to pixelate. You can use the preset options of Low, Medium and High etc.
Cropping Your Hero Image for Mobile Resolution Screens
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 pre-set of 4 : 6. You can select this by clicking the crop option and choosing from the pre-set dropdown at the top of your screen in photoshop. Then go about reducing file size in the normal way as save for web.
You can now upload both images and add them to the hero image as allowed in both Shopify and WordPress. In the video below I will show you how this works in Shopify and the following video in WordPress.