Image posts
17 posts in the Image category.
Animated GIFs are nostalgic but heavy. WebP and MP4 deliver the same motion at a fraction of the size. We compare file size, browser support, and the right tool for each job.
From U-Net segmentation to modern transformer-based matting, we walk through how a single neural net can isolate a foreground subject in a photo, and why edges and hair are still the hard parts.
Tempo detection sounds easy until you try it. From onset detection to autocorrelation and modern neural beat trackers, we walk through how computers find the pulse in a song.
Old image upscaling guesses pixels with smooth math. AI upscalers like ESRGAN and Real-ESRGAN hallucinate plausible detail learned from millions of images. Here's the difference and where each fails.
OCR turns pixels back into text — a problem that took decades to crack. We trace the journey from template matching through Tesseract LSTMs to modern multimodal models.
JPEG XL was the technically strongest modern image format — until Chrome killed support in 2022. Here's the honest 2026 comparison: file sizes at equivalent quality, current browser support, and which format actually wins for which job.
Changing the DPI metadata on an image does not add a single pixel — yet print shops keep asking for 300 DPI and people keep adjusting the wrong field. Here's what DPI metadata actually does, the simple math for print size, and a sizing cheatsheet for common cases.
Aspect ratios determine how images and videos fill their containers. Getting them wrong causes layout shift and distorted media. CSS now has native solutions that make this straightforward.
Embedding images as Base64 data URIs eliminates an HTTP request but increases file size by 33% and breaks caching. Here is when the trade-off actually makes sense.
When you resize an image, your software has to invent new pixel values. The algorithm it uses determines whether the result is crisp, blurry, or filled with jagged artifacts.
RGB and HEX are the same thing in different notations. HSL is much more intuitive for humans. CMYK lives in print. Understanding these distinctions saves you from confusing color bugs.
Every photo your phone takes embeds GPS coordinates, device model, lens serial number, and timestamp — all invisible but readable by anyone who downloads the file. Here is what EXIF data contains and how to remove it.
CSS sprites were the standard performance technique for reducing icon HTTP requests in the HTTP/1.1 era. With HTTP/2 and SVG, the calculus has changed — but understanding sprites is still valuable.
When you drag a JPEG quality slider from 100 to 80, what actually changes in the file? Understanding the compression algorithm helps you make smarter trade-offs between file size and quality.
SVG is the only image format that is also code — you can write it by hand, animate it with CSS, and scale it to any size without quality loss. Here is what every web developer should know about it.
WebP typically achieves 25-35% smaller file sizes than JPEG at equivalent quality, and browser support is now essentially universal. The case for switching has never been stronger.
Choosing the wrong image format can double your page weight or break compatibility in older browsers. This guide cuts through the noise with practical guidance for each format.