Essential reading on Image Optimization

Car dashboard.
Photo by Randy Tarampi on Unsplash

This article by Addy Osmani on Essential Image Optimization now has me digging tonight’s rabbit hole. It’s a fun read that current web developers should refresh on.

As a web designer/developer who’s been building for the web since the nineties, I’ve been through the various concerns that used to bother us in getting the job done. Web standards was of course a major concern back then, with browsers trying to outdo each other with supposed innovations. Zeldman and the WaSP were my go-to reading on these topics, and the web wouldn’t be what it is now if not for them. Browser technology convergence led to initiatives like Browse Happy, which then allowed us all to focus on building websites and experiences that pushed the capabilities of the web.

These thoughts crossed my mind because I’ve been busy trying to manage a WordPress-powered website which had its usual contributors uploading unreasonably large images. Most were PR photos in the ~20MB range, and a lot them unnecessarily distributed in PNG format. They’d upload these images to a WP blog and assume the best—because that’s the behavior reinforced by Facebook/Twitter and similar platforms that masked the bandwidth and disk usage concerns from the users.

For now, the nuclear option is to simply use ImageOptim on the contents of wp-content/uploads/ after creating backups. Long-term though, my plan is to implement offloading for my clients’ hosted WP websites, moving media files to object storage like Amazon S3 or my cost-effective favorite, Backblaze B2. Pairing this with nginx rewrite rules to serve media from the external store while caching locally for a length of time should do the trick, and I’m sure others have already implemented a similar solution.

But here’s my short list of tips, for anyone publishing on the web:

  • JPGs are best used for photographic images—yes, photos.
  • PNGs are great for retaining image information, but they’re always too big when used for photographic data. Save your disk space and everyone’s bandwidth, please.
  • Resize images for the right purpose and medium, and save it in a web-optimized format that’s appropriate for the information and color detail.

Live with honor and follow your conscience

Earlier today, Hana had the boys work on a mini-project to commemorate Ninoy Aquino’s death anniversary. We also had them watch a few documentaries on his life, because we’ve always felt that kids should grow up knowing their heroes. And the job of introducing them to personalities they should look up to should not fall on schools alone—parents should let children know about history without the sanitized versions people peddle these days.

Curiously, Kuya Mikku chose to write down this inspiring quote:

The only advice I can give you: live with honor and follow your conscience.

For me though, I find this line attributed to Ninoy to be his poetic best:

A time comes in a man’s life when he must prefer a meaningful death to a meaningless life.

He lived—and died—guided by that exact thought. If only Filipinos lived with as much love and sacrifice for the Philippines.