Využíváte efektivně responzivní obrázky? Rozšíření pro Chrome odpoví

Řada webů má problém s tím, že do stránky posílá obrázky s rozměrem, který neodpovídá tomu, jak je pak obrázek na stránce vykreslen. Díky rozšíření pro webový prohlížeč Chrome si můžete velice rychle svůj web a obrázky na něm zkontrolovat.
reklama

Řešíte pomocí img[srcset][sizes] posílání různých velikostí obrázku do webové stránky? Pokud chcete urychlit načítání webové stránky například na mobilním internetu, pak byste měli. Obrázky s rozměry většími, než v jakých jsou skutečně zobrazeny, jsou plýtváním daty čtenářů.

Pomocí rozšíření pro webový prohlížeč Chrome s názvem NCC Image Checker rychle ověříte využití rozměrů načtených obrázků. Nainstalujte toto rozšíření, načtěte webovou stránku a v liště Chrome klepněte na ikonku NCC Image Checkeru. Zobrazí se panel, ve kterém klepněte na tlačítko Start.

Všechny obrázky na stránce se v tu chvíli překreslí barevnými překryvy v barvách od červené, přes zelenou až k modré. Barva signalizuje optimální využití rozměrů obrázku. Zelená je OK, modrá značí, že obrázek by měl být větší, červená a žlutá vás upozorní na zbytečně velký obrázek.

NCC Image Checker

Pokud je na obrázku dostatek místa, uvidíte informace o skutečných rozměrech a o rozměrech na webové stránce. Hodnota image coverage značí pokrytí plochy obrázkem. Ideální by tedy měla být jednička.

Rozšíření bere do úvahy také hustotu pixelů, takže pokud ji na webu neřešíte, pravděpodobně se vám obrázky, zobrazené na Windows jako dobře využité, zobrazí na Macu s Retinou jako malé.

Podobný přehled vám dokáže zobrazit i nástroj pro příkazový řádek s názvem imaging-heap. Jeho aktuální verzi se mi bohužel nepodařilo rozběhat, takže jenom posloužím screenshotem pro ukázku.

Výstup z imaging-heap

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru