How to optimise images for your Champion Website

How to optimise images for your Champion Website

Awesome images make champion websites.  They are important to getting people engaged with your website content. As the old saying goes:

An image tells a thousand words

So if you are searching the web for good quality images and want to add a little salsa picante to your blog post, then this help article is for you.

Choosing champion images is half the battle

FlickrFinding good images is half the battle, and sadly we’re not going to cover how to choose images in this post, but talk more about the technicalities of editing and uploading them to your champion website.

Needless to say, there are an almost unlimited number of image libraries online, both paid and free. One of my favourites is Flickr Creative Commons licensed material. The Creative Commons license means that you can find images that you can use commercially, adapt and modify. Be sure to read the terms, though, because there are several flavours of Creative Commons licenses that provide a range of uses. And be sure to credit the autor of the image with a link back to their photo, or Flickr profile.

Once you’ve chosen your image

OK. You’ve got an image. Give yourself a high five and make a cup of tea. Half the battle is over.

Now comes the time to consider your uses for the image. At Nuttify HQ we use images all the time for blog posting, social media and champion website development. You’d expect the Nuttify web squirrels to be pretty handy with Photoshop, and you’d be right. But we all need a little refresher now and then. So in the interest of thoroughness, we’ll go into detail now about the nitty gritty of image file format, and manipulation.

There are no hard and fast rules

What follows is a set of guidelines that will help you get the best out of your images for your website and social media. Here’s what we work with:

Small file size is still important

Yes, I know, most of the developed world is on broadband now. If the Australian Government stops nobbling the NBN, we’ll be on super fast broadband soon too. But I won’t hold my breath. However, half of your website traffic is likely on their mobile devices. And a fair percentage of these may not even be on 4G, but still on 3G.

Now you see what I’m driving at.

If you load massive images on every page of your website. It will slow down the user experience. And if your site loads too slowly – people will not bother to wait around. Particularly with 9 other search results on the page they just found you on. If you are a photographer – then feel free to use high quality images. If you are a mortgage broker – less is more.

So here’s a golden rule

Small file size with acceptable image quality trumps high definition photos online.

But what about retina displays?

Yes, I know, the resolution of retina displays on iPhones and new Macbooks is much higher than standard screens. However, with the way that web standards currently are – you are then forcing retina device users to download your images twice. Once at standard resolution and then at high resolution.

How’s that going to work for your page load speed and user engagement? I can tell you that it won’t on mobile networks – which is close to, if not, 50% of your website visitors. So let’s not even bother with retina images. Remember: speed trumps image quality. Users want fast responsive sites with clear actionable content.

Don’t upload images larger than 1024 pixels

Just don’t. There’s no point. WordPress crops images to three standard thumbnail sizes by default:

  • Thumbnail – 150 x 150px (cropped)
  • Medium – 300 x 300 px  (scaled)
  • Large – 1024 x 1024 px (scaled)

Or any custom sizes that the Nuttify Squirrels may have defined in your Champion Website theme that we developed for you.

You can edit these default sizes by going to your Dashboard > Settings > Media and changing the values there. If you have already uploaded some images you may need to regenerate thumbnails using the Regenerate thumbnails plugin – which all Nuttify hosted sites have.

When uploading into a page or a post, you can now drag the image corners with your mouse and resize it in the visual content editor.

Manually edit images to the size that you are going to show them

When uploading an image for your logo, or some other often used element on your site please edit the image to the size that it is going to appear. i.e. Don’t upload a 1000 pixel wide logo image when it’s only going to show at 200 pixels across. We might be talking about a difference of a few kilobytes, or we might be talking a hundred kilobytes. Either way – if keeping people happy with fast page loads, so that they buy stuff from you, or hang around to read your blog posts, then every single byte saved counts.

Image quality

export-images-for-webWe are looking for the Goldilocks level of image quality. In Photoshop when you are exporting using “File > Save For Web” you can change the image quality settings, and size. With a JPEG you can set the image quality to around 60% and this usually gives a good result. You might want to try it a bit lower to see if the artefacts in the image don’t become too noticeable. Anyway somewhere between 40–70% is going to be small enough file size, and good enough quality.

Seeing as you’ve already edited the image to 1024 pixels maximum width, or height, then you will be getting down to quite a small file size by now. It’s a matter of juggling the dimensions, quality settings and file format to get the best results.

File type: JPEG or PNG

Here’s an easy way to decide which format is best for you. Answer these simple questions:

  • Do I need the background of the image to be transparent?
    • Yes– use PNG
    • No – use JPEG
  • Is the image a simple line image like a logo?
    • Yes– use PNG
    • No – use JPEG
  • Does the image have a lot of detail like a photo, gradient or material?
    • Yes– use JPEG
    • No –  maybe use PNG, but JPEG will probably be better
  • Which file format gives you a smaller files size?
    • JPEG – use JPEG
    • PNG – go ahead, knock yourself out and use PNG

Crop the image. Do not use black space

no-black-spacesNever, never, never use black space above and below an image. When editing an image crop into the image and make the image fill the whole space.

Also don’t screen shot your phone with massive black space above and below the image. Touch the damn image and save it to your photos. Then email it to yourself, or share it in some other way.

Footnote: for the super keen

For the technical heads amongst you Google has a detailed document on optimising images for websites 

 

Like what you see?

Find out how we can build a champion website for you.

Call Nuttify today 1300 688 4391300 688 439
or send us a message
No comments yet.

Leave a Reply