- This topic is empty.
July 20, 2013 at 5:49 pm #46573
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.
ThanksJuly 21, 2013 at 3:45 am #143830Paulie_DMember
Probaly being swapped out with JS.July 21, 2013 at 6:55 am #143856
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?July 21, 2013 at 7:15 am #143861Paulie_DMember
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.July 21, 2013 at 7:22 am #143863
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.July 21, 2013 at 12:15 pm #143871Kitty GiraudelParticipant
> 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?July 23, 2013 at 8:10 am #144220ryanessmakerParticipant
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.July 28, 2013 at 6:33 am #144882
- The forum ‘CSS’ is closed to new topics and replies.