Correct Image Sizing for your WordPress Site
This post is more of an ' aide-mémoire ' than a full on public post, but what tends to happen on a fairly regular basis is that I don't do any photography for months at a time, and then when I do I completely forget the image sizes that I need to work to, in order to keep the images to a reasonable size when posting here to my blog. So hence the post, and the chance that I will be able to remember what I did the previous time, so that I am able to get some consistency on my site.
Understanding the right image sizes to upload to your website.
OK. Before going much further, I want to state the CMS system that I am using, the template, and my thoughts about what I want from the site, namely speed, but setting these out at least helps anyone in a similar situation understand my motives and can perhaps copy these ideas into your own websites.
My blog is:
- Hosted at Digital Ocean
- Built on the WordPress.org CMS (Content Management System)
- Using Cloudflare CDN (Content Delivery Network)
- Using StudioPress theme - Breakthrough PRO
The theme sets out the image sizes that are required:
- Front page banners are: 1600 x 420px
- Featured images are: 660 x 440px
- Large portfolio images are: 2500 x 1667px
My Sony A7iii produces images at 6000 x 4000px, and ideally I want to keep the ratio of 3:2, so that when I work on the images in CaptureOne, the resulting images will be downsized to 2500px wide, and 1667px high in order to maintain the same ratio. Even with images that I took some years ago, I can maintain the ratio and keep the images looking the same on my site. Getting the composition right before you resize helps — I use the Fibonacci spiral guide in Capture One to frame shots before they ever reach an editor.
This is especially important for my 'Featured Images', which will all be 660 x 440px, then they will all align correctly on the Blog Posts page.
SO, going forward I need to make sure that all my images are 2500 x 1667px, in landscape format. Once you have the dimensions sorted, adding a clean white frame before uploading lifts images considerably — creating white frames with Photopea is free and takes about 30 seconds per image. The recipe that I will use to export images from CaptureOne will be the following:
- Image file: .jpg
- Image size: 85% quality level
- Image sharpening: Save for screen
And to conclude, I am hoping that from now on I will start to get more consistent images appearing on my site.