Web Design

Wish your clients would stop asking "Why is my page speed so bad?". These simple steps will ensure you create high-quality images that aren't oversized.

The Problem

So you’ve just built your new site and optimised everything possible including your custom image sizes, and then you hand it over to the user. Two weeks later you get the “Why is my page speed so bad?” or “Why is the page taking so long to load?” questions. You go and check the website and find out that the images are huge! I’m sure every developer has been in this position before. It’s a difficult thing to deal with in the current climate of high-resolution images that come from DSLR’s, phones and retina displays, but hopefully this post will cover a few very simple things you can put in place to avoid some of these issues. Ultimately, even just one oversized image can seriously lower your page speed ratings.

The Perfect World Situation

Before the website build starts, have a chat with your designer to ensure that all images in the design follow a standard image aspect ratio. Image cropping should not then become an issue if you set your custom image sizes accordingly. Try to use 3:2, 4:3 or 16:9 as these are the standard camera aspect ratios. If this isn’t possible and you will be using images from a current live site for the rebuild, then check to see what the aspect ratios are and design accordingly to incorporate these, or you will be in for some issues in the not so distant future.

Restrict File Upload Size

There are many plugins that allow you to control this; so many that I won’t list them, but a simple search will show you how many there are. These plugins come in many forms, but I would go for the simplest one possible. Normally they add an additional option to your settings/media options within WordPress that you can set when logged in as an admin and would look similar to the image below.

WordPress optimise image upload size settings

If you don’t want more plugin bloat, then this can also be done by hooking into the ‘wp_handle_upload_prefilter‘. A good example of how to utilise this can be seen in this blog post towards the bottom of the page.

For images that are called using Advanced Custom Fields, you can add max-min image dimensions/file size and restrict to specific file types all within the UI. I highly advise you do this.

You would think that forcing a max upload size would be enough, right? Well sadly it’s not, this isn’t going to stop the client from uploading a 500kb image that is only 100px x 100px, and neither will it remove the EXIF (meta) data from the file. So we will have to implement another layer of checking.

Optimise Images

The best way to do this is to use the Photoshop save for web option, but you can’t guarantee that the user will have this software, so we now have two options available to us:

Plugins

There are some good plugins available out there with Smush being one of the better ones, as it’s great for batch optimising and also allows a max file upload size option. There is an additional checkbox to remove EXIF data in the settings.

Online Image Optimisation

Again there are many out there, but TinyPNG is one of the simplest options available: upload your file and download the compressed version. TinyPNG removes all EXIF data.

Still Not Enough?

We have set up a few checks that will hopefully resolve the image issues, but I’m sure you have already seen a few problems that can still occur:

  • Maximum file size is still too big for some small images
  • Actual pixel size can be larger than is actually needed
  • There is no visual control or comparison over the optimised images unless the user has good image editing software
  • The image is the wrong file type

Sadly there is no way around this and we have set up as much as possible to catch any problems. The only way to truly fix the issue is to educate the user on file types and ensure that they use some sort of image editing software.

Educate Your Users

Try and book some time to chat with the person who will actually be dealing with the website images, and also write a step-by-step guide that incorporates the software they are going to use so that they can pass on the information if needed. I strongly advise trying to get them to purchase some good image editing software to save some time. Be prepared for bringing out the block toy as shown, you’ll be surprised at the amount of times the user is surprised that a portrait image won’t fit very well into a landscape. layout…

Children's toy with shaped blocks and shaped holes

Possible Solutions for the User

These are by no means the perfect way to do things, but it should help everybody involved and lower the file sizes of images:

Know Your File Types

There is too much to go into for this post, but if you want to read more on file types, then this post is a good resource for an in-depth look at the subject. For the purpose of this post though, I will break it down as simply as possible:

  • A photograph containing people, landscapes etc = JPG
  • A cutout of a person or product that overlays something else not in the images background = PNG
  • An infographic or icon = GIF or PNG

If you are thinking of uploading anything else like a TIF, PSD or AI as an image file for on your website, then STOP now.

The Usual Case Scenario

Software

  • Windows OS using Microsoft Paint

The Image

  • Maximise the browser so that you can see the largest viewport size the image is being used at. Use the Windows snipping tool to work out the actual pixel size of the image
  • Create a new canvas/document in MS Paint based on the dimensions of the snipping tool
  • Fit your new image into the new canvas
  • Does the image need a transparent background?
  • Yes? Save as a GIF or PNG
  • No? Save as a JPG
  • Use TinyPNG to compress your image
  • Upload the compressed image

The Best Case Scenario

Software

  • Any OS using Photoshop

The Image

  • Maximise the browser so that you can see the largest viewport size the image is being used at. Use the screen capture tool (mac tool) to work out the actual pixel size of the image
  • Create a new canvas/document in Photoshop based on the dimensions of the snipping tool
  • Fit your new image into the new canvas
  • Select save for web
  • Ensure you are viewing the image at 100%
  • Does the image need a transparent background?
  • Yes? Select GIF, PNG8 or PNG24 from the drop-down (You will see the image quality and file size change when you do this)
  • No? Select JPG from the dropdown
  • Change the various image format dependent settings until you get a good image quality/size tradeoff
  • Select the metadata dropdown and choose none
  • Save, then upload to your website

Conclusion

Hopefully this should help the user get a better understanding of how to add new images to their site and save a lot of file size. I know that this post does not cover the use of background images, retina, SVG and many more other image faffery, but if the options covered are applied it should still help out the majority of users.

For more help with web design, get in touch with our experts today.

3 responses to “How to Optimise Your Web Images”

  1. Consulenza says:

    Harry, this trick of Snipping tool+Paint absolutely rocks! I tried it already, it works so easily. Would you have any tip about handling image metadata as well? Thanks for the article!

Leave a Reply

Your email address will not be published. Required fields are marked *