I've noticed lately that some of the websites I visit regularly are adopting a new and bizarre trend in Web Design: "the dotted pictures". Not sure what to call it. It looks as if a pattern of regularly-spaced dots was deliberately layered on top of all thumbnails, or sometimes it's a light grid pattern instead of dots, but the end look is similar. It looks like a dithered picture somewhat.

I personally find the effect terrible and at first I thought my browser image rendering was at fault, but I tried 3 different browsers and I can still see the pattern. Looks like it was intended.

Actually, one of the websites that used to do that went back to regular pictures. It was a newspaper website and I suspect they got a bunch of calls asking why their pics were all messed up and reversed the decision after a few months.

Has anyone heard or seen this before?

Example link: http://www.linkedin.com/today/se/editorspicks

  • 1
    how about some examples?
    – Dan Hanly
    Commented Aug 21, 2012 at 14:20
  • Sorry I meant to post one, I just updated my question.
    – md1337
    Commented Aug 21, 2012 at 14:21
  • 3
    No, it's not a new trend.
    – DA01
    Commented Aug 21, 2012 at 16:57
  • 1
    Worth noting that it can cause distracting moire effects when the image is scaled, e.g. on a smartphone browser.
    – e100
    Commented Aug 23, 2012 at 10:24
  • 1
    I dont see it...
    – Alex
    Commented Nov 21, 2012 at 11:25

6 Answers 6


In the past, I've seen this effect used to enhance a feature of the image. The link you posted seems to be doing it needlessly.

See http://demo.grandpixels.com/?theme=linguini

The text on the main slider images really pops because the grid/dot style overlay darkens and blurs the image slightly, making the white text seem even more white and clear.

The images on my link look great, and the overlay image serves a pretty clear purpose, and that's to enhance the message of the text; something it does quite well.

enter image description here

Without the grid overlay, the white text would blend into the cheese behind.
They needed a style that will work for any image behind, light or dark, and for the text to not lose it's impact when displayed over any background image.

Your linkedin example shows how it shouldn't be used.
More often than not, Graphic Design is a science more than an art, and effects such as this shouldn't be used because "they look good", they should be used because a clear purpose has been defined for it's use, and it's use is justified in the context of the page.

  • Great tip about how the grid overlay helps the text stand out from the picture.
    – jhocking
    Commented Aug 21, 2012 at 15:10
  • I can see the use in limited cases as in your example. Otherwise it's just a gimmick. I just got really curious as I started seeing this on more and more websites lately and I think there is some kind of trend building up. Hopefully it will die off just as quickly. As a friendly side-note I find your technical implementation of it sub-optimal, it's quite slow because you use a repeated 2x2 background and it puts a lot of strain on the browser to render. I would increase the overlay size considerably and you will notice a huge improvement in page scroll response.
    – md1337
    Commented Aug 21, 2012 at 16:53
  • Cheers. However, it's not mine, I just found it on the web ;)
    – Dan Hanly
    Commented Aug 21, 2012 at 17:14

The pattern overlay is a useful design tool and it can serve a few purposes. As previously mentioned, it can help visually separate graphic elements on the page, but it also helps hide imperfections/jpeg compression artifacts in lower-res images that are being oversampled to fill an HD (1920 x 1080) display.

I will sometimes use a pattern overlay to unify the appearance of a collection of images. If I have 6 images that are shot really well and 3 images that are not so good, putting a pattern overlay on them helps even them out and make the transition between the good and bad images less dramatic.

Here is an example where I think the pattern overlay works pretty well although I bet you will have a hard time trying to convince the original photographer that it's an improvement. :) http://goo.gl/d0OYOO


The effect actually comes from the earlier days of web-optimization.

The dotted effect would be applied to images which were compressed so much that they began artifacting. The "dotted grid" would hide these artifacts and make the image seem less compressed.

It then spread as a normal effect, and as Daniel says, it can make or break an image. If it's used right (as with most other effects) you can get great results.


I think in the case of your example, it was done to obscure the images slightly.

I also think it is a throwback to previous styles.


The reason is to mask the low resolution of the image. Using a low resolution image can improve website loading times and make Google happy. So from an SEO perspective it´s a trend.


I can't tell if it's a trend or not. But if it is – and my interpretation matches the idended effect (referring to your Linkedin Editor's Pick example), I think it's an interesting concept that might just hold some weight, not just fluff.

Quite possibly, this could be a bit of a stretch, but to me, it looks like what they might be trying to achieve is to signal that this image leads to content/articles that resides elsewhere (i.e. outside material; not within the current site). Almost as if you're kind of 'peeking' through a small window, into some other place – adding depth (another layer) which, from a usability point of view might actually prove potential in certain contexts.

I'll admit I'm not sure of the execution in the example you gave; the effect doesn't work optimally on half of the images (primary problem being that this concept doesn't pan out equally well on images not being photos).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.