Eric Portis dołącza do mnie, aby zagłębić się w świat responsywnych obrazów.
Zaczynamy od podstaw. Obrazy responsywne to w szczególności obrazy w formacie HTML i istnieją z powodu chęci lepszej wydajności. Obrazy są prawdopodobnie największym winowajcą ogólnej wagi stron internetowych. Jeśli możemy uniknąć wysyłania zbyt wielu pikseli w sieci, powinniśmy. W końcu ekran o szerokości zaledwie 720 pikseli nie potrzebuje obrazu o szerokości 2000 pikseli, nawet jeśli jest to wyświetlacz 2x.
Problem w tym, że przeglądarki bardzo agresywnie podchodzą do pobierania zasobów, takich jak obrazy. To dobrze, ponieważ właśnie dlatego sieć (może być) tak szybka, jak jest. Ale oznacza to również, że musimy podać kilka informacji o naszych obrazach bezpośrednio w kodzie HTML. Czy przeglądarka nie może po prostu wiedzieć, jak duży jest obraz? Pewnie, że po pobraniu. Czy przeglądarka nie może wiedzieć, jak duży obraz będzie wyświetlany na stronie? Jasne, że tak, po pobraniu całego CSS i wykonaniu układu. Składnia responsywnych obrazów stara się wyprzedzić to wszystko, dostarczając te informacje bezpośrednio w składni. Dowiedzenie się, że składnia jest trudna! Jest srcset, sizesi elementem, a tam jest mnóstwo owinąć wokół umysł tam.
Jeszcze bardziej się komplikuje.
Składnia, którą musisz zbudować, opiera się na posiadaniu wielu kopii tego obrazu, w którym można zbudować składnię. Jak je robisz? Ile powinieneś zrobić? Jaki powinien być rozmiar?
Na szczęście wokół responsywnych obrazów pojawia się kilka zautomatyzowanych narzędzi. WordPress był wczesnym graczem. Po wyjęciu z pudełka WordPress utworzy wiele wersji przesyłanych obrazów i wyprowadzi srcsetskładnią. Ale możesz zrobić znacznie lepiej. Możesz podać sizesatrybut, który faktycznie pasuje do tego, co robi Twój motyw i jak zmienia rozmiar tych obrazów.
Ponadto WordPress nie używa żadnej specjalnej inteligencji do tworzenia wielu kopii przesyłanych obrazów. Ale może. Narzędzie takie jak responsywny generator punktów przerwania obrazu wykorzystuje pewną inteligencję do określania, ile różnych obrazów można wykonać, dzięki czemu można znaleźć równowagę między posiadaniem bliskiego idealnego obrazu do pracy a brakiem konieczności wykonywania setek lub tysięcy kopii to. To narzędzie ma API!
Jeszcze bardziej się komplikuje.
Różne przeglądarki obsługują różne formaty obrazów. Na przykład WebP. Serwowanie odpowiedniego formatu obrazu we właściwej przeglądarce przynosi oszczędności. Składnia responsywnych obrazów może w tym pomóc, ale komplikuje składnię. Wiele formatów obrazu ma również pojęcie o jakości. W jakiej jakości zapisujesz te wielokrotne kopie?
W tym miejscu jest dobry moment, aby wspomnieć o Cloudinary. Mam go teraz zintegrowany z CSS-Tricks i pomaga w wielu z tych rzeczy. Powinienem wspomnieć, że jestem płacącym klientem Cloudinary, a ten screencast nie był sponsorowany, ale Cloudinary sponsorował CSS-Tricks w postaci dwóch wysoce powiązanych sponsorowanych postów:
- Responsywne obrazy w WordPress z Cloudinary, część 1
- Responsywne obrazy w WordPress z Cloudinary, część 2
W skrócie, oto jak to wszystko działa teraz na sztuczkach CSS:
- Przesyłam obrazy tak, jak zawsze robiłbym to z WordPress.
- Zamiast
srcsetinformacji generowanych przez WordPress, są one generowane przez to inteligentniejsze API. - Obraz jest również przesyłany do Cloudinary.
- Kiedy WordPress filtruje i generuje kod HTML dla obrazów, stosowane są wszystkie dobre
srcset(i niestandardowesizes) dane. Adres URL wskazuje na adresy URL Cloudinary. - Cloudinary URL wykorzystują zdolność Cloudinary do automatycznego dostosowywania zarówno formatu, jak i jakości (przy użyciu ich fantazyjnej technologii), aby upewnić się, że wszystko jest najlepsze dla konkretnej przeglądarki żądającej obrazu.
- Stare obrazy, które pierwotnie nie zostały przesłane do Cloudinary, nadal korzystają z całej dobroci Cloudinary. Nie mają tak inteligentnych
srcsetdanych, ale nadal używają adresu URL „pobierania”, co oznacza, że mogą skorzystać z automatycznego formatowania i automatycznej jakości (co i tak jest prawdopodobnie przyzwoitą częścią poprawy wydajności).
Krótko mówiąc, nie tylko używam responsywnych obrazów tutaj w CSS-Tricks, aby pomóc w wydajności, integracja Cloudinary poważnie poprawia tę grę.
Cieszę się też, że nie jest to trudna zależność. Jeśli wtyczka Cloudinary zostanie kiedykolwiek wyłączona, wszystko wróci do normalnych responsywnych obrazów WordPress.