Lazy load Archives

When was the last time you visited a website with no images? As web designers, we love adding images to our designs because images are memorable and give us a direct channel of communication to the audience’s brain. Also, images are universal and processed by our brains faster than text. That’s partly why the “story” medium (short-form videos with effects and overlays) and emojis attract engagement. But something else has also been happening since “web 2.0” came along. The high usage of images all over the web, some fueled by user-generated content, is creating a problem for web designers who now must deliver rich experiences in the face of an ever-increasing number of images. In the following sections, we’ll discuss in detail five things to keep in mind when designing smart, imag...

Last week we on the code challenge #7 we delved into lazy loading images for increased performance of web pages. Yet to take the challenge? You can do so here before looking through the spoiler below. Once completed, you can post your entry in the comment section of the post, post it on twitter and use the hashtag #ScotchChallenge so we can see it, or post it in the #codechallenge channel of the Scotch Slack. The Challenge When developing websites and web pages, every byte counts and in a bit to reduce the page size and load time several techniques have been implemented to achieve this. Lazy loading is one such technique. Here, a much lower quality of an image is rendered on page load thereby reducing the overall size of the page and increasing load speed. However, when the pa...

Tag: Lazy load

5 Secrets of Image-Rich Websites

Lazy Load Animal Memes with Intersection Observer