🖼️ tutorials
Serve the Right Image Size With URL Parameters
By PixNimbus Editorial · Reviewed & edited by Franklin Brown ·July 4, 2026
One Master, Many Sizes
The slowest images on the web are the ones sent at the wrong size. A 3000px hero downscaled by the browser to fit a 768px phone still downloads all 3000 pixels, wastes bandwidth, and pushes back your Largest Contentful Paint. The fix is not to export a dozen crops by hand in an editor and juggle their filenames. It is to host the full-resolution master once and ask the CDN for exactly the size each context needs, using URL parameters.
With PixNimbus every uploaded image gets a single permanent URL. Append query parameters and you get a resized, reformatted, recompressed variant built on the fly at the edge and cached, so the first request generates it and every request after is instant.
The Parameters You Actually Need
- w (or width) - target width in pixels. Height scales automatically to preserve the aspect ratio, so you rarely need to set both.
- h (or height) - target height, for the cases where the box height is what you must fill.
- q (or quality) - output quality from 1 to 100 for JPEG, WebP, and AVIF. Lower means smaller.
- format -
auto,webp,avif,jpeg, orpng. - fit - how the image fits the box:
scale-down,contain,cover,crop, orpad.
A request like /cdn/<id>?w=800&format=webp&q=75 returns an 800px-wide WebP at quality 75. That single line replaces an export preset, a filename convention, and a re-upload.
Let the Browser Choose the Format
Modern formats are where the biggest wins hide. AVIF and WebP routinely produce files 30-50% smaller than an equivalent JPEG at the same visual quality. The catch has always been support: not every browser reads every format. Set format=auto and PixNimbus reads the browser’s Accept header for you, serving AVIF to browsers that advertise it, WebP to the rest, and the original as a last resort. One <img src> quietly delivers the best format each visitor can decode - no <picture> element, no server-side sniffing.
A Practical Responsive Recipe
For a responsive image, point srcset at the same base URL with different widths and let the browser pick:
/cdn/<id>?w=400&format=auto 400w/cdn/<id>?w=800&format=auto 800w/cdn/<id>?w=1600&format=auto 1600w
Add a sensible sizes attribute and every device downloads only the resolution it can actually display, in the smallest format it supports. You maintain one master; the CDN maintains the matrix.
Compress Before You Upload
The 10MB upload cap is generous, but very large camera originals are worth shrinking first - both to fit comfortably and to keep your storage lean. The Quick Image Compressor re-encodes images entirely in your browser, with a live before/after readout so you can find the smallest file that still looks perfect. Compress there, host here, and let URL parameters handle every size from that point on.
The Payoff
Doing this well turns image delivery from a chore into a single decision made once at upload time. You stop thinking about crops and formats and start thinking about pages. The hero that used to block your paint now arrives before the reader notices, and the only thing you had to change was the query string.
Try the tools from this article
Our articles are drafted with AI assistance and reviewed, fact-checked, and edited by a human editor before publishing.