Адаптивни изображения: правилният вариант за правилния екран

Полезно е да знаеш

Една снимка може да стои отлично върху широк монитор и да губи важните си детайли в тесен телефонен изглед. Простото намаляване на ширината не решава всяка задача. MDN различава нуждата от подходяща резолюция и нуждата от различно художествено кадриране. [1] Първата е свързана с количеството пикселна информация, а втората — с това каква част от сцената изобщо трябва да бъде показана. Разграничението е полезно още преди да започне изнасянето на файловете за сайта.

Ако изображението се показва в малка област, не винаги е необходимо да се прехвърля най-големият наличен оригинал. HTML предлага механизми като srcset и sizes за описване на варианти и условия на показване. [1] Това е различна идея от един голям файл, който CSS само визуално свива. За браузъра трябва да има достатъчно информация какви кандидати съществуват. После той може да избере подходящ ресурс според условията, вместо сайтът безусловно да изпраща една и съща версия на всеки посетител.

Елементът picture съдържа алтернативни source елементи и един img елемент. Браузърът разглежда условията и избира подходящ кандидат, а img предоставя и резервен вариант. [2] Така структурата има едновременно избор и основа за показване. Тя може да се използва, когато различните екрани изискват различни изображения или когато се предлагат различни формати. Нужно е обаче всички варианти да служат на една и съща смислова задача, а не случайно да показват несвързани сцени под един надпис.

При избора могат да участват атрибути като media, type и srcset. MDN посочва художественото кадриране сред основните случаи на употреба на picture. [2] Това помага например при широка групова снимка, в която лицата стават неразличими след смаляване. По-тесен кадър може да запази съществената информация за мобилния изглед. Важно е изборът да бъде съзнателен. Автоматично отрязване от произволния край на снимката може да премахне точно обекта, заради който тя е включена в материала.

За учебен пример можем да вземем фотография на сграда с важен вход. На широк екран общият план обяснява контекста, а при малка ширина по-близкият кадър може да подчертае входа. Ако обаче статията анализира силуета, същото изрязване може да е неподходящо. Правилното решение следва темата на материала. Така адаптивността не се свежда до техническо спестяване на байтове, а включва и редакторска преценка какво трябва да разбере читателят от изображението във всяка среда.

Проверката трябва да разглежда едновременно избрания файл, реалния размер и видимото съдържание. Полезно е да се опитат различни ширини и плътности на екрана, а не само едно ръчно стесняване на прозореца. После се проверява дали резервният вариант остава смислен и дали текстовото описание съответства на всички предложени кадри. Добре подготвените изображения правят страницата по-предвидима за различни устройства, когато техническите варианти са свързани с ясна визуална цел и измерване на действително доставения ресурс.