Solve a blurry Canva image

Canva is the bee’s knees. If you don’t have access to Adobe products, can’t wrap your head around sketch, and want to be held by the hand a little… Canva is for you.

But one thing that can happen with canva is blurry images. This is due to is being great at cutting out unnecessary stuff (optimisation) but not so great at keeping all the information to keep it super crisp.

Making images for the web is a balancing act between image quality, image size, and canvas size. Totally different beasties.

Now, to be fair I made these images in Abode Illustrator… but what I say goes for all images.

Exhibit A.

Exhibit A.

Ew. Pixelated and not happy. Vital stats: canvas size 602×400 pixels, 77KB, resolution 72ppi.

Exhibit B.

Much better, clear and pretty. Vital stats: canvas size 602×400 pixels, 265KB, resolution 300ppi.

The cost of having these prettier images is size.  Bigger page sizes take longer to load,  search engines will penalise sites where the images aren’t scaled or optimised (if you have a 3000×1000 pixel image in a slot for a 300×100 pixel image, it’s waaaay bigger in terms of cnavas size and data than it needs to be, so you lose brownie points).

But if you’re using your image for a facebook header, instagram or the like and you’ve made your image to the canvas size that site wants… and it’s blurry? Up the canvas size and let that site compress it for you. Make sure your calculations keep the aspect ratio the same.

If you have canva for business, you can actually change the canvas size of an existing design. Otherwise, you’ll have to make it again.

If you’ll use that image later on your own website, pay attention to its placement and trade off quality/canvas size/data size and make the best call for your use.