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…
oEmbed is a very elegant solution to a very specific problem. 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. In this article, Drew McLellan will tell you everything about it!
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. In this article, Suzanne Scacca is going to show you What WebP is.
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. Today, Suzanne Scacca will focus on how you can still design with as many images as you want without slowing down your website.
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. JPEG files, for which lazy loading is mostly used, have the possibility, according to the specification, to store the data contained in them in such a way that first the coarse and then the detailed image contents are displayed. Instead of having the image built up from top to bottom during loading, a blurred image can be displayed very quickly, which gradually becomes sharper and sharper.
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. In this article, Suzanne Scacca will look at some examples of good and bad movie posters and see what sort of lessons we can use to help you with your PWA hero design.
Read more…
Are you using many full-sized images on your WordPress site? Take note that this is causing your pages to load slowly. A slow website affects your SEO, increases the bounce rates, and keeps your audience at a distance. There are many ways to speed up your WordPress site, each one complementing the other. In this article, Adelina Țucă will help you learn how to easily optimize all the images on your site (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…
