Eric Portis se ke mě připojil, aby se ponořil do světa citlivých obrazů.
Začínáme od základů. Responzivní obrázky jsou konkrétně obrázky v HTML a existují kvůli touze po lepším výkonu. Obrázky jsou pravděpodobně největším viníkem celkové váhy webových stránek. Pokud se můžeme vyhnout odesílání příliš mnoha pixelů po síti, měli bychom. Koneckonců, obrazovka široká pouze 720 pixelů nepotřebuje obraz široký 2 000 pixelů, i když je to 2x displej.
Problém je v tom, že prohlížeče jsou opravdu agresivní při stahování dat, jako jsou obrázky. To je dobré, proto web (může být) tak rychlý, jaký je. Znamená to ale také, že potřebujeme poskytnout spoustu informací o našich obrázcích přímo v HTML. Nemůže prohlížeč vědět, jak velký je obrázek? Jistě ano, po stažení. Nemůže prohlížeč vědět, jak velký obrázek se na stránce zobrazí? Určitě ano, po stažení všech CSS a provedeného rozložení. Syntaxe responzivních obrazů se snaží všechno předběhnout poskytnutím těchto informací přímo v syntaxi. Zjistit, že syntaxe je složitá! Tam je srcset, sizesa prvek, a tam je tuna, aby tam zabalila vaši mysl.
Stále se to komplikuje.
Syntaxe, kterou potřebujete vytvořit, je založena na tom, že máte více kopií tohoto obrázku, ve kterých můžete syntaxi sestavit. Jak je děláte? Kolik byste měli vydělat? Jaká by měla být velikost?
Naštěstí se kolem citlivých obrázků objevují některé automatizované nástroje. WordPress byl jedním z prvních hráčů. Po vybalení WordPress vytvoří více verzí obrázků, které nahrajete, a výstupní srcsetsyntaxí. Ale můžete to udělat mnohem lépe. Můžete zadat sizesatribut, který ve skutečnosti odpovídá tomu, co vaše téma dělá a jak určuje velikost těchto obrázků.
WordPress také nepoužívá žádnou speciální inteligenci k vytváření více kopií obrázků, které nahráváte. Ale mohlo. Nástroj, jako je generátor zarážky responzivního obrazu, využívá určitou inteligenci k zjišťování, kolik různých obrazů můžete vytvořit, takže můžete dosáhnout rovnováhy mezi tím, abyste měli téměř dokonalý obraz pro danou úlohu a nemuseli dělat stovky nebo tisíce kopií to. Tento nástroj má API!
Stále se to komplikuje.
Různé prohlížeče podporují různé formáty obrázků. Například WebP. Úspory výkonu lze dosáhnout poskytováním správného formátu obrázku správnému prohlížeči. Syntaxe responzivních obrázků s tím může pomoci, ale komplikuje to syntaxi. Mnoho obrazových formátů má také pojem kvalita. V jaké kvalitě ukládáte těchto více kopií?
V tuto chvíli je vhodná doba zmínit Cloudinary. Právě jsem to integroval do CSS-Tricks a pomáhá to se spoustou těchto věcí. Měl bych zmínit, že jsem platícím zákazníkem Cloudinary, a tento screencast nebyl sponzorován, ale Cloudinary sponzoroval triky CSS ve formě dvou vysoce souvisejících sponzorovaných příspěvků:
- Responzivní obrázky ve WordPressu s Cloudinary, část 1
- Responzivní obrázky ve WordPressu s Cloudinary, část 2
Stručně řečeno, tady je návod, jak to všechno nyní funguje na CSS-Tricks:
- Nahrávám obrázky stejně jako vždy s WordPress.
- Spíše než
srcsetinformace generované pomocí WordPress, jsou generovány tímto chytřejším API. - Obrázek se také nahraje do cloudu.
- Když WordPress filtruje a vydává HTML pro obrázky, použijí se všechna ta dobrá
srcset(a vlastnísizes) data. Adresa URL odkazuje na cloudové adresy URL. - Cloudové adresy URL využívají schopnost společnosti Cloudinary automaticky upravovat formát i kvalitu (pomocí jejich fantazijní technologie), aby se ujistil, že pro konkrétní prohlížeč požadující obrázek bude vše nejlepší, jaké může být.
- Staré obrázky, které nebyly nahrány do Cloudinary, původně stále těží ze všech výhod Cloudinary. Nemají tak inteligentní
srcsetdata, ale stále používají „načtení“ adresy URL, což znamená, že mohou těžit z automatického formátování a automatické kvality (což je každopádně pravděpodobně slušné zlepšení výkonu).
Stručně řečeno, nejenom používám responzivní obrázky zde na CSS-Tricks, abych pomohl s výkonem, cloudová integrace tuto hru vážně zvýší.
Jsem také rád, že to není tvrdá závislost. Pokud je plugin Cloudinary někdy vypnutý, vše se vrátí zpět k běžným responzivním obrázkům WordPress.