The goals of this post is to give you some exposure to the current web capabilities and help you identify some opportunity areas for:
A few assumptions about you reading this post:
You are familiar with HTML.
You know basic image formats like jpg, png and svg.
You are somewhat familiar with CSS and enough have enough expertise to read, understand and implement the MDN documentation.
Introduction
The web is evolving, fast. Nice to have features have become something you as a developer, are expected to be familiar with here are some that are common:
Internationalization (i18n).
Front End Routing.
Responsive web design.
Front End User Authentication.
SEO.
Page Speed Optimization.
New features within the HTML spec
The HTML5 spec, is intended to serve a mobile web, you can think of it as two things a set of HTML tags, and several new APIs
Let us revise some new tags and attributes one by one, after that I will add an example that uses all of these.
<picture>
You can think of it as an img tag with more flexibility to display image resources. It allows us to provide higher-density versions of an image to high-DPI displays. Let us see what it looks like, according to MDN:
The HTML element contains zero or more elements and one element to provide versions of an image for different display/device scenarios.
<source>
The HTML <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element.
srcset attribute
This attribute is similar to src, but used to define multiple images src, there are many ways to implement this sources
Declare the attribute once with multiple images and a src as a default. Check original source at webkit.org.
The other way is to declare multiple sources and within each have one srcset. You can see it in the example below. The main difference is that the second has a more specfic conditions for image displays.
<picture><sourcemedia="(max-width: 799px)"srcset="https://placekitten.com/200/300"><sourcemedia="(min-width: 800px)"srcset="https://placekitten.com/400/600"><imgsrc="https://placekitten.com/600/800"alt="A cute black cat showing his love"></picture>
New relevant CSS properties
In case you did not know, spoiler alert, CSS 4 does not exist. Instead we have small increments being supported by modern browsers. Here are some properties that is good to be aware of:
This property serves to tell the browser how it should render the image. The values describe the algorithm that will be implemented in order to scale the image, by the time of this writing, the possible values are:
auto: Default value, the browser's algorithm will determine how to scale the image.
crisp-edges: It preserves contrast and edges in the image.
pixelated: As the name suggests, the browser will keep it's pixelated style as the viewport grows.
Lazy loading images means that they are served slowly and it is avoided until it is necessary.
When implemented, for the final user it usually means a smaller bundle served, faster loads and a better experience overall.
Intersection Observer API
For starters, you might want to use the Intersection Observer API.
Simply put, the API provides users a way to observe given elements and monitor changes in their intersection with a given ancestor element, or the viewport itself.
If you use Gatsby, Gatsby Link is already using it under the hood.
Even when you have lazy loading in place, user's internet speed might be slow or interrupted, even in urban areas, even if the user is not aware of it, so it is good to have something in place to the user to see. That's where skeletons come in place.
A skeleton is a placeholder in a place which need waiting for loading
You might have seen it before, this is what a skeleton looks like:
There are some npm packages you might use in order to implement this feature, but as a rule of thumb, let's use something simpler.
Introduce :empty pseudo-class
According to MDN Docs:
empty represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
WebP is an image format designed for the web, it was released on September 2010 and other than Safari, now it is widely supported on most modern browsers. If you check your profile picture on dev.to, you might find that it is already using it. I'll list a few articles in the last part.
Lozard JS: Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more https://apoorv.pro/lozad.js/demo/
I have worked in the Software industry for 9 years ultimately, gaining experience in B2B sales, talent marketing,Human resources practices, sourcing and recruiting at a variety of levels.
Location
Slough, UK
Education
Business Administration
Work
Human Resource Manager at Sky Potential Technologies
Hey Jaime, nice article, well described. You have just saved me. I was looking for something like this. I need to boost up my page and for that, I need to optimize my images. I was searching for some easy tips and ways. Thanks for sharing.
I lead a team of talented developers who create and maintain web applications that enhance the online privacy and security of millions of users.
Punctuality ninja, delivery addict, bibliophile.
Top comments (6)
Hey Jaime, nice article, well described. You have just saved me. I was looking for something like this. I need to boost up my page and for that, I need to optimize my images. I was searching for some easy tips and ways. Thanks for sharing.
I'm glad to help.
I have to say I honestly knew none of this before your post! Thank you for sharing. : )
I'm glad you found it useful 🙏😬
"srcset" is so handy! Thank you for sharing!
Thanks for taking the time and attention to check it out