How to Size WordPress Images

How to create the ‘right size’ of image is one of the most common questions we receive. It was common in 2009 and it’s common 10 years later. If you’re frustrated with unpredictable results with your images you are not alone! Hopefully this little tutorial will simplify things.

Step 1: Sizing Images for WordPress

Any images for WordPress should always be 1700px wide nowadays and whatever tall. That’s it. That’s the rule. Read on if you need to know why.

It is important to keep the width in mind for all the beautiful full-width images we see in today’s designs. It is also nearly impossible to state the height of images because responsive design changes the height depending on the size of the device.

Mobile Responsive Design Testing

Best Practices for Sizing Photos in WordPress:

  • Width: Just because your theme’s widest column now is 700px doesn’t mean it always will be! Keep your future choices open by uploading something plenty-wide… 1700px.
  • Retina Displays: For all the screens using retina displays and better, the resolution needs to be twice the size as usual. So instead of uploading an 800px wide photo, upload a 1600px photo… or 1700px and let WP resize it for you.
  • Reduce “Weight” While working with photos of this size you need to keep the quality in check as the MB size can slow down the loading time of the page. To reduce size, but not quality, open in your photo editing software (or picmonkey) and then ‘Save for Web’.
  • Maintain WordPress Speed: A great idea to handle size is to use a CDN (content delivery network) such as Cloudflare.

Step 2: Maintaining Ratio for Post Images

Step two to keeping your site images uniform and prevent cropping: edit your original photo to the same ratio as the output. If you do this, you will have control over your photographs’ composition. To view more on how to prevent cropping see this.

Example 1: create the original in the same ratio as the post image

1-2-RATIO

And another example with a portrait ratio:

2-1-ratio

If you follow this 1-2 step procedure you’ll have complete control over the display of your photos every time – regardless of theme.