Easy Guide to image sizing

Most people who run a website know that these days website speed is important. In this age of mobile data, personal time pressures and incredible amounts of information to digest people simply do not wait as long for a website to load.  If it takes 5 seconds to show anything you’ve lost them.  They go straight to the back button and on to the next in the list on Google.

There are many great posts on the Internet detailing how to speed up your site (this article from the guys at WP Curve is a great one https://wpcurve.com/wordpress-speed/) but here we are going to focus on just one of them. Image Size.

Optimising images is one of the most effective ways of improving your site speed and the beauty is that a lot of people (including many web designers) don’t understand or don’t bother.

This means you can get ahead of the curve very easily just by understanding a couple of key concepts.

Number of Pixels and File Size

There are two aspects to the “size” of a digital image.  There is the amount of space that it takes on the disk, filesize, and there is the number of pixels that go to make up the image, the resolution.

The two are linked but the relationship between them is not always the same.

In many modern cameras and phones you will hear that it’s, for example, an 18 Megapixel camera. This means that one photo will contain 18 million pixels. This is extremely high resolution and can mean that the image dimensions are in the region of 5000 x 3500 i.e 5000 pixels wide and 3500 pixels high

The result of a high resolution image is incredible detail and also the ability to zoom in quite a long way before the individual pixels become easier to distinguish and the image starts to look blurry.

It also means that the image will be quite large on the disk, often up to 10 Megabytes.

In the image above image00006 is 4mb and 14megapixels (14 million pixels)

After optimising we get the following,

In this case I wanted the image as large as possible (pixels) whilst staying at around 100kb.  As you see scaling the image down to 20% of its original pixel size results in a filesize that is 2.5% of the original 

Optimising an image means balancing the number of pixels with the filesize to maintain a good enough quality image for your purposes.

A general rule of thumb that we go by is that all images should be reduced to 100Kb or less (if you compare with the number I mentioned above – 10Mb – that is 1/100th of the filesize of the original)

Pixels and Filesize in summary

High resolution = High file size

High file size = Longer to download (display on your website)

Longer to download = Slower website

Slower website = More lost visitors

How do we get that balance?

The good news is that, for the web, we don’t need very high resolution images and, because on a computer screen a pixel is a fixed size, we don’t need very many pixels wide or high for an image to look great.

The second bit of good news is that there are many ways of getting rid of the unnecessary pixels.  Very often a “clump” of pixels will all be the same colour and can be combined in to one.

Step One – Crop

The first step is to make the picture the right shape and delete the bits you don’t need. Otherwise known as cropping.

Step Two – Resize

The second step is to change the pixel dimensions of the image.  Generally speaking you will need the following widths as a maximum for each type of use,

  • Full width slider or background image – 1600 to 2000 pixels wide
  • Boxed website width slider or background image – 900 to 1100 pixels wide
  • Inline image in a page or blog post – 300 to 700 pixels wide
  • Half page width image – 400 to 600 pixels wide

Note that I have only mentioned width, not height.  The height of an image will very often follow the width because you will need to maintain the aspect ratio (if you don’t you end up with very squashed looking photos)

Step Three – Save for web

After resizing to a suitable “physical size” i.e. number of pixels wide and high you then need to save the image at its new size.

Tip: At this stage make sure to Save As… a different image name or you will lose your original high quality image.

You will also need to choose the filetype to save as and different filetypes have different uses.  A quick google search will give you all the info you need and more about the different options, for the purposes of this article I’ll stick to the main two.

.jpg (or .jpeg) – highly compressed and good quality, for us jpg images are the default that we always go to (unless we need transparency – see below)

.png – very common and very popular BUT a png image is nearly always a bigger filesize than the equivalent jpg (equivalent being the same number of pixels).  However if you want to preserve transparency you will need to choose png over jpeg because the jpg format does not support it

Step Four – Final optimisation

If you have Photoshop and use the excellent Save for Web… option you will probably find that you don’t need this last step, it does a very good job of optimising your image and makes it easy for you to play with all the variables and choose the best options.

If not you may want to try a few other options to really try to get the file size down as low as possible without losing too much quality.  The following list are all things you can try and all work well but you don’t need to do all of them, in most cases one is enough,

  • Photoshop Save for Web
  • PaintShop Pro, resize and then Save As
  • RIOT – a freeware program that you install on your PC. Excellent and amazing results with very little loss of quality, also options for resizing images in bulk and resampling (reducing number of pixels)
  • http://resizeimage.net/ – an excellent online system for resizing (and there are actually quite a lot more similar ones to this)
  • WordPress Plugins – Smushit and EWWW optimiser. Personally I think it’s a job done better before you upload to the website but if it’s too much for you then these two plugins do quite a good job without asking you any confusing questions!

My system for image optimising always ends with running through RIOT (http://luci.criosweb.ro/riot/) , I love it!

One Final Tip

When you upload an image into the WordPress Media Library it automatically creates three of four other versions of the image, a large one, a medium one, a small one, and a thumbnail.

The thumbnail is usually a square section of the image reduced to 150px by 150px but all the others are smaller versions of the original image.  When you are inserting an image into a page or post you will get to choose which version you use.  If you don’t need the full sized one pout in a smaller one – your page will load faster.

Conclusion

Optimising your images is often the biggest win that you will have when improving the speed of your site.

It’s best done before you upload to WordPress but can be done after with the aid of plugins.

At Orange Pixel we always design with speed in mind and optimising images is just how we do it, it’s ingrained in our methodology.

If you’d like to know more about our services, or about image optimisation, then please drop us a line on our contact page

If you’ve got any further tips or tricks to share please do leave a comment below