Optimising Images

CHEAT SHEET

Let's start with a summary and then we'll look at each in more detail.

Image Optimization - Summary of Image Orientation

The content on this page comes from Craig's article, Image Optimisation: Image Sizing & Page Speed [ULTIMATE GUIDE][themify_icon icon="fa-external-link" style="small"]. Check out the article for the full picture of the issues involved.

Featured Image

The Featured Image for our blog Posts has it own special specs, as we set it to comply with Facebook's requirements. We do this so that when we post the URL to Facebook, it displays optimally.

Click here for specs...

Okay, let's now consider each in turn...

(Slim-Fit) Full-Width Images

[caption id="attachment_5130" align="aligncenter" width="900"] An image displaying optimal specs for image optimization and Slim-Fit Full-Width Images.

If you're displaying a single image, use a width of 1366px and keep the image size below 400KB. If you're displaying a slider of images, use a width of 960px and keep the image size below 200KB. It's also advisable to stick to less than 6 images in a slider, especially on the Home page.[/caption]

(Full-Screen) Full-Width Images

[caption id="attachment_5133" align="aligncenter" width="900"] An image displaying optimal specs for image optimization and Full-Screen Full-Width Image.

An image displaying optimal specs for image optimization and Full-Screen Full-Width Image.

If you're displaying a single image, use a width of 1366px and height of 768px (ratio 16:9) and keep the image size below 400KB. If you're displaying a slider of images, use a width of 960px and height of 540px (ratio 16:9) and keep the image size below 200KB.[/caption]

Indented Images

[caption id="attachment_5182" align="aligncenter" width="900"] An image displaying optimal specs for indented images and image optimization.

If you're displaying a single image, use a width of 1200px and keep the image size below 400KB. If you're displaying a slider of images, use a width of 900px and keep the image size below 200KB. Again, use less than 6 images in a slider, especially on the Home page. Remember, the amount of space allowed on each side will depend on the viewing device.[/caption]

In-content Images

[caption id="attachment_5135" align="aligncenter" width="900"] An image displaying optimal specs for in-content images and image optimization.

If you're displaying an in-content image, make sure your longest side is a maximum of 300px and keep the image size below 200KB.[/caption]

Other In-content Images

[caption id="attachment_5136" align="aligncenter" width="900"] An image displaying optimal specs for special in-content images.

While normal in-content images serve to enrich and space text, using graphs, portfolio images, infographics and the like, serve as important components of the content itself. Hence, they're typically larger than normal in-content images. In this case, make sure your width is a maximum of 900px. (Graphs and portfolio images tend to be landscape in orientation while infographics tend to be portrait in orientation.) Again, keep the image size below 200KB.[/caption]

Thumbnail Images

[caption id="attachment_5137" align="aligncenter" width="900"]

If you're displaying thumbnail images, work to a maximum width of 1,000px (because you'll no doubt want to allow space on the either side of the end thumbnails). Divide the space by the number of thumbnails you want. Three thumbnails? Use images with a maximum width of 300px. Four images, go for 250px each. And so on. Keep images below 100KB.[/caption]