Pixilated graphics when using three or four column grids

Dec 13, 2023

Sarah Harold
By Sarah Harold

Hi there,

So I've been trying to incorporate using three/four column grids into my lessons but there is always some pixilation that happens with one or more of the graphics when uploaded. I've attached an example of a three column grid, where both graphics were uploaded with the exact same dimensions and pixels, yet the one on the left is pixelated. The third image (not pictured) is also pixelated. When you click on the images to enlarge, they are not pixilated. However, when just in the lesson at the grid size, they are. Is there any solutions to this?

3 Replies
Tom Kuhlmann
5 months ago12/15/23 at 12:24 am (UTC)

A couple of considerations with images:

  • Raster (bitmap) images are made of pixels. If you scale the image up or down, you'll get some degradation. Sometimes when you nudge the browser window up or down, you may notice the image pixelation change and sometimes look a bit sharper than the other.
  • If you use a vector image like SVG then you won't get the pixelation because the image is made up of vectors rather than pixels. Not sure of the source of your image, but it looks like an illustration (assuming you made it) that could be output as an SVG.

Here are some tips on working with images. There's a tip on removing compression. 

Sarah Harold
5 months ago12/15/23 at 10:14 am (UTC)

As some looked pixilated while others didn't, when both would be the exact same size and file type, I didn't think to try svg. I've tried it there and it definitely improves the problem. Although some of the graphics still seem to retain that pixilation, not sure why or the connection for some to be fixed while others are not. Vector would be ideal but unfortunately not possible for me at the moment. Thanks for the svg suggestion though!

Sign In to Reply