Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy’s new book (also, check a free PDF preview).
Read more…
Many sites have hosted media and content that can be shared elsewhere by the use of some HTML embed code. What happens if you just have the URL of the item and need to find an embeddable version of the media without human intervention? That is where oEmbed comes in.
Read more…
Images are a big part of the web and, yet, they can cause a lot of challenges for the user experience if not properly optimized or delivered. It’s been almost a decade since Google introduced the world to WebP as a solution to this problem. As more of our browsers, devices and software support it, it’s time that web designers started adopting it as their default image format.
Read more…
You want to build a mobile website or PWA that converts visitors into leads or customers. But with Google and consumers alike becoming ever more demanding when it comes to loading speeds, what more can you do? ImageKit, a digital image optimization service, might have the all-in-one hands-off solution you need.
Read more…
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.
Read more…
You don’t have much time to capture the attention of visitors to your PWA. Rather than waste that time with an overcrowded hero image or, even worse, disappoint them with a lackluster design, get creative with what little space you have above-the-fold. One of the best sources of inspiration for this? Movie posters.
Read more…
In this article, Adelina Țucă explains how you can easily optimize all the images on your website (manually or on autopilot) in order to gain better loading times.
Read more…
In this article, you’ll learn how you can progressively replace your JavaScript-driven lazy loading with its native alternative — thanks to hybrid lazy loading.
Read more…
A built-in Angular feature called BreakPoint Observer gives us a powerful interface for dealing with responsive images. In this article, Tamas Piros will take a closer look at image breakpoints, their use-cases and throughout a hands-on example; you’ll implement them in an Angular application using Angular’s own BreakPoint Observer. Having such compelling tools at our hands helps us create immersive visual web experiences — without losing visitors.
Read more…
Animated GIFs are popular on the web for good reason. They provide more engagement than an ordinary image, while remaining more digestible compared to a typical video. However GIFs are a terrible format for storing video and are often huge in size leading to slow page load times and high data usage. With HTML5 video, you can reduce the size of GIF content by up to 98% while still retaining the unique qualities of the GIF format in the browser. Today, Ayo Isaiah will show you how to convert animated GIFs to video files and examine how to properly embed these video files on the web so that they act just like a GIF would.
Read more…