|

Our themes are mobile – what about image sizes?

The most common question we get is about image sizes. Your SEO expert will tell you that they need to only accentuate the text part of the post. And that the speed of the page is the most important thing about photos. Your hosting company, ad company and anyone else who maintains your site will say that the images need to be small – the smaller the better – because then the page is faster! And faster is good for user experience and therefore, for SEO.

However, if you’ve ever changed themes or tried to line up your images in a nice row you know that if the image isn’t ‘big enough’ they are annoyingly difficult to line up!

My recommendations have always been the following:

  • 900px wide (then 1200px, then 1600px, now 2000px)
  • and whatever tall

Here is what that means:

Width: The width that I recommend has changed as the internet sped up. And caching and CDN tools became more mainstream. When we first started blogging, images used to load s l o w l y. Now you can easily load a 2000px wide image on almost any network.

Note: if you do not create your images at 2000px wide (or similar) the photos will not re-size properly on every theme change. So all those photos from the last six years of blogging will have to be re-sized and re-uploaded.

Height: The ‘whatever’ height simply indicates that if your width is 2000px wide your images have to be whatever tall so that they don’t skew. You can’t squish your images into a certain height or they will look smushed or skewed.

Examples:

We started with a photo that was 4000px wide to get these two sizes:

  • if you have a landscape photo it will be 2000px by 1400px (or similar).

  • if you have a portrait shaped image, it will be 2000px wide by 2700px tall.

 

So upload your images large and let WordPress cut them into the right shapes! A modern coded theme will only load the images in the right size for the page that is being viewed. And most of the time it is recommended to use an image optimizer plugin – which means your images are loading perfectly!

Let me know if you have questions!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *