How to Optimise Images for Web: A Guide to Resizing

by | blogging, online tools & resources, web design

When it comes to website design, choosing the perfect images to sit alongside carefully crafted copy is so important. It’s an area that I find clients often struggle with but the right photos and illustrations will make your site look more professional, elicit emotion and ultimately support your content in telling your brand story.

In today’s post I’m sharing my tips for selecting and uploading images that will enhance the performance of your website in more ways than one.

How to choose, resize & optimise images for your WordPress website Pinterest Graphic Template by sm web designs

1. Choosing the right images

The first thing to consider is sourcing the right images. Because they are so important (and often tricky) to get right, I always advise clients to address this early on in the web design process, as part of their overall marketing strategy.

So where do you start when it comes to looking for the best images for your site?

If you don’t already have a bank of professional photos and hiring a photographer isn’t in your budget right now, stock imagery is your best option. There are a ton of stock photography websites (both paid and free) which offer high quality photos around specific topics.

My favourite premium stock imagery sites are Adobe Stock and Shutterstock. You can find really beautiful stock imagery and creative mock ups to help show off your product/digital product at Moyo Studio (I use their images myself for mock ups).

If it’s free images you’re looking for then check out Unsplash, Pexels and nappy.co (great for diverse images). Check out my previous post on finding the best free images for your site.

Wherever you decide to source them from, there are a few things to keep in mind when selecting photos or illustrations in order to deliver your brand message accurately:

  • Be strategic – never, ever use images simply to fill space. Think carefully about what you want to achieve with your site and how the images you choose will help you reach those goals. Each image should be chosen with careful consideration and intention. They should be relevant to your brand, audience and marketing goals and informative as well as decorative.
  • Beware of copyright laws – do you have permission to use the image? If you use a copyrighted image without the owner’s permission, you could be liable to be sued. Never assume just because an image appears in a Google search that it’s free to use. The vast majority of images on the internet are likely to be protected by copyright so always work on the basis that an image is copyrighted unless you know otherwise.
  • Consistency is key – to keep things looking really professional, select images that are of the same style. If you’re using stock images (which means you won’t have any worries about copyright issues) then try to select a suite of photos from the same photographer or, at the very least, with the same colour tone. This will help to give your site and branding a more cohesive look.

If you can’t find the perfect stock photos for your site and have the budget to spare, I would strongly suggest enlisting the help of a professional photographer. A good photographer with the right brief will be able to bring your brand to life and really make your site ‘pop’. If it’s a personal branding photographer you’re looking for, I can recommend the fabulous Karen from ‘With Passion & Purpose’ who’s superpower is capturing women doing what they love.

2. Formatting and optimising your images for the web

Whether you’re building your own website or collating images for your web designer to use, once you have sourced your photos or illustrations it is essential that they are formatted and optimised for the best performance on your website.

Flodesk email marketing platform

Get your images ready for uploading…

Image dimensions and resolution

This is important depending on where and how your image is being used.

Dimension refers to the physical width and height of the image, for example 1000px x 1800px (1000px wide and 1800px high). For banner images (full page width images) I recommend a width of 1920px and for blog posts and in page images 1080px x 600px.

Resolution refers to the quality of the image. Image resolution ranges from 72dpi (dots per inch) which is great for images being used on your website, up to 300dpi which is needed for high quality printed images (for example on; flyers, posters etc.).

Image size

Next, you’ll need to reduce the size of your images to ensure they are suitable for online use. Large images (due to having a bigger file size) slow down your web pages which can create a poor user experience – if your page takes too long to load then your visitor will probably get tired of waiting and move onto something else. Not only will this stop your site from taking forever to load (a big no no), it will also keep Google happy because search engines hate slow sites. In terms of sizes, there will always be a trade-off between picture quality and site speed but I always advise compressing images as much as possible without obvious quality loss. Be sure to resize images to fit the maximum pixel dimensions they need (don’t put a large image into smaller space).

There are lots of free online image resizers that will do this for you. Tinypng is my favourite online, free. tool for reducing an image file size without losing quality(if the image dimensions are fine). For the quickest load speeds, aim to have your image files under 500kb (0.8MB) and ideally less than 100kb if possible.

Image file types

As with image resolution, there are several different file types depending on the use of that image on your website.  For general images/photographs .webp or .jpg are best as they have a smaller file size.

For logos, icons or images with a transparent background a  .svg or .png is best. Any professional photographer will be able to supply you with images in one (or most) of these formats and if it’s the stock imagery route you go down then I recommend jpg’s all the way.

3. Naming your images for SEO

The final step in organising your site imagery is to properly name your images before you upload them. Google can’t see your images, but it can read your image names. So for an extra SEO boost, it is a good idea to change them to something that includes a description of the image using keywords and your brand/business name (top tip – use hyphens to separate words). Having descriptive names (rather than IMG123.png for example) will also ensure your site is accessible to everyone.

Once upload, it’s really important for SEO and accessibility to ensure each image has ‘alt text’/’alt-tag’ added.

This can be doneeasily in WordPress Media library and the Alt Text box. This text should desctibe the image and include a relevant SEO keyword for the image and the page/post it is on.

Whing adding Alt Text or Alt Tag to your images is important

Finally, if you’re working with a DIY website template and uploading the images yourself, make sure they are the right shape and orientation. It might sound obvious but banner images should always be landscape, for example. Swapping a landscape image for a portrait one might alter the design of your whole page so keep things simple and uncomplicated by swapping images like-for-like.

Beautiful, fully-optimised imagery alone won’t convert your website visitors into paying customers but without strong visuals, your website will never reach its full potential. They’ll bring your product or service to life in a way that words alone can’t and allow future clients to imagine using them which, in turn, will open up sales opportunities.

Sarah x

For more tips and how to’s, starting with how to get more traffic to your website in twelve easy steps, sign up to my Website 101 email list below ↓

12 ways to get more traffic to your website by sm web designs

Thanks! Keep an eye on your inbox for updates.