Ř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.
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.
Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer (Drupal 7) a Site Builder (Drupal 8 & 9) 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.
Přidat komentář