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
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • 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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • 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