Grainy images on Participants Pages on TeamRaiser.

Can you share a link of the page where the pictures are like this?

Oh ok, I see the issue. At desktop, the images look fine to me, but if you shrink down the window and eventually get to 767px and below, there's actually a few containers that contain media queries and resize to 100% width. The images themselves already have 100% width, so for example once your window hits 767, your picture stretches to fit that entire area, nearly doubling the size the image by stretching it, causing it to look blurry. There's a few ways you could solve this, but the easiest would be to add a max-width of 300px to the images themselves.

No worries!


Those are 2 different things. What's happening right now is that you've uploaded an image that has been saved at 300x400px, and that's working perfectly fine for your desktop layout. But your page is responsive, so as the size of your window shrinks, the elements on the page will shrink with it. When the page width is down to 767px or below, that image is being told in the page's css to take up 100% of the width of it's parent element, which is also being told to occupy 100%. So the result is an html element that spans the entire width of your screen, and a picture that is also 100% of the screen. However, this causes the image to stretch because it was only uploaded to be a max of 300px wide.


So really, you have 2 options that are fairly easy to implement.


1. You can add a line of css to your code that targets those specific images and tell it to set a max-width of 300px. This is the option I would choose.

2. You could resize and save your pictures to be a larger size, something like 800x1067 to keep the same aspect ratio. The issue with this option is that you're increasing the file size of each image, creating more for the browser to load because it's a larger picture/file size. However, this would leave you with clear pictures when they stretch like that.