Skip to content

Instantly share code, notes, and snippets.

@RobertAKARobin
Last active February 28, 2024 19:51
Show Gist options
  • Save RobertAKARobin/1fcbb0a83b0b41269e49886b2aa4d411 to your computer and use it in GitHub Desktop.
Save RobertAKARobin/1fcbb0a83b0b41269e49886b2aa4d411 to your computer and use it in GitHub Desktop.
Robin's easy image/webpage optimization tips

Robin's easy image/webpage optimization tips

For people who can't code good and want to learn to do other stuff good too.

Browser DevTools

You can use your browser's built-in Developer Tools (DevTools) to see how well your webpage performs.

In Chrome or Edge:

  1. Open a Private or Incognito browser window.
    Regular browser windows cache (download and reuse) most of the pages, images, etc. that you see, whereas Private and Incognito windows do not. This makes them better for testing your webpage's performance. Keyboard shortcut:
    • Windows: Ctrl + Shift + N
    • Mac: Command + Shift + N
  2. Open the DevTools with this keyboard shortcut:
    • Windows: Ctrl + Shift + J
    • Mac: Command + shift + J

You cannot hurt anything on the webpage or on your computer with DevTools. Please click around and explore. If you seem to have messed something up, just refreshing the page should fix it.

If you click the kebab menu in the top right, you can pop out the DevTools into a new window:

image

See everything that is loaded

Use the 'Network' tab to see everything that gets loaded on your page:

  1. Click the 'Network' tab in DevTools
  2. Make sure 'Disable cache' is checked, which will force your browser to reload everything on each page load
  3. Reload the page, or go to a new address

The tab will show all the requests made on this webpage -- every image, font, script, and pixel that was loaded.

At the bottom is a summary of the total number of requests and their combined size.

image

You can filter the results to show only requests of a certain kind or from a certain address:

image

Get a performance and accessibility report

Within DevTools, click the 'Lighthouse' tab. It might be hidden under the little double-arrow icon.

You can use this to run a report that scores various aspects of your site.

image

Have one big image

Most webpages have one big "hero" image, and then a bunch of smaller images. As a quick-and-dirty rule, shoot for keeping the hero image size at 1 megabyte or less, and the smaller images at 300 kilobytes or less.

Use the right image format

Most images are JPGs or PNGs. Any JPG can be converted to a PNG and vice-versa without changing how it looks. However, it can make a big difference in how "heavy" it is -- how much memory, storage, or bandwidth it requires.

  • Use JPGs for images that have color gradients, like photos.
  • Use PNGs for images that are mostly solid blocks of color, like logos and graphics, or if the image has to have transparency (which JPGs don't support).

For example, this photo when saved as a PNG is a very large 3 megabytes:

image

You can use Windows Paint (or Mac Preview) to easily convert it to JPG. The resulting JPG is 1/6th of the size of the original PNG, without a noticeable change in quality.

image

(If you want to be really efficient, you should use SVGs for most logos and graphics. However, it's not easy to convert JPG/PNGs to SVGs, so we won't cover that here.)

Remove image bloat

Photo editing programs tend to add a lot of unnecessary bloat to images in the form of metadata and other cruft. This can account for more than 50% of the image's weight.

Before I upload any image to a website, I run it through a program that removes all of the bloat. I recommend ImageOptim for Mac, or one of its free alternatives for Windows:

https://imageoptim.com/versions.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment