Dev.to

Chapter 3: images part one

Cover image by M Mahbub A Alahi Recap Last time, we configured a local server and previewed our work: We installed browser-sync so we can see the contents of dist in a web browser Learned about escape characters Ran more than one command at the same time Learned about the special start command name Installed, then removed a package because we changed our mind Learned that if something goes wrong with node_modules we can always nuke it and start again This lesson is all about optimising images. There's a lot to get through here, but I'm going to take it slow. Fun break Perhaps right now, you're feeling a bit of imposter syndrome. We are standing on the shoulders of the giants who made all this technology, and yet we are not fit to shine their shoes. Don't worry: I have a cure for that. Let's visit a site made by some of the best engineers the world has ever seen. How about Apple? I need you to open the home page in Chrome (sorry, Firefox - I'm cheating on you this one time). Don't dismiss the cookies or click on anything else and open the developer tools. You can do this by either hitting the F12 key or right-clicking on an empty patch of page and selecting Inspect from the pop-up menu. There's a lot going on in the developer tools but I want you to pay attention to the tabs across the top. They list off the different parts and start Elements Console Sources Network ... I'd like you to select Lighthouse. It might be hidden behind one of these wee chaps: ». Once the Lighthouse panel has displayed, click the Analyze page load button and wait for the results. Is everything green? You can scroll down the report and under the Diagnostics heading, you should see a red warning triangle next to a sub-heading which reads Serve images in next-gen formats. We're going to address this problem in the next lesson, but let me ramble on about Lighthouse for a bit first. Running a Lighthouse audit is mostly a little disheartening. Getting green scores across the board is basically impossible, if you have a marketing department which is determined to drop a 500MB auto-playing video into a popup window. And even if you don't have this problem, improving the score requires many different departments working together. In the next lesson, we're going to do what Apple failed to do: serve all our images in "next gen" formats. (and if you're still feeling like a bad engineer, try running Microsoft through Lighthouse) Compressing images When it comes to Node packages which can convert images to cutting-edge modern formats, the new hotness is Sharp. It's so bleeding-edge that we need to write some of our own tools to run it. Sharp is designed to be called from within a Node application and can do all kinds of stuff like adding blurs, adding text, rotating or converting images to different formats. It's just the last bit we want to use. However, it doesn't just get installed and then called, like the other plugins we've been using. We're going to have to write a few functions to get it to do what we want. What we want to achieve An ideal developer user experience would be the following: You start to run your local server You dump a bunch of images into the src/img directory (this doesn't exist yet) Those images get automagically converted into next generation files in the dist/img directory (this doesn't exist either, yet) You might also want to do any of the following: Run a task which converts all images in the src/img directory into their optimised versions in dist/img - for example when you've added some images but the server wasn't running at the time Overwrite an existing image in src/img with a new one with the same name, and have the corresponding images in dist/img update automatically Use as many different sub-directories in src/img and have those be replicated on dist/img - for example src/img/gallery/open-day which lives inside dist as dist/img/gallery/open-day That's a lot of features! It's easy to feel overwhelmed when seeing requirements like this. You might mentally try and solve all of them at once. Resist this temptation, if you can! Remember that computers are very, very stupid and need to be told very simple instructions. Most of our job is to take complicated tasks and break them down into very simple steps. Creating new directories Let's create some new directories for these images to sit inside. Add some img directories, so your Node project folder looks like this:

Mar 7, 2025 - 16:09
 0
Chapter 3: images part one

Cover image by M Mahbub A Alahi

Recap

Last time, we configured a local server and previewed our work:

  • We installed browser-sync so we can see the contents of dist in a web browser
  • Learned about escape characters
  • Ran more than one command at the same time
  • Learned about the special start command name
  • Installed, then removed a package because we changed our mind
  • Learned that if something goes wrong with node_modules we can always nuke it and start again

This lesson is all about optimising images. There's a lot to get through here, but I'm going to take it slow.

Fun break

Perhaps right now, you're feeling a bit of imposter syndrome. We are standing on the shoulders of the giants who made all this technology, and yet we are not fit to shine their shoes.

Don't worry: I have a cure for that.

Let's visit a site made by some of the best engineers the world has ever seen. How about Apple? I need you to open the home page in Chrome (sorry, Firefox - I'm cheating on you this one time). Don't dismiss the cookies or click on anything else and open the developer tools. You can do this by either hitting the F12 key or right-clicking on an empty patch of page and selecting Inspect from the pop-up menu.

There's a lot going on in the developer tools but I want you to pay attention to the tabs across the top. They list off the different parts and start Elements Console Sources Network ... I'd like you to select Lighthouse. It might be hidden behind one of these wee chaps: ».

Once the Lighthouse panel has displayed, click the Analyze page load button and wait for the results. Is everything green?

You can scroll down the report and under the Diagnostics heading, you should see a red warning triangle next to a sub-heading which reads Serve images in next-gen formats. We're going to address this problem in the next lesson, but let me ramble on about Lighthouse for a bit first.

Running a Lighthouse audit is mostly a little disheartening. Getting green scores across the board is basically impossible, if you have a marketing department which is determined to drop a 500MB auto-playing video into a popup window. And even if you don't have this problem, improving the score requires many different departments working together.

In the next lesson, we're going to do what Apple failed to do: serve all our images in "next gen" formats.

(and if you're still feeling like a bad engineer, try running Microsoft through Lighthouse)

Compressing images

When it comes to Node packages which can convert images to cutting-edge modern formats, the new hotness is Sharp. It's so bleeding-edge that we need to write some of our own tools to run it.

Sharp is designed to be called from within a Node application and can do all kinds of stuff like adding blurs, adding text, rotating or converting images to different formats. It's just the last bit we want to use.

However, it doesn't just get installed and then called, like the other plugins we've been using. We're going to have to write a few functions to get it to do what we want.

What we want to achieve

An ideal developer user experience would be the following:

  1. You start to run your local server
  2. You dump a bunch of images into the src/img directory (this doesn't exist yet)
  3. Those images get automagically converted into next generation files in the dist/img directory (this doesn't exist either, yet)

You might also want to do any of the following:

  • Run a task which converts all images in the src/img directory into their optimised versions in dist/img - for example when you've added some images but the server wasn't running at the time
  • Overwrite an existing image in src/img with a new one with the same name, and have the corresponding images in dist/img update automatically
  • Use as many different sub-directories in src/img and have those be replicated on dist/img - for example src/img/gallery/open-day which lives inside dist as dist/img/gallery/open-day

That's a lot of features! It's easy to feel overwhelmed when seeing requirements like this. You might mentally try and solve all of them at once. Resist this temptation, if you can! Remember that computers are very, very stupid and need to be told very simple instructions. Most of our job is to take complicated tasks and break them down into very simple steps.

Creating new directories

Let's create some new directories for these images to sit inside. Add some img directories, so your Node project folder looks like this:
Read More

Tags:

Previous Article

Webflow SEO Guide 2025

Next Article

Webinar – OSS Power-Ups: EntityFramework.Exceptions

Related Posts

Building a little whisper thingy

Building a little whisper thingy

Mar 21, 2025  0

Azure Data Engineering Books from #Techtter YT Channel

Azure Data Engineering Books from #Techtter YT Channel

Feb 20, 2025  0

My understanding of AI

My understanding of AI

Mar 7, 2025  0