Pumili ayon sa tungkulin ng imahe
Magsimula sa asset, hindi sa extension. Ang isang larawan ay continuous-tone na nilalaman, kaya maaaring tanggapin ang ilang loss sa ipinapakitang sukat. Ang screenshot, chart, logo, o line drawing ay may matutulis na gilid at teksto kung saan kitang-kita ang artifacts. Panatilihin ang mga ito gamit ang lossless output o maingat na pag-apruba. Gamitin ang SVG para sa vector logo o diagram kapag available.
Pagkatapos, tukuyin ang mga kakayahan. Ang alpha ay nangangahulugang per-pixel transparency. Ang animation ay serye ng mga frames. Ang kinakailangang coverage ng browser, dami ng publikasyon, at oras ng build ay mga constraint sa delivery na maaaring tumalon sa mas maliit na format.
Subukan muna ang lossy AVIF at WebP. Panatilihin ang JPEG bilang available kapag kailangan ang malawak na compatible na opaque fallback.
Panatilihin ang lossless source. Ihambing ang PNG sa lossless WebP o AVIF sa aktwal na display scale bago pumili.
Gamitin ang AVIF, WebP, o PNG; huwag piliin ang JPEG dahil wala itong alpha channel.
Unawain kung ano ang iniaalok ng bawat format
AVIF ay nag-iimbak ng mga imahe na naka-AV1 sa isang HEIF-based na format. Kasama sa spec nito ang still images, image sequences, at alpha image items. Sinusuportahan nito ang lossy at lossless encoding, transparency, at animation. Hindi konstant ang makukuhang pagtitipid: nag-iiba ayon sa source content, encoder, speed, target quality, at metadata.
Sinusuportahan ng WebP ang lossy at lossless modes, transparency, at animation. Ang JPEG ay isang lossy still-image format na may napakalawak na historical support, kapaki-pakinabang bilang opaque-photo fallback. Ang PNG ay lossless na may alpha, kaya magandang fallback para sa eksaktong graphics, kahit na kadalasang hindi mahusay ang photographic PNG pagdating sa laki. Karaniwang static ang ordinaryong PNG; subukin ang hiwalay na animation format kapag kailangan ang motion.
Pinakamainam subukan para sa high-value raster images kung saan kayang i-justify ng mas maliit na transfer size ang encoding at fallback work.
Kapaki-pakinabang bilang modernong pangkalahatang raster option, kasama ang transparency at animated sequences.
Gamitin para sa opaque photographic fallback, hindi para sa transparent logo o cutout.
Gamitin para sa lossless, transparent raster fallback at para sa assets kung saan mas mahalaga ang pixel fidelity kaysa sa pinakaliit na bytes.
Bumuo ng fallback path kaysa tumaya sa isang format lang
Pinapahintulutan ng elementong picture na tasahin ng browser ang mga alternatibo. Ilagay ang AVIF muna, pagkatapos WebP, at isang img fallback sa JPEG o PNG, na may tamang MIME type. Nilalaktawan ng browser ang hindi sinusuportahang source at gagamitin ang fallback kapag walang source na magagamit. Panatilihin ang parehong makahulugang alternative text maliban kung sinadyang babaguhin ang crop.
Ang format fallback ay hindi pumapalit sa responsive sizing. Mag-supply ng width-based candidates at isang tapat na sizes value kapag nag-iiba ang slot. Isama ang width at height para makapag-reserve ng espasyo ang browser. Ang maliit na-format na file sa sobrang laki ng pixel dimension ay nagsasayang pa rin ng bytes.
AVIF muna, WebP pangalawa, pagkatapos JPEG para sa opaque photos o PNG kapag kailangan ng transparency o lossless na mga gilid ang fallback.
Kung ang server ang pumipili ng mga format mula sa request capabilities sa halip na picture markup, i-configure nang tama ang cache variation at subukin na bawat kliyente ay makatanggap ng decodable representation.
Gumamit ng client na walang preferred decoder o sadyang i-disable ang isang source sa staging; i-confirm na nananatiling tama ang imahe, mga sukat, at alternative text.
Budget-in ang encoding time at protektahan ang visual quality
Lumilipat sa encoding ang trabaho ng modern compression. Nag-aalok ang reference encoder ng AVIF ng speed range mula 0 (pinakamabagal) hanggang 10 (pinakamabilis); nagte-trade din ang WebP ng mas maraming encoder work para sa oras, output size, at quality. Ituring ang batch re-encode o on-demand transformation bilang isang operational decision, hindi isang libreng pagbabago ng setting.
Magtakda ng repeatable policy ayon sa asset class at i-review ang originals sa mga karaniwang display sizes. Suriin ang faces, gradients, text, edges, at transparent boundaries. Panatilihin ang master at itala ang encoder version at settings para maireproduce at ma-roll back ang anumang depekto.
Ang mas mabilis na encoding ay makababawas ng build pressure ngunit maaaring maglabas ng mas malaking file o hindi gaanong epektibong compression; mag-benchmark gamit ang iyong sariling source set.
Hindi mapapalitan ng isang score o preset ang visual review ng mga rehiyon ng imahe na mahalaga sa mga bisita.
Gawing proactive na practice ang image-format changes para sa reliability
Para sa Status Is UP, ang image optimization ay proactive uptime work kapag pinipigilan nitong masisira ang isang release ng isang kritikal na pahina. Gumawa ng inventory ng mga critical image URL, stage ang representatibong conversion, at i-verify ang content type, CDN behavior, at cache invalidation bago ang site-wide migration.
I-deploy nang reversible sa batch. Ihambing ang rendering at transfer behavior sa release candidate, at panatilihin ang lumang representasyon hanggang mapatunayan ang bagong path. Kung bumigo ang isang transformation o cache rule, ibalik ang kilalang magandang source. Ito ay resilient na direksyon sa delivery, hindi isang unibersal na utos para sa AVIF o maramihang format.
Bigyan ng prioridad ang lead image at mga content image na nakaimpluwensya sa first useful view, hindi lahat ng archive image nang sabay-sabay.
Panatilihin ang deterministic asset names o isang versioned mapping upang mabilis maibalik ang dating JPEG, PNG, o WebP path.