Ерик Портис се присъединява към мен, за да поразровя света на отзивчивите изображения.
Започваме от основите. Отзивчивите изображения са конкретно изображения в HTML и съществуват поради желанието за по-добра производителност. Изображенията са може би най-големият виновник за общото тегло на уебсайтовете. Ако можем да избегнем изпращането на твърде много пиксели в мрежата, трябва. В края на краищата, екран, който е широк само 720 пиксела, не се нуждае от изображение с ширина 2000 пиксела, дори ако това е 2x дисплей.
Проблемът е, че браузърите са наистина агресивни по отношение на изтеглянето на активи като изображения. Това е добре, тъй като затова мрежата (може да бъде) толкова бърза, колкото е. Но това също означава, че трябва да предоставим куп информация за нашите изображения направо в HTML. Не може ли браузърът просто да знае колко голямо е изображението? Разбира се, че може, след като го изтегли. Не може ли браузърът да знае колко голямо изображение ще се показва на страницата? Разбира се, че може, след като изтегли целия CSS и изпълни оформлението. Синтаксисът на отзивчивите изображения се опитва да изпревари всичко това, като предоставя тази информация точно в синтаксиса. Да разберем, че синтаксисът е труден! Има srcset, sizesи елемент и има тон за увиване на ума си около там.
Все още се усложнява.
Синтаксисът, който трябва да изградите, се основава на наличието на множество копия на това изображение, в което да се изгради синтаксисът. Как ги правиш? Колко трябва да направите? Какъв размер трябва да бъдат?
За щастие има някои автоматизирани инструменти, които се появяват около отзивчиви изображения. WordPress беше ранен играч. Извън кутията WordPress ще създаде множество версии на изображенията, които качвате и извеждате srcsetсинтаксис. Но можете да направите много по-добре. Можете да предоставите sizesатрибут, който всъщност съответства на това, което прави вашата тема и как оразмерява тези изображения.
Освен това WordPress не използва специална информация за създаване на множество копия на изображенията, които качвате. Но би могло. Инструмент като реагиращия генератор на точки за прекъсване на изображения използва известна интелигентност, за да разбере колко различни изображения можете да направите, така че можете да постигнете баланс между това да имате близо до перфектното изображение за работата и да не се налага да правите стотици или хиляди копия то. Този инструмент има API!
Все още се усложнява.
Различните браузъри поддържат различни формати на изображения. Например WebP. Спестяването на ефективност може да се постигне чрез обслужване на правилния формат на изображението в правилния браузър. Синтаксисът на отзивчивите изображения може да помогне за това, но усложнява синтаксиса. Много формати на изображения също имат представа за качество. При какво качество запазвате тези множество копия?
В този момент е подходящ момент да споменем Cloudinary. В момента го интегрирах в CSS-трикове и помага за много от тези неща. Трябва да спомена, че съм платен клиент на Cloudinary и този скринкаст не беше спонсориран, но Cloudinary спонсорира CSS-трикове под формата на две силно свързани спонсорирани публикации:
- Отзивчиви изображения в WordPress с Cloudinary, част 1
- Отзивчиви изображения в WordPress с Cloudinary, Част 2
Накратко, ето как всичко работи сега на CSS-трикове:
- Качвам изображения точно както винаги бих направил с WordPress.
- Вместо
srcsetинформацията, генерирана с WordPress, тя се генерира от този по-интелигентен API. - Изображението се качва и в Cloudinary.
- Когато WordPress филтрира и извежда HTML за изображенията, се прилагат всички тези добри
srcset(и персонализираниsizes) данни. URL адресът сочи към облачни URL адреси. - URL адресът на Cloudinary използва способността на Cloudinary да регулира автоматично както формата, така и качеството автоматично (използвайки тяхната изискана технология), за да се увери, че нещата са най-добрите, които могат да бъдат за конкретния браузър, който иска изображението.
- Старите изображения, които първоначално не са били качени в Cloudinary, все още се възползват от цялата облачност. Те нямат толкова интелигентни
srcsetданни, но все пак използват „извличане“ на URL, което означава, че могат да се възползват от автоматично форматиране и автоматично качество (което вероятно е достоен принос за подобряване на производителността).
Накратко, не само, че използвам отзивчиви изображения тук на CSS-трикове, за да помогна с производителността, Cloudinary интеграцията сериозно подобрява тази игра.
Също така се радвам, че това не е тежка зависимост. Ако плъгинът Cloudinary някога бъде изключен, всичко просто се връща към нормалните образи, отговарящи на WordPress.