Here at Burfield we build a large number of websites on top of the open source CMS framework WordPress. WordPress has been around for a long time and thus many of our clients come to us having previously owned or managed a WordPress site.
During the design and build process a question we get asked a lot is
What size do I need to make my images?
Thankfully with the advent of Responsive this question is no somewhat mute. Allow me to explain…
All of Burfield’s websites are now Responsive by default. As a result this means the website is “fluid” in nature, expanding and contracting in relation to the size of the browser window or device on which it is being viewed.
As a result of this fluidity, images are naturally no longer a fixed size. Rather they expand and contract in size and proportion depending on the size of the screen.
Many of our clients mistakenly believe that this means they will have to manually create images at all the different sizes required to display correctly on different device sizes. Luckily however, all of our websites come with automated image resizing as standard. This means as our client you never have to worry about resizing images again – just upload and forget!
But seriously…I need to know what size my images should be?
Ok, assuming you’ve read the note on Responsive images above then you’ll be familiar with the concept that we can no longer provide you with fixed dimensions for your images.
Here at Burfield our standard policy is to advise our clients to upload images at approximately 1200px (w) x 1200px (h). Providing images at this size means that WordPress (and our custom in-house code) are then able to work with good quality images, automatically scaling and resizing them as required to suite the needs of an individual template.
What if my images aren’t that big?
Providing images smaller than this size is not advisable because scaling images upwards will result in grainy artifacting appearing within the resized image. Always upload the best quality image you have available up to a maximum of 1200px x 1200px.
What if my images are larger than 1200px?
Conversely, providing images larger than 1200px in size is also discouraged, as uploading excessively large source images will consume unnecessary disk space on your server, potentially leading to increased hosting cost. To avoid this we can help you crop your images to a suitable size.
How should I crop my images?
This is another common question. As images are now no longer a fixed size, we now advise all our clients to avoid focusing on pixel dimensions and instead crop all their images to a predefined aspect ratio. This aspect ratio will be provided to you by your designer during the website build process.
The aspect ratio required may vary throughout your site from template to template, but every effort is made to achieve a uniformity across the various pages to avoid the need for unecessary cropping.
Some common aspect ratios for images are 16:9 and 4:3. We discovered a couple of useful tools to assist you in determining the pixel values to match these ratios
- size43.com/jqueryVideoTool – simply enter the desired width and the tool outputs the correct height value to match a 16:9 ratio.
- size43.com/jqueryVideoTool-4×3 – as per the above except for a 4:3 ratio
- andrew.hedges.name/experiments/aspect_ratio – this tool allows you to calculate more complex bespoke aspect ratios.
So for example, if your template required images suitable for displaying in a 16:9 aspect ratio, you should art direct your photo so that the primary subject is visible in a image to approximately 1200px (w) x 675px (h).
We hope the advice above is useful to our clients. If you’d like to know more about Burfield’s Responsive Web Design services then please get in touch today.