How to Create Images for your Website with Canva

Creating images for your website can be daunting. There are lots, and lots of places to find images. Some resources provide free stock images and some you need to pay for. But many website owners 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 implications tied to image size. If a full-size image is uploaded, WordPress will resize the image to the dimensions determined by the theme, but it will still use the full-sized image if it’s asked for. 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 create website images before they are uploaded into WordPress.

How to Create Website Images – 8 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 a square image in three dimensions. 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.
2. To create a 600px X 600px website image, sign up for Canva – this is a user friendly design tool. It’s so easy even I can use it.
3. Use the dimension above, 600px X 600px, to create a design template by selecting “Use custom dimensions.”
4. Select Uploads from the choices in Canva’s left sidebar and upload the image you wish to adjust.
5. 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 the 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.
6. 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.
7. 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.
8. 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.

Now you can upload the resized image into the Media Library in WordPress and use it as desired.

This may seem like a lot of steps, I provided a lot of detail, but creating website images is really quite easy, and the process goes quickly once you are in the flow. To help, we made this cool infographic. Subscribe to our newsletter, and you can download it.

Download Create Website Images with Canva

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