Posted by Kathryn Mitchell on


I create most of the banner and slider images I use on the website I manage on Canva but when I upload them to the website, they seem to lose some pixels and appear slightly blurry.

If I download an image from unsplash / pixabay or any other picture website like that, the images upload fine and without pixels.

Is there anything I can do to make the images I create upload clearly (with no blurr)? I've tried uploading jpg and png images from Canva. Is it just a case of playing around with different image types?



Posted by Joe Oldak on

Hi Kathryn,

Can you show me an example of where the images are blurry, indicating which ones came from Canva?

In theory there's no reason for images from one source to be more blurry than another - the key is to ensure a high enough resolution of source image.

For the sliders, Voice will use images resized to 1140 pixels wide (as this is the max width of the bootstrap-based themes). So if your source image is at least this big then it should work well!

If your source image is less than (or exactly) 1140 pixels wide then it'll use the image as it is, and the browser will scale it up to fill the available space.

If it still looks blurry after checking the image size, then maybe I need to look into whether the system should create extra-high-resolution images for use with retina displays (which have lots more pixels). They key disadvantage to this would be that images would be much larger and slower to load.