Beginners Guide to Web Performance: Optimizing Images

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • vanilla-lazyload

    LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

  • If you want to guarantee lazy-load across all (JavaScript-capable) browsers and not just images, I've used Vanilla Lazyload a couple years ago with success, but as this relies on using a data-src attribute, you will get W3C validation errors unless you also set a src attribute. But you don't want to set the src to a real image, because this will nullify the whole point of using the plugin, so set it to a 1x1 pixel "image" that will immediately get replaced by the data-src once the image scrolls into view.

  • squoosh

    Make images smaller using best-in-class codecs, right in the browser.

  • I use Squoosh to convert individual images to WEBP. I haven't found a good free bulk tool yet, and I still find I have to mess with the settings to make sure the image still looks good after being compressed.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • ImageOptim

    GUI image optimizer for Mac

  • Image Optim: Mac only, can set custom compression settings and remove heavy metadata. I use this after resizing the images in Bulk Resize since the compression settings here are much more comprehensive.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts