Resizing images for responsive WordPress websites

tldr: think about the design of your page and where your image will go before you size and upload it. If it’s going to be a full page image, you want to upload it at large size. If it’s only going to take up a ½ column on desktop, you want to shrink that down before uploading it to save a lot of space. Same goes for ⅓ and ¼ column images.

Quick disclaimer – this image guide mostly pertains to the Divi theme. Every WordPress theme handles images differently, but this guide will help you understand the concepts so you can apply them to your situation.

Another factor to consider is a ¼ column image on a desktop usually becomes a full column on mobile. Mobile devices often use HiDPI screens. This means that an image that’s sized for a ¼ column on desktop will look blurry on a modern mobile device. One way to combat this is to use a large image, to begin with, which will size down and look incredible on a HiDPI or Retina screen.

With these things in mind, you have 2 choices. You can opt for a speed focus or a HiDPI focus. I’d suggest considering the users of your site when making your decision. If it’s a luxury or upscale audience, you want the images to look as crisp as possible. If your audience really doesn’t care and just wants to consume your content or convert quickly, opt for a speed focus.