2 Step Process to the Perfect Image Size Every Time

If you’re frustrated with unpredictable results with your image uploads, try this two step process. It will get you the result you need every single time.

Step 1: Sizing Images for WordPress

Any images for WordPress should always be 1700px wide nowadays and whatever tall.

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 widest column now is 700px wide doesn’t mean it always will be! Keep your future choices open by uploading something plenty-wide.
  • 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.
  • Reduce Quality: While working with photos of this size you need to keep the quality in check as the MB size can slow down the page and even the server if you’re not careful. To reduce 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.