Search code examples
htmlcsswordpresspluginsblurry

My wordpress gallery page images are blurry

I have done my gallery page with Media grid plugin in wordpress, but after the gallery published in the page, the thumbnail images are bit blurry (but lightbox images are okay), so i want it to be fixed by CSS code. i have attached the screen shot. This my gallery page

Solution

  • The browser applies anti-aliasing to resized images by default to make them look better. If you prefer to undo this behavior, use the image-rendering css property to undo the anti-aliasing.

    img {
  image-rendering: pixelated;
}

    Here's an article with a good explanation:

    https://css-tricks.com/almanac/properties/i/image-rendering/

    A better way to resolve this (for performance) would be to use a lower resolution image file for your thumbnail, and only load the full sized image when the lightbox is opened.