OPTIMISING IMAGE SIZES & THE COMPRESSION ENGINE


S04 | E08 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  4 min video

Web School Series 4 Episode 8

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


If you take a photo on your camera or purchase a new image, chances are that the image is far too large for the web. This is because images might be used for other reasons such as print or video that require many more pixels than computer screens. Smaller images that are compressed, are smaller more and compact and therefore will load quicker and increase your page load speed. Faster page load speeds are pleasing for your customers, and customers will not stick around waiting for slow pages to load, meaning you could be losing business. Such is the importance that we save space on the internet and improve user experience. Google will penalise slow pages, so it is absolutely critical that you optimise your images as best you can.

Thankfully, your MOBLE website attempts to do a lot of the hard work for you. The inbuilt compression engine is the first line of defence to ensuring your images are optimised as soon as you upload them. Let's look at how this works.


OPTIMUM IMAGE SIZE

The objective of sizing images is to have the crispest, most beautiful looking image at the smallest possible file size.

If you have an image from your graphic designer, camera, or stock library chances are it has not been optimised. Its properties might look something like this:

  • jpg, png, tiff
  • 5324x3549px (aspect ratio 4:3)
  • 300dpi
  • 5000kb


For the web, it is important to optimise the image more like this:

  • jpg
  • 1440x810px (aspect ratio 16:9)
  • 72dpi
  • 150kb

Notice that the size of the image is reduced from 5000kb to 150kb. This is much more the size that is acceptable for the web and for search engines, for an image that is 1440 px wide.


SIZE IMAGES TO 1440x810px

When sizing your own images in bulk, or if you are ever asked how you would like an image prepared, perhaps by a photographer or brand designer, then we would recommend sizing your images as follows:

  • jpg
  • 1440x810px (aspect ratio 16:9)
  • 72dpi
  • ~150kb

As a rule of thumb this is a very special size image that will work perfectly for Background Images and Widgets. Therefore, if your images are saved in this way it will save you considerable amounts of time in the Visual Page Editor.

Remember in Series 3, Episode 6, we discussed how you can use the Background Image Position tool to shift the focus point of the Image. An image that is sized 1440x810px will work perfectly for this.

Upload Image in the Visual Page Editor

Here we see a Background Image that is 1440x810px.
Screens are most often 16:9, and therefore this nicely covers the entire screen.


SIZE SQUARE IMAGES TO 810x810px

For square images, size images to 810x810px. This is tactically a great idea as your square images will have the same height as your main image. This can become useful in the occasional instances where widgets will display the 'Original' height.

  • jpg
  • 8100x810px (aspect ratio 1:1)
  • 72dpi
  • ~80kb

More on this below.


IMAGE SIZE FOR WIDGET FEEDS

Your Widgets will display the File Icon or Page Icon in the feed. This is a thumbnail that appears before you click to open the image or go through to a page.

Your Widgets can have an Aspects Ratio of 1:1 (Square), 4:3, 16:9 or Original. When you upload an image MOBLE will automatically prepare the variant for your widgets, so there is no need for you to do anything.

DID YOU KNOW?

As a rule of thumb, you can be confident always using 16:9 images, unless you require a specific size in the page editor. In the images below we see an example of where a square image is better than a 16:9 image.

A fun tip is that you can turn square images into a circle. To do this, in the image component apply a Class for 'circle'. You can also apply a class for 'shadow' to lift the image off the page.

Square Image



Circle + Shadow Image



Circle Class

Image Component showing how to add a 'circle' and 'shadow' class to a square image.


AUTOMATIC IMAGE COMPRESSION

When you upload an image to MOBLE that is larger than 1440px (on it longest side) we will automatically compress it for you down to 1440px. The end result is a file size that has been optimised for you.

Even if you upload images in bulk, as we learned in the last Episode, all your images will automatically be compressed for you, saving hours of preparing images in offline tools.

There are, however, some things to consider:

  • The MOBLE compression engine is a convenient first line of defence.
  • If you are conducting SEO or further optimising your page load speed, you can go through image by image and try to do this manually. Nothing can beat optimising images individually, though it can be a painstaking exercise which comes with a labour cost. MOBLE's compression engine is an excellent first line of defense to get you started and quickly, saving you money and time.
  • The compression engine is meant for photographs as jpgs, not for photographs as pngs.
  • MOBLE will still attempt to compress PNGs automatically, though this won't be properly optimised for the web.

JPGs versus PNGs

A common question is when to use a jpg or a png on your website.

  • JPEGs are for photographs. They are a 'lossy' compressed file format, making them smaller in size
  • PNGs are for graphics and drawings. They are a 'lossless' compression file format, meaning that photographs in this format will be much larger.


When to use a PNG?

You should use PNGs when you have photographs or graphics that have transparent backgrounds. Therefore, you will be able to see the backgrounds behind them when placed on to your web page. If you have a fixed colour background, then you can consider making the image with the same colour background and saving it as a JPG. This will reduce the size and improve page load speed.

JPG or JPEG?

There really is no technical difference and the file extensions are interchangeable. Way back when Microsoft limited their file extensions to three letters, they shortened JPEG to JPG. Mac isn't limited to 3 characters and can still use JPEG. 


FILE SIZE HEALTH CHECK

It's often best practice to frequently run a health check on your website and one of the most important things that you can do, is an Image Size Health Check.

  • Go to the 'Files' area.
  • Notice the 'Sort File' drop down towards the top right of the page.
  • Select 'File Size Largest'.
  • Select 'Image' and click search.
  • Now your images will be listed by File Size from largest to smallest.
  • If you were to optimise your images you could start from the top and work downwards.
  • Quick improvements would be to replace any PNGs with JPGs
DirtyFeet Image Health Check

The Files area displaying Images sorted by File Size Largest