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.

Ř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.