Canva is a free or paid diy-friendly design tool for social media graphics and blog graphics too. But… if you stick to their default recommended settings for exporting your images, they will be huge file sizes and slow your site down! (Cue dramatic music.) This Canva Image Optimization guide will get your images loading snappy!
Free/Premium Image Creation Software
Why is it Important to Optimize Images?
It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, yet most bloggers completely overlook it.
Step 1. What size should you make your Images?
Featured Images: use/create Featured images that are 1200px wide. This is an ideal width for sharing on Pinterest, Facebook, Twitter, and more. Height is variable blog to blog, so test what will work for yours. Most of the time, a 2:3 ratio works best. That would suggest a 1800px height. Increase or decrease, just be consistent.
Post Content, Logo, Sidebar Images: For all other images, I create the image at 2x the size it will display at, for example, a sidebar ad is typically 300 x 250 pixels. When creating the ad, I’ll actually create it with the dimensions 600 x 500. Why? Retina devices – Laptop computers, smartphones, iPads, and hi-def monitors have changed the web. They need a lot more pixels to display an image crisply.
Sidebar Images: 600 px wide
Logos: 400px to 800px wide – depends on how large it will display at
Inner Post Images: most blogs with a right sidebar have a left content area of between 600 – 800px wide. Double that width for retina versions, making them 1200px to 1600px wide. Height is variable.
Step 2. How to Export Optimized Images in Canva
Canva Export / Download / Optimization Steps
- Create your Images with dimensions from above.
- Adjust positioning of desired image over this template
- Click Download button in top menu
- Change File Type to JPG
- Quality is pre-set to 80. You can’t change this on Free plan. 80 quality works well for this size.
- Click on the purple Download button.
Step 3. How to Compress Images Even More
Find your exported images from Canva and then optimize/compress them even more with the help of an online or desktop-based compression tool. This extra step will compress your image another 25-75% without any noticeable difference in the image. Safe to use with JPGs and PNGs.
Online: Optimization Software
Mac: Bulk-Optimization Software
Desktop – Optimization Steps
Locate the downloaded Canva JPG image in your Downloads folder.
If using ImageOptim:
Double-Click the ImageOptim app icon on your Desktop
Click on the Plus icon in the lower-left bottom of the pop-up to add an image to be optimized. OR… you can drag/drop the image from your downloads folder and then release your finger or mouse once the file is on top of the ImageOptim pop-up.
The original image will now be compressed automatically and saved, you don’t need to download the optimized version.
If using Squoosh:
Double-Click the Squoosh app icon on your Desktop or in your app menu at the bottom of your screen, to open it up.
Click on the Plus icon in the middle of the pop-up to add an image to be optimized. OR… you can drag/drop the image from your downloads folder and then release your finger or mouse once the file is on top of the Squoosh app pop-up.
Select MozJPEG and a quality that lowers the file size without degrading the quality. I suggest to start at 60 quality.
Click on the blue Download button.
Done. Upload the Image to WordPress
Remember to use good SEO practices and to change the name of the image to use relevant keywords in the filename before uploading the images to WordPress.
image01234567.jpg renamed to
After checking/adjusting your filenames, your image(s) are now ready to be uploaded to WordPress. Remember to set the Alt text for the images.
Keto Apple Pie Recipe Baked Off Apple pie on plate
Bonus Step 4. ShortPixel Image Compression
Congrats on optimizing your image as much you could before uploading it to WordPress, it really makes a huge difference in image size and SPEED. Now we’re going to let the plugin ShortPixel Image Optimization take our efforts even further and add their magic touch to our images.
If you haven’t already, Sign-up for your own ShortPixel API code.
Go ahead and copy that down. We’ll use that very soon.
Next download the ShortPixel Image Optimizer plugin from the WordPress Admin area Plugin directory. Make sure it’s the correct plugin, we do not want their Adaptive images plugin. The plugin looks like the following…
Next, go to my ShortPixel Image Optimizer Settings Guide >>