chunkr.ai

You can cut most images to a fraction of their original file size without any visible quality loss by doing three things in the right order: resize the image to the dimensions it will actually display at, pick the right format for the content, then apply compression at a quality level that survives a side-by-side check. The single biggest mistake is skipping step one — an oversized image compressed at maximum quality is still far heavier than a correctly sized one.

Why file size and quality are a trade-off, not a fixed setting

Every compressed image is a negotiation between three variables: how many pixels you keep, how precisely each pixel is described, and how much the format is allowed to guess.

• Dimensions decide how many pixels exist at all. Halving width and height removes 75% of the pixel data before any compression happens.
• Quality level decides how aggressively the encoder discards detail it thinks you won't notice.
• Format decides the kind of discarding allowed — some formats throw away color precision, others only remove redundancy.

Because these interact, "quality 80" means something different on a 4000px photo than on a 600px thumbnail. Tune dimensions first, then quality.

Pick the format before you touch the quality slider

Practical rule: photos → JPEG or lossy WEBP; flat graphics and transparency → PNG or lossless WEBP; anything vector → SVG.

The four levers, in the order you should pull them

1. Resize to display size (biggest win, zero quality cost)

If your layout renders an image at 800px wide, serving a 2400px original wastes roughly 89% of the pixels. Resize to the largest size it will ever be displayed at, and add a 2× version only if you need retina sharpness.

2. Choose the format

Match the format to the content type using the table above. Converting a photographic PNG to JPEG or WEBP alone can shrink it by 80% or more.

3. Set the quality level

For JPEG and lossy WEBP, most photographs hold up well between quality 70 and 85. Below ~60, banding appears in skies and blur around text. Above ~90, file size climbs steeply for gains nobody can see.

4. Strip metadata

EXIF data, camera info, and embedded thumbnails can add tens of kilobytes. Remove them unless you specifically need copyright or orientation data — and note that stripping orientation can rotate an image, so verify after export.

When lossy compression is fine, and when it isn't

Lossy is acceptable when:

• The image is a photograph or has natural texture.
• It's decorative or below the fold.
• Slight softening won't be noticed at final display size.

Use lossless or vector instead when:

• The image contains text, UI elements, or thin lines (lossy creates ringing artifacts).
• It's a logo, icon, or diagram — SVG or PNG keeps edges clean.
• It will be edited again later; repeated lossy saves compound degradation.
• It's a screenshot of code or a chart where color accuracy matters.

Compressing vs. resizing: don't confuse them

Compressing reduces the bytes needed to describe the same pixels. Resizing reduces the number of pixels. They're independent, and resizing usually delivers the larger saving. A 3000×2000 photo at quality 95 might be 2 MB; the same photo resized to 1200×800 at quality 80 might be 180 KB. Doing only the quality reduction gets you maybe 40% off; doing both gets you over 90%.

A repeatable workflow

1. Determine the maximum display width in your layout (inspect the element or check your CSS).
2. Export at that width (plus a 2× variant if needed).
3. Convert to the right format — WEBP as a modern default, JPEG as a fallback, PNG/SVG for graphics.
4. Apply quality 75–85 for lossy formats and compare against the original.
5. Strip metadata and re-check orientation.
6. Verify before publishing (see below).
7. Serve the right file with srcset so small screens don't download the large variant.

How to verify quality before you publish

• View at 100% at final display size, not zoomed in — artifacts you can't see at real size don't matter.
• Toggle between original and compressed in a viewer or an online compressor's before/after preview.
• Check the worst-case areas: skies, smooth gradients, sharp edges, and any text.
• Compare file sizes and ask whether the extra kilobytes buy visible improvement. If not, go smaller.
• Test on a mid-range phone, where banding and blur are often more obvious than on a desktop monitor.

Common mistakes

• Compressing a full-resolution image and calling it optimized.
• Using PNG for photographs.
• Setting quality to 100 "to be safe" — it inflates size with no visible benefit.
• Re-saving a JPEG repeatedly, stacking artifacts each time.
• Forgetting that GIF animations are usually better as WEBP or video.
• Ignoring metadata, which can silently add weight.

Quick reference

The order matters more than any single setting: resize, then choose format, then tune quality, then strip metadata, then verify at real display size. Follow that sequence and you'll routinely land at 10–20% of the original file size with no quality your visitors can detect.

OpenAPI-generated API documentation is reference documentation that is produced automatically from an OpenAPI description file rather than written by hand. You write (or generate) a machine-readable specification of your API — endpoints, parameters, request bodies, responses, schemas, and auth — and a documentation tool reads that file and renders a browsable, often interactive reference site. The spec becomes the single source of truth; the docs become a build artifact.

This differs from manually written docs in one fundamental way: with hand-written docs, the prose is the source of truth and the API is described separately. With spec-driven docs, the API description is the source, and every page, table, and code sample is derived from it.

How the workflow actually runs

A typical spec-driven documentation pipeline has five stages:

1. Author or generate the spec. You either write an OpenAPI document by hand (YAML or JSON), or generate it from code annotations, framework metadata, or a design-first editor. Design-first means the spec is written before implementation; code-first means it is extracted from existing code.
2. Validate and lint. The spec is checked against the OpenAPI schema and against style rules — consistent naming, required descriptions, no undocumented 4xx responses, no orphaned schemas.
3. Bundle and transform. Multi-file specs are combined, $ref pointers are resolved, and the document is optionally split into per-tag or per-version outputs.
4. Render. A documentation tool converts the spec into HTML: an endpoint list, a sidebar of operations, parameter tables, response schemas, and a "try it" console.
5. Publish and version. The rendered site is deployed, and each API version gets its own snapshot so consumers can read docs matching the version they call.

Steps 2 through 5 are usually automated in CI. If the spec fails validation, the docs build fails — which is the point.

Spec-driven vs. hand-written documentation

The practical conclusion most teams reach: generate the reference, write the guides. Reference material is repetitive and mechanical, which is exactly what generation is good at. Conceptual explanations, migration notes, and tutorials carry judgment that a spec cannot express.

What you get out of the box

Generated reference pages commonly include:

• An operation list grouped by tag or path, with HTTP method and path.
• Parameter tables showing name, location (path, query, header, cookie), type, required flag, and description.
• Request and response schemas rendered as expandable trees, including nested objects and arrays.
• Authentication details pulled from the securitySchemes section.
• Interactive request consoles that let a reader send a real call from the browser.
• Generated code samples in several languages, derived from the same schemas.
• Multiple output formats, such as a static site, a single HTML file, or a mock server.

Because all of these come from one document, changing a field name in the spec updates the parameter table, the schema tree, and every code sample at once.

Where spec-driven documentation breaks down

Generation is not free. The trade-offs are real:

Spec quality becomes documentation quality. A field with no description produces a table row with an empty cell. A vague summary produces a vague heading. Tools can enforce presence of descriptions via linting, but they cannot enforce that the description is useful.

Customization has limits. If you need a page that does not map to an OpenAPI concept — a conceptual overview, a pricing explanation, a comparison of two endpoints — you write it outside the generator and link to it.

Not everything is expressible. Webhooks, streaming responses, long-polling behavior, and complex multi-step flows are awkward or impossible to describe fully in OpenAPI. Those need prose.

The spec can go stale. If the spec is maintained separately from the implementation, it drifts just like hand-written docs. The mitigation is to generate the spec from code, or to test the implementation against the spec in CI.

Interactive consoles need care. A "try it" button that hits a production API with real credentials is a security and rate-limit problem. Point it at a sandbox, or disable it.

Deciding whether to adopt it

Adopt spec-driven reference documentation if most of these are true:

• Your API has more than a handful of endpoints, or changes frequently.
• You ship client SDKs or code samples in more than one language.
• Multiple teams consume the API and need a consistent, always-current reference.
• You already have, or are willing to maintain, an OpenAPI description.

Stay with hand-written docs, or a hybrid, if:

• Your API is small and stable, and the reference fits on one page.
• Your documentation is mostly conceptual and contains little endpoint-level detail.
• You cannot commit to keeping the spec in sync with the implementation.

A reasonable middle path: generate the reference from the spec, and hand-write the getting-started guide, authentication walkthrough, and error-handling page. Link the two directions so readers can move from concept to endpoint and back.

A minimal starting checklist

1. Produce one valid OpenAPI document for a single API version.
2. Add a linter with rules for descriptions, operation IDs, and error responses.
3. Wire the docs build into CI so a failing spec fails the build.
4. Render the reference and review it as a reader, not as the author.
5. Write the two or three conceptual pages the generator cannot produce.
6. Version the published docs alongside the API version.

The core idea is simple: describe the API once, in a format both machines and humans can read, and let the reference documentation fall out of that description. Everything else — tooling, hosting, interactivity — is a detail on top of that decision.