Are dotted pictures a new trend in Web Design?

Question

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

Answer 1

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.

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.

Answer 2

After looking at the code on the website, there is a .png that is set to repeat over the image. The image can be found at: http://grandpixels.com/linguini/wp-content/themes/linguini1.7/images/bg-overlay-pattern.png

Hope this helps...

Answer 3

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.

Answer 4

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.

Answer 5

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).