Media on the Web: Dealing with HEIC, Fonts, and the Need for Speed

Why Media Is Still the Web’s Bottleneck

We all know the drill: you build a fast site, then someone uploads a 5MB photo from their phone, and suddenly your Lighthouse score tanks. Media is the heaviest part of the modern web, and it’s not just images—fonts, video, and even SVGs can bloat a page if you’re not careful. Over the years, I’ve learned that the key is not to obsess over every byte, but to have a solid strategy for handling the most common formats and workflows. Here’s what actually works for me.

HEIC: The Format You Can’t Ignore

If you’ve ever worked with clients who send photos from iPhones, you’ve probably run into HEIC. It’s a great format—half the size of JPEG with better quality—but it’s a nightmare for browser support. Safari and iOS handle it natively, but Chrome, Firefox, and most other browsers still don’t. So what do you do? You convert it on the server or client side before serving it to most users. I used to write my own conversion scripts, but honestly, it’s easier to rely on a quick tool like Convert HEIC to JPG instantly when I need a one-off conversion. For production, I’d recommend using a library like libheif or a cloud service that automates the conversion, but for quick testing or when a client sends you a batch of photos, having a simple converter in your toolkit saves time.

Fonts: The Silent Performance Killer

Fonts are sneaky. They don’t show up in your network tab as a huge file, but they block rendering and cause layout shifts. I’ve seen sites with 10+ font files, each with multiple weights and formats. The fix? Be ruthless. Use only the weights you need, and use font-display: swap to avoid invisible text. Also, consider using variable fonts—one file can replace several static ones. In my last project, I reduced font load from 400KB to 80KB by switching to a variable font and subsetting it to Latin only. That’s a win you can feel.

Tooling That Doesn’t Overcomplicate

There are dozens of build tools and plugins for optimizing media, but I keep it simple. For images, I use sharp in Node.js to resize and convert to WebP or AVIF (if the browser supports it). For fonts, I use fontmin to subset and minify. And for everything else, I rely on HTTP/2 and caching headers. The trick is to automate these steps in your build process so you don’t have to think about them every time. Set up a simple script that runs on every build, and you’re done.

Lazy Loading and Async Decoding

One of the easiest wins is lazy loading images and iframes. Use the native loading="lazy" attribute—it’s supported everywhere now. For images above the fold, use fetchpriority="high" to prioritize them. And don’t forget decoding="async" so the browser doesn’t block on decoding images that are off-screen. These are small changes, but they add up, especially on pages with lots of media.

Putting It All Together

At the end of the day, handling media on the web is about making smart choices. Understand the formats you’re dealing with, optimize fonts, and use the right tools to automate the tedious stuff. And when a client sends you a bunch of HEIC files, don’t panic—just convert them and move on. Your site will be faster, and you’ll have more time to work on things that actually matter.