Optimizing images for the web – an in-depth guide

It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images.

This article aims to cover most of the tools and approaches for optimizing images for the web.

Good to see that it also covers native lazy image loading. The smallest image still remains an image not loaded unnecessarily 😉

Optimizing images for the web – an in-depth guide →

💁‍♂️ Addy Osmani’s Essential Image Optimization is also worth a look.

Use React.memo() wisely

To improve user interface performance, React offers a higher-order component React.memo(). By memoizing the rendered output, React skips unnecessary re-rendering.

This post helps you distinguish the situations when React.memo() improves the performance, and, not less important, understand when its usage is useless

Use React.memo() wisely →

Find the cost of adding a npm package to your bundle with BundlePhobia

Ever wondered what the (size) impact of adding an NPM package to your project is? BundlePhobia is a tool that does not only that, it also recommends you other similar packages that have a lesser load.

This thing lets you understand the performance cost of npm install‘ing a new npm package before actually adding it to your bundle.

BundlePhobia →

Making Instagram.com faster

Over the years Instagram (as a product) grew a lot. With more features to show, their web experience began to degrade. In a series of (upcoming) posts they’re covering what they have done to improve performance. In this first part they cover script preloading and image prefetching, reducing the loading time of the “feed page” by 50%.

Correctly prioritizing resource download and execution and reducing browser downtime during the page load is one of the main levers for improving web application performance. In our case, many of these types of optimizations proved to be more immediately impactful than code size reductions, which tended to be individually small and only began to add up after many incremental improvements.

Making Instagram.com faster →

Automatically compress images to your Pull Requests with this GitHub Action

The folks at Calibre have release a GitHub Action named “Image Actions” and I must say, it looks amazing insane:

Image actions will automatically compress jpeg and png images in GitHub Pull Requests.

  • Compression is fast, efficient and lossless
  • Uses mozjpeg + libvips, the best image compression available
  • Runs in GitHub Actions, so it’s visible to everyone

Never ship unoptimised graphics again!

Once the workflow is added to your repo, Compression levels and source paths exclusions can easily be configured using a .github/calibre/image-actions.yml file:

jpeg:
  quality: 80
png:
  quality: 80
ignorePaths:
  - "node_modules/**"

Calibre Blog: Automatically compress images on Pull Requests →
GitHub Actions Marketplace: Image actions →

🤔 In case you’re wondering why you should compress your images be sure to read Addy Osmani’s free ebook “Essential Image Optimization”

How Web Content Can Affect Power Usage

The Webkit blog, on how to optimize your pages so that they don’t drain the battery of your visitors their devices:

Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content.

The three sections where to optimize covered are scripting, painting (the way stuff is rendered/animated), and networking (requests over the network)

How Web Content Can Affect Power Usage →

Time to First Byte: What It Is and Why It Matters

Harry Roberts has done an extensive write-up on Time To First Byte (TTFB), an often overlooked metric when it comes to measuring the performance of websites.

While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one.

To see what happens during your TTFB, you can leverage the Server Timing API.

Time to First Byte: What It Is and Why It Matters →

Self-Host Your Static Assets

Harry Roberts:

One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin.

For the site tested, this resulted in a ~300ms win:

Test Results with remotely hosted assets.

Test Results with self hosted assets.

One of the main reasons for me is that you, as developer, stay in control of everything. I’ve had sites break due to some external files no longer being available.

Self-Host Your Static Assets →

Optimize Rendering with CSS Containment

The folks at Igalia has been recently working on the implementation of CSS Containment in Chromium – which already shipped in Chrome 52, back in 2016 – by providing some fixes and optimizations based on the standard.

Their post forms a nice intro on the subject:

The main goal of CSS Containment standard is to improve the rendering performance of web pages, allowing the isolation of a subtree from the rest of the document. This specification only introduces one new CSS property called contain with different possible values.

  • layout: The internal layout of the element is totally isolated from the rest of the page, it’s not affected by anything outside and its contents cannot have any effect on the ancestors.
  • paint: Descendants of the element cannot be displayed outside its bounds, nothing will overflow this element (or if it does it won’t be visible).
  • size: The size of the element can be computed without checking its children, the element dimensions are independent of its contents.
  • style: The effects of counters and quotes cannot escape this element, so they are isolated from the rest of the page.

Browser engines can use that information to implement optimizations and avoid doing extra work when they know which subtrees are independent of the rest of the page.

An introduction to CSS Containment →

React: When to use useMemo and useCallback

Insightful post by Kent C. Dodds on the costs and benefits of React’s useMemo and useCallback.

We hear a lot that you should use React.useCallback to improve performance and that “inline functions can be problematic for performance,” so how could it ever be better to not useCallback?

Just take a step back from React and consider this: Every line of code which is executed comes with a cost.

Measure, and optimize responsibly.

When to useMemo and useCallback →