Managing WordPress Image Size
with Canva

February 16 2016

James Hipkin

Managing WordPress image size can be daunting. There are lots, and lots of places to find images. Some are free and some you need to pay for. But many struggle once they have the image.

What size should I upload?

Why do the images look odd or stretched or out of balance?

There are also performance implication tied to image size. If a full size image is uploaded, WordPress will resize the image, but it still needs to download the full sized image before it does the resizing. This is a lot of data to be moved, which will affect page load performance.

The best way to solve this is to manipulate the images outside of WordPress so that they are the correct size before they are uploaded.

“But I’m not a designer, I don’t have or know Photoshop.”

No problem.

Canva is a user friendly tool that you can use to manipulate your images before they are uploaded into WordPress.

Managing WordPress Image Size – 10 Simple Steps

  1. Managing WordPress image size starts by determining what the image size needs to be. If the theme suggests several sizes then use the largest one. For example, WooCommerce recommends that a square image be used in three sizes. Provide the largest, 600px x 600px, and WordPress will resize it to create the smaller sizes that WooCommerce needs. This is true for Featured images and images you place in posts.WooCommerce recommended image sizes
  2. To create the 600px X 600px image, sign up for Canva – this is a user friendly design tool. It’s so easy even I can use it.managing wordpress image size with Canva
  3. Use the dimension above, 600px X 600px, to create a design template by selecting “Use custom dimensions.”Canva custom image size
  4. Canva Left Sidebar NavigationSelect Uploads from the choices in Canva’s left sidebar.
  5. Upload the image you wish to adjust.
  6. Click the image you just uploaded to place it into the design frame you created earlier. Ideally the image you plan to work with is larger than the final size and has a similar aspect ratio. Making the image smaller is OK but making it larger will decrease the quality. You can certainly do this, make an image larger to fit the design template, especially if it was a high resolution image to start with, but the quality may be impacted if you ask it to become a lot larger.
  7. Move it around so that the image is composed as you wish within the design template – you can change the background color to match the image background if there is a white bar, which can happen when the aspect ratio isn’t the same as the template you created. Select Background from the choices in the left sidebar navigation.
  8. There are times when some text on the image would be a good idea. This is useful for image oriented social media channels like Pinterest. Select Text from the left sidebar to add text as an overlay. You can adjust the shape of the text box, and the font, color and size of the text.funnelSm
  9. When you are happy with the layout select the Download button. You will find it in the upper right corner of the screen. Choose “Image: for Web (JPG)” from the presented options.Canva Download
  10. Upload this image into your content in WordPress and use it as desired.

This may seem like a lot of steps, I provided a lot of detail, but managing WordPress image size is really quite easy and the process will go quickly once you are in the flow.

We have no relationship with Canva, we just think it’s a cool, inexpensive product that allows non designers to manage images and create visual assets for WordPress without climbing the Photoshop learning curve.

No Comments