How does The Great Discontent website have such sharp full-screen images?

[croydon86]

Hi all

I was on [The Great Discontent Website](http://thegreatdiscontent.com “The great discontent website”) and was amazed at how clear their full-size images are.

For example. their current post (Jeffrey Even) features an image with modest dimensions of 800px x 677px and only around 80kb. Yet when viewed full screen on my 27″ mac the image is still sharp, which makes no sense to me as an image of that size would definitely be blurry when scaled up.

The image is being served through an IMG tag. There is no CSS background image or data attribute in the code (where the bigger image could load from) so I am not sure how this is being done.

Would love to know if anyone knows how the great discontent achieve this result.

Thanks

[Paulie_D]

Probaly being swapped out with JS.

[croydon86]

ahh right. Of course!

Lazy loading plugins generally work by having the larger images in data atrributes, and a very small-sized placeholder in the image tag. This is why I avoid lazy load plugins as not having my images in image tags is a cause for concern regarding no-jS users and SEO.

However, i’ve noticed though he is calling the low-res images in the IMG tag and then lazy loading the hi-res image. While this solves the above, this causes two downloads.

So first image downloads – 80kb
Then once page loaded, another download – 280kb

But then as it loads in the background, maybe it is not so much of a problem? What do you think?

[Paulie_D]

Depends on the dimensions of the placeholder…if it’s desktop sized and full screen…it’s OK.

I wouldn’t do it for mobile though.

[croydon86]

Thats what I mean though, the great discontent haven’t really used a placeholder, they have used the actual image instead of a placeholder.

By placeholder I mean like a tiny file (1kb) or something. Then load in the relevant image via lazy load. Problem with this is there is no actual image in the img tag, which can be a problem. But if you do include the low-res image in the image tag, then you allow double downloads.

@Paulie_D – Mobile wouldn’t be a problem anyway as that will download the lower sized image anyway. Only bigger screens will download this, plus the bigger size.

[Kitty Giraudel]

> This is why I avoid lazy load plugins as not having my images in image tags is a cause for concern regarding no-jS users and SEO.

What about a noscript tag containing a medium-sized image?

[ryanessmaker]

For the header/cover photo we’ve actually used the Responsive Images technique by Filament since we launched: https://github.com/filamentgroup/Responsive-Images

I’ll probably wind up switching to Picturefill in the near future: https://github.com/scottjehl/picturefill

Occasionally, we do use jQuery Unveil for the images in the interview body, which helps with interviews that have larger assets.

[croydon86]

ahah! Thanks for confirming @ryanessmaker

@Hugo Giraudel this is true, but from what I understand, google indexing images within noscript tags is a bit of a grey area. But the noscript tag is definitely recommended for the js issue.

[Author]

Posts