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.

_{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 1000x1000px

For square images, size images to 1000x1000px. 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
• 1000x1000px (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.

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.

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