Eric Portis sa ku mne pripojil, aby som sa ponoril do sveta citlivých obrázkov.
Začíname od základov. Responzívne obrázky sú konkrétne obrázky v HTML a existujú z dôvodu túžby po lepšom výkone. Obrázky sú pravdepodobne najväčším vinníkom celkovej váhy webových stránok. Ak sa dokážeme vyhnúť odosielaniu príliš veľa pixelov po sieti, mali by sme. Koniec koncov, obrazovka, ktorá má šírku iba 720 pixelov, nepotrebuje obraz so šírkou 2 000 pixelov, aj keď je to dvojnásobný displej.
Problém je v tom, že prehliadače sú pri sťahovaní prvkov, ako sú obrázky, skutočne agresívne. To je dobré, preto web (môže byť) taký rýchly, aký je. Znamená to však tiež, že musíme poskytnúť veľa informácií o našich obrázkoch priamo v kóde HTML. Nemôže prehliadač vedieť, aký veľký je obrázok? Iste to bude možné po stiahnutí. Nemôže prehliadač vedieť, aký veľký obrázok sa na stránke zobrazí? Určite to môže byť po stiahnutí všetkých CSS a vykonanom rozložení. Syntax responzívnych obrázkov sa snaží všetko prekonať poskytnutím týchto informácií priamo v syntaxi. Zistiť, že syntax je zložitá! Tam je srcset, sizesa prvok, a tam je tona zabaliť svojej mysli okolo neho.
Stále sa to komplikuje.
Syntax, ktorú potrebujete vytvoriť, je založená na tom, že máte viac kópií tohto obrázka, na ktorých je možné zostaviť syntax. Ako ich vyrábate? Koľko by ste ich mali zarobiť? Aká by mala byť veľkosť?
Našťastie okolo citlivých obrázkov vyskakuje niekoľko automatizovaných nástrojov. WordPress bol skorým hráčom. Po vybalení z krabice vytvorí WordPress niekoľko verzií obrázkov, ktoré nahráte, a výstupné srcsetsyntaxou. Môžete však urobiť oveľa lepšie. Môžete uviesť sizesatribút, ktorý sa skutočne zhoduje s tým, čo vaša téma robí, a s veľkosťou týchto obrázkov.
WordPress taktiež nepoužíva žiadnu špeciálnu inteligenciu na vytváranie viacerých kópií obrázkov, ktoré nahrávate. Ale dalo by sa. Nástroj, ako je generátor citlivých bodov na prerušenie obrazu, využíva určitú inteligenciu na zisťovanie, koľko rôznych obrázkov môžete vytvoriť, aby ste dosiahli rovnováhu medzi tým, či máte pre danú prácu dokonalý obraz a či nepotrebujete vytvárať stovky alebo tisíce kópií. to. Tento nástroj má API!
Stále sa to komplikuje.
Rôzne prehľadávače podporujú rôzne formáty obrázkov. Napríklad WebP. Úsporu výkonu je možné dosiahnuť poskytovaním správneho formátu obrázka v správnom prehliadači. Syntax responzívnych obrázkov s tým môže pomôcť, ale komplikuje to syntax. Mnoho obrazových formátov má tiež pojem kvalita. V akej kvalite ukladáte týchto viac kópií?
V tejto chvíli je vhodný čas spomenúť Cloudinary. Mám to integrované práve teraz v CSS-Tricks a pomáha to s mnohými týmito vecami. Mal by som spomenúť, že som platiacim zákazníkom spoločnosti Cloudinary, a tento screencast nebol sponzorovaný, ale spoločnosť Cloudinary sponzorovala triky CSS vo forme dvoch vysoko súvisiacich sponzorovaných príspevkov:
- Responzívne obrázky vo WordPresse s Cloudinary, 1. časť
- Responzívne obrázky vo WordPresse s Cloudinary, 2. časť
Stručne povedané, tu je návod, ako to teraz všetko funguje na CSS-Tricks:
- Nahrávam obrázky rovnako ako vždy s WordPress.
- Namiesto
srcsetinformácií generovaných pomocou WordPressu ich generuje toto inteligentnejšie rozhranie API. - Obrázok sa tiež nahrá do cloudu.
- Keď WordPress filtruje a vydáva HTML pre obrázky, použijú sa všetky tieto dobré
srcset(a vlastnésizes) údaje. Adresa URL smeruje na cloudové adresy URL. - Webová adresa Cloudinary využíva schopnosť spoločnosti Cloudinary automaticky upravovať formát aj kvalitu (pomocou ich vymyslenej technológie), aby sa ubezpečil, že je v konkrétnom prehliadači, ktorý požaduje obrázok, čo najlepšie.
- Staré obrázky, ktoré sa nenahrali do služby Cloudinary, pôvodne stále využívali výhody cloudovej dobroty. Nemajú tak inteligentné
srcsetdáta, ale stále používajú „načítanie“ adries URL, čo znamená, že môžu ťažiť z automatického formátovania a automatickej kvality (čo je každopádne pravdepodobne slušné zvýšenie výkonu).
Stručne povedané, nielenže tu na CSS-Tricks používam responzívne obrázky, aby som pomohol s výkonom, cloudová integrácia túto hru vážne vylepšuje.
Som tiež rád, že to nie je tvrdá závislosť. Ak sa doplnok Cloudinary niekedy vypne, všetko sa vráti späť k normálnym obrázkom reagujúcim na WordPress.