: Are dotted pictures a new trend in Web Design? 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

@Berryessa866

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.

Vote Up Vote Down

@Merenda852

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. :) goo.gl/d0OYOO

Vote Up Vote Down

@Cofer715

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

Vote Up Vote Down

@Barnes313

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.

Vote Up Vote Down

@Gretchen549

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.

Vote Up Vote Down

@Murray664

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

Vote Up Vote Down