Last December, we released our new company website after several months of design and development. It was a significant step forward for our company. However, like any other revamp, there are still some things missing from our previous version.
Currently, one of the things we are working on is image optimization and delivery.
Images are something that is overlooked by many developers and agencies building their products, but it's key for a faster and more visually pleasing web browsing experience. Here is a compendium of learnings we made from our experience working with Naiz, a digital newspaper.
Image optimization is essential, as it provides positive business outcomes like improved SEO, faster load times, and a better user experience overall.
Our goal when serving images from our sites should be to:
Make Google happy by reducing the CLS*.
For the uninitiated: Cumulative Layout Shift (CLS) is a crucial metric in SEO that measures the visual stability of a webpage as it loads. Introduced by Google as part of the Core Web Vitals, CLS evaluates unexpected layout shifts that occur during the page loading process.
Most web browsers nowadays support the WebP or AVIF image formats, so there is no excuse for not serving images in these formats. We just need to offer a fallback in case the browser doesn't support them for any reason.
When converting to WebP, one thing that we learned is to pay special attention to compression and image metadata. The cwebp
library provided by Google has a default compression that is too aggressive, which might result in blurry images. Compression is measured by the quality
parameter. While 75 out of 100 is the standard value, we prefer a value of 85 for most of our projects.
Additionally, we have found that during WebP conversion, all metadata is removed by default. While it may be beneficial to remove some metadata to reduce image size, it's important to note that some metadata contains information about the color, such as the ICC color profile. Removing this information can cause images to lose their vibrant colors. We recommend not removing the metadata that affects the color representation of an image.
Caching images is easy nowadays. We recommend using Cloudflare or CloudFront (depending on your needs, limitations, and your tech stack) in front of your web applications and configuring them to cache images in their CDN.
With Cloudflare, this is done almost automatically when you configure your main domain with them. If you want to use CloudFront, you might need to serve your images from another domain or subdomain to separate your content pages from the image/asset URLs.
Why would you have a user download an image suitable for a 4K desktop display if they are navigating on a Full HD mobile phone? The size difference between different image versions is very noticeable.
With modern HTML is easy to make the user download the proper image using the picture element.
This is an example from one of our projects were we deliver different image formats (webp, avif, jpg) and sizes (mobile, desktop) using the picture
element while we keep the maximum compatibility.
<picture>
<source
sizes="(max-width: 480px) 480px, 100vw"
srcset="/image_mobile.webp 480w, /image_desktop.webp"
type="image/webp"
/>
<source
sizes="(max-width: 480px) 480px, 100vw"
srcset="/image_mobile.avif 480w, /image_desktop.avif"
type="image/avif"
/>
<source
sizes="(max-width: 480px) 480px, 100vw"
srcset="/image_mobile.jpg 480w, /image_desktop.jpg"
type="image/jpeg"
/>
<img
alt="Alt text"
loading="lazy"
width="300"
height="200"
sizes="(max-width: 480px) 480px, 100vw"
src="/image_desktop.jpg"
srcset="/image_mobile.jpg 480w, /image_desktop.jpg"
/>
</picture>
When the device viewport size is 480px or less, we display a smaller image, and the browser can choose the best image format to load.
While this might seem sufficient, there is one more thing to consider: the device screen is not the only factor that matters. The pixel density of the device is almost as important as the screen size. A 4K 15-inch display will require a much larger image to render it at the highest quality possible compared to a Full HD display with the same screen size.
We will address this topic separately in an upcoming blog post.
Finally, you want to make Google happy. Most of our clients are concerned about their scores in PageSpeed Insights because they are related to how Google ranks your site.
CLS is the effect of HTML visual elements moving as the contents on the webpage load. To prevent CLS, all elements should have their vertical space assigned. This applies to images as well. While this can be achieved through CSS (which is the normal way to do it), Google prefers that you also define the height
and width
parameters of your images in their HTML elements.
It is not that important what values you are using as height and width (as you might have different sizes defined depending on your CSS media queries), but rather that you respect the aspect ratio of the image.
You can find more information on CLS here.
We will be expanding on this subject more in future blog posts. In the meantime, you can use tools like Google's Lighthouse to audit your own site!
Two options for one of the biggest debates in the frontend world.
Read full articleFor a long time at MarsBased we have ruled out using TailwindCSS for our front-end projects. The lack of a proprietary component library, along with the absence of a layout system, led us to the conclusion that TailwindCSS was not the best option for us. In this post, we describe how, when and why have re-evaluated this decision.
Read full articleAt MarsBased, we always stay at the forefront of web development technologies. This post shares a comparison of three popular libraries for working with React and Tailwind CSS: Prime React, Next UI, and Flowbite.
Read full article