For the best results, please use these best practice guidelines when populating or updating your content.
When adding new images or updating images on your website, it’s best to optimise those images before you upload them. This includes:
While most of the website we create come with an Image Optimisation Plugin, it’s still important to optimise your image before you upload them as this improves the overall result.
We recommend using Photoshop or a free alternative such as Gimp to correctly resize your images and reduce their File Size.
There are also online tools that can compress image file sizes for free, such as tinypng.com.
For the best results you can combine Filesize optimisation in Photoshop/Gimp with final compression in TinyPNG.
As a general rule of thumb, you should aim to get most images on your website to be less than a maximum of 100kb, however most should be much smaller than this.
It may not be possible to get some larger or more detailed images below 100kb. In this case, reduce the image size as much as possible without there being a significant impact on visual quality.
Not to be confused with reducing the File Size, resizing images referrers to changing the dimensions of the image.
For example, using an image that is 1920px x 1080px in and area that is only 300px x 168px is bad practice as the File Size will be much bigger than it needs to be, even if you optimise it.
As with Optimising your image File Size, for Resizing images we recommend tools like Photoshop and Gimp. There are also free online alternatives such as Adobe Spark.
When adding images to your website you want them to be no bigger than the biggest size they appear on your website. If they are too big, the File Size will be unnecessarily high and if they are too small, they will be scaled up which can lead to poor visual quality.
In most cases, your images will be shown at their biggest when viewed on Desktop Devices (Computers, Laptops, etc).
In some cases, images may appear bigger on Tablet and Mobile devices as the layout of the page adapts to the different screen sizes. So it is important to check exactly where your image displays the at its biggest and use those dimensions when resizing.
To find image dimension in Chrome, simply:
(A) is the value you should use when Resizing your images.
In the example below, (A) is 247px x 340px and (B) is 332px x 456px. In this case, the actual image dimensions (B) are bigger than the area it is being displayed in (A). So in this case the image should be resized for the best possible results.
Images can come in many different File Types (jpg, png, gif, svg). Each with their own pros/cons. Some filetypes can be optimised more than others, or work better for different types of images.
jpg/jpeg – best used for photographs or graphics with lots of colours and detail.
png – best used for simple graphics with few colours or any image with transparency.
svg – best used for simple graphics, icons, logos, etc. svgs are vector-based meaning they retain the same quality when scaled.
gif – best for very simple graphics with very few colours and transparency and any image with animation.
For the best SEO results. It’s good practice to name your images descriptively.
For example, if your image is on a page relating to web design in a section talking about WordPress, you want to name it something like wordpress-web-design.jpg.
