Image-rendering

V případě, že obrázek na stránce má jiné než skutečné rozměry, které mu byly nastaveny v grafickém editoru, musejí se webové prohlížeče vypořádat se změnou velikosti.

Pro změnu velikosti obrázků existuje řada algoritmů:

Různé editory i různé prohlížeče používají různé algoritmy pro zmenšení obrázků. Jednodušší algoritmy jsou rychlejší a na fotografie je optimální jiný algoritmus, než na perokresbu, proto lepší grafické editory umožňují volbu algoritmu pro zmenšení.

Bubák

Příklad různých algoritmů pro změnu velikosti v programu Irfan View.

Filtry v Irfan View

Pro obdobný ruční výběr algoritmu v prohlížečích slouží právě vlastnost image-rendering.

Využití

Jiné než výchozí hodnoty se zdají být vhodné spíš pro pixel art, ale mohou se hodit i pro obrázek s QR kódem.

Zvětšení QR kódu s image-rendering
Srovnání zvětšení malého QR kódu s ruzně nastaveným renderováním

Pro fotografie a většinu obrázků je nejlepší výchozí chování, které prohlížeče používají i bez explicitního použití image-renderingu.

Zvětšení fotografie s image-rendering
Srovnání zvětšení malé fotografie s ruzně nastaveným renderováním

Kde se dá úprava renderování použít?

Vlastnost image-rendering je aplikována na:

  1. obrázky v <img>,
  2. kreslicí plátno <canvas>,
  3. pozadí elementů background-image

Způsoby renderování obrázku

image-rendering: auto

Výchozí chování. Při zvětšení obrázek působí rozmazaně, ale nejsou přímo patrné jednotlivé pixely. Pro fotografie se jedná o nejlepší (nebo možná spíš nejméně špatný) způsob – ideální je mít obrázek v dostatečném rozlišení.

Nevýhoda tohoto algoritmu nastává u obrázků s ostrými barevnými přechody, které budou rozmazané.

Takto vypadá čtvereček s kolečkem uprostřed čtvereček o rozměrech 10 × 10 při desetinásobném zvětšení.

image-rendering: pixelated

Alternativou je hodnota pixelated, která docílí toho, že výsledek bude vypadat jako by pouze sestával z větších pixelů.

Zápis image-rendering: pixelated funguje pouze v Chrome/Opeře. I v ostatních prohlížečích je ale možné dosáhnout stejného vzhledu.

  • IE používá konstrukci -ms-interpolation-mode: nearest-neighbor
  • Ve staré Opeře, Firefoxu a starším Chrome/Safari funguje stejně jako pixelated hodnota crisp-edges:
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;

Na výsledném obrázku jsou patrné jednotlivé pixely. Dříve tento způsob používaly prohlížeče jako výchozí, kvůli úspoře výkonu.

Samostatná ukázka

image-rendering: crisp-edges

Nakonec existuje ještě hodnota crisp-edges, která sice v některých prohlížečích funguje, chová se ale stejně jako pixelated.

Podle návrhu CSS specifikace by měla pixely na sebe napojit, aby nebylo vidět jednotlivé kostičky, což by se asi nejvíc hodilo právě pro ten pixel art.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS blend

CSS blend

CSS vlastnost background-blend-mode slouží ke smíchání barvy s obrázkem.

CSS mask

CSS vlastnost mask

Vlastnost mask dokáže vytvářet elementy s texturou nebo nepravidelnými tvary.

Background-clip

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

Border-image

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

Object-fit

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

Komentáře