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)
For the web, it is important to optimise the image more like this:
1440x810px (aspect ratio 16:9)
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:
1440x810px (aspect ratio 16:9)
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 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.
8100x810px (aspect ratio 1:1)
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.
Circle + Shadow Image
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
The Files area displaying Images sorted by File Size Largest
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
MOBLE. A WEB BUILDER FOR DESIGN. A CMS FOR BUSINESS.
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.