A great discussion thread at the Web Incubator Community Group on creating a standardized way requesting that the browser lazy load images.
Recently, Chromium improved their implementation of
navigator.connectionby adding three new attributes:
Before that, the available attributes were
type. With these two attributes you couldn’t really tell if the connection was fast or slow. The
navigator.connection.typemay tell us a user is using WiFi, but this doesn’t say anything about the real connection speed, as they may be using a hot spot and the connection is in fact 2G.
With the addition of effectiveType we are finally able to get the real connection type. There are four different types (slow-2g, 2g, 3g and 4g) and they are described this way by the Web Incubator Community Group:
slow-2g: The network is suited for small transfers only such as text-only pages.
2g: The network is suited for transfers of small images.
3g: The network is suited for transfers of large assets such as high resolution images, audio, and SD video.
4g: The network is suited for HD video, real-time video, etc.
Let’s see how we can improve user experience by delivering images based on available connection speed.
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.
During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.
This is really excellent: take a JPG, which has great compression for photos, but doesn’t support transparency, and link it within an
<svg> which can apply a clipping mask based on a path. The path can be traced manually over the photo in Photoshop or Illustrator, and can be exported as an SVG file from Illustrator. The following code (minus the path data), demonstrates how to do this:
<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d=" ... " /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> <svg>