Shrinking a 1.6 MB Hero JPEG to Under 200 KB Without Visible Loss

·12 views

A marketing site's mobile Lighthouse score was dragged down by a single 2400×1600 hero photo of about 1.7 MB, which pushed largest contentful paint to 4.8 seconds on throttled 4G. The author needed a solution that required no build step, kept customer photos off third-party APIs, and still looked good at full size on large displays. Plain quality reduction caused gradient banding, so resizing to 1600 pixels wide combined with optimized, progressive 4:4:4 encoding did most of the work, bringing the file to roughly 197 KB. Switching to Node's sharp library with mozjpeg, along with WebP and AVIF variants, cut sizes further, with AVIF at about 43 KB. The author still serves JPEG and WebP fallbacks alongside AVIF, since browser support is not universal.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

DeadCode Whisperer: A Locally Run AI Persona Channels the Spirit of ALGOL

A developer built an offline AI project called The DeadCode Whisperer for a Hacktoberfest challenge themed around the 'Ghost in the Machine.' The assistant adopts a restless, archaic persona that mourns lost structural programming ideas and sees modern languages as chaotic. It runs entirely on the developer's own machine using Ollama and open-weight models, so it needs no cloud service and keeps user queries local. The developer argues that open-weight models avoid the risks of closed APIs, such as deprecation and shutdowns. The project's code is publicly available on GitHub.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Why Dynamic QR Codes Break and How Developers Can Diagnose the Failure

A developer who built a QR code generator explains why printed codes often appear to expire when the real fault lies elsewhere. A QR code encodes a payload, and dynamic codes hold a short-link pointer that adds a redirect hop the printer does not control. Diagnosis starts by reading the scanned URL and checking whether the short link or the final destination has failed. The article includes a JavaScript snippet that traces redirect hops and explains what different outcomes, such as a 404, a parking page, or a loop, indicate. It notes that browser-based tracing may be blocked by CORS, in which case developers can use the Network tab or curl instead.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Five-Tool Pipeline Used to Model a 64-Acre Closed Pennsylvania Mall Site

A planner spent seven weeks building a planning-level model of a 64-acre shuttered mall in Pennsylvania using five software tools. The team relied on a 1998 survey, which had to be converted into an existing-ground surface and checked against a 2021 aerial image, with flat areas matching within 0.1 foot. Block-scheme software initially reported 610 units, but roughly 80 of those fell inside the 100-year floodplain and had to be excluded. Problems included block IDs renumbering after edits and the need to generate terrain and buildings for an unsurveyed 12-acre parcel using AI. The author concluded that early exclusion polygons and a frozen street layout would have saved time, while consistent coordinate setup kept the tools aligned.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Ghostlight: an offline, browser-based tool for writing remembrances of the dead

Ghostlight is a remembrance studio that runs entirely in the user's browser, turning answers to six questions about a loved one into a written portrait, a Día de Muertos-style virtual altar, and a self-contained HTML keepsake. Its text is generated by an open-weight Gemma 2 model via WebGPU, or users can opt for a candle mode that arranges their own sentences without any model. The archive is stored locally in IndexedDB, with no backend, accounts, analytics, or cloud inference, so no data is uploaded. The project's creator frames the stored memories, rather than the model, as the true archive, keeping them portable if the model changes. The demo archive shown in the project is fictional and was written by the creator.

0 comments Read more at DEV Community