Промяната е нещо константно! Понякога е за добро, понякога – не. Но в случая имаме позитивна промяна, свързана с излизането на нови SEO формати за изображения!
Тези файлове предоставят по-добра компресия и размер и съответно увеличават многократно скоростта на всеки сайт. Ако искаш и ти да си в крак с положителната промяна, тогава остани с мен до края на статията. Ще получиш полезна информация за това как да използваш всички нови SEO формати за картинки и снимки, какви са техните плюсове (освен споменатата скорост), минуси и как да се справиш с потенциални проблеми.
Да започваме!
Кои са въпросните нови SEO формати за изображения?
Нека да започнем с творението на Google – WEBP!
WEBP се произнася като „Weppy“ и към момента на публикуване на тази статия все още се разработва. Въпреки това форматът е напълно пригоден за използване и това може да се постигне с лекота.
Какви са плюсовете от използването на WEBP?
За разлика от добре познатите ни класически файлови формати, WEBP е създаден с конкретната идея да се използва за интернет цели. Главно в уеб сайтове. В него са включени алгоритми за lossy и lossless компресия, чрез което една снимка ще бъде с около 26% по-малка по размер спрямо PNG и 25-34% спрямо JPEG. Независимо от голямата компресия, форматът предоставя картинки със запазено оригинално качество.
Освен това, WEBP съчетава най-доброто от познатите JPEG и PNG файлове. Това означава, не само страхотна компресия, но дори и възможност за прозрачност. Тоест част от картинката/снимката да са прозрачни и така лесно да се напаснат над други елементи от сайта (примерно на фона на страницата). Виж тук за пример и сравнение между PNG и WEBP.
Kакви са недостатъците на WEBP?
Съвместимост с различните браузъри. Добрата новина е, че явно интересът към новия SEO формат за изображения е доста голям (и честно казано има защо това да е така) и към момента на публикуване на този блог пост, той вече е поддържан от следните браузъри:
- Google Chrome
- Mozilla Firerox
- Microsoft Edge
- Opera
Препоръчвам активно да следиш следния линк, за да си запознат с актуалния статус на файловия формат: A new image format for the Web| WebP | Google Developers.
Какво да направя, ако браузъра на потребителя не поддържа WEBP?
Трябва да предвидиш така наречената „fallback логика“. Тоест логическо преценяване от страна на кода на сайта, дали браузърът ще поддържа WEBP. Ако това условие е налице, ще се зареди новият SEO формат. Ако обаче поради някакви причини това не е възможно, посетителят ще види изображението в PNG или JPEG вариант (в зависимост какво си избрал за fallback опция).
Как да постигнеш това с най-обикновен HTML? Чрез употребата на <picture> таг-а! Несъвместимите браузъри няма да го поддържат и следователно няма да го заредят. Но в него можеш да добавиш класическия <img> таг, който да сочи към JPEG/PNG вариант на изображението. На практика от примера с целия блок от код, който ще видиш по-долу, браузърът, който не поддържа WEBP ще разпознае само часта с <img> и ще зареди нейното съдържание.
<picture> <source srcset="/път-до-новия-формат/картинка.webp" type=”image/webp”></source> <img src="/път-до-fallback-варианта/картинка.png"> </picture>
Ако нямаш възможност да използваш HTML или просто не желаеш да подходиш по този начин, тогава имаш възможност да предоставиш формата и чрез CSS. Тук обаче ще се нуждаеш от JavaScript библиотеката Modernizr. Тя има за задача да провери какви възможности за работа с HTML, CSS и JavaScript има браузъра на посетителя. Ако поддържа WEBP – ще го зареди. Ако не – ще предостави вариант в JPEG/PNG.
Ето примерен CSS код, за постигане на тази цел (както виждаш той е предвиден за клас backgroundimage и на мястото на този клас можеш да поставиш твой целеви клас):
.no-webp .backgroundimage {
background-image: url("резервна–картинка.png");
}
.webp .backgroundimage {
background-image: url("целева картинка.webp");
}
От този линк ще научиш още възможности за работа с Modernizr и WEBP.
Други инструменти, подобни на Modernizr са:
- WebPJS – предоставя възможност за показване на WEBP, без промяна на синтаксиса на таговете за изображенията;
- Picturefill – предоставя поддръжка на <picture> елемент за браузърите, които не го поддържат.
А от тук можеш да следиш за прогреса по поддръжката на въпросния елемент.
Следващите представители на новите SEO формати за изображения са JPEG 2000, JPEG XR и HEIC/HEIF .
Всички те могат да предоставят надеждна компресия и скорост. По това си приличат с WEBP. Друга прилика с него е, че все още не са широко поддържани от различните браузъри (макар и последният вече да е взел предимство и затова и беше разгледан в детайли в тази статия).
За момента JPEG 2000 се поддържа основно от Safari (но не и вариaнта за Windows), a JPEG XR работи добре с Internet Explorer и Microsoft Edge.
HEIC/HEIF е страхотен формат, който поддържа multi-frame изображения с multi-frame компесия. Освен това той поддържа и различни видове данни, които не са задължително картинки. За момента развитите по него има за продуктите на Apple, но поради лицензионни и патентни проблеми, той не може да се използва с конкурентите.
Задължително ли следва да забравим за класическите формати за изображения и да ги използваме само за fallback варианти?
Според Google – да. Но на практика моето мнение е, че JPEG и PNG, както и останалите класически варианти ще останат опция за много разработчици, дизайнери и собственици на сайтове. Те са кованото желязо, с което сме свикнали и винаги ще се намери възможност за приложението им. И тук не говоря само за fallback варианти, а по принцип. Разбира се един ден е напълно възможно да има нов властелин над всички файлови формати, подходящи за SEO цели. За момента изглежда, че това може да е именно WEBP, но само времето ще покаже.
Ако искаш да изпробваш WEBP, ще откриеш различни онлайн и офлайн конвертъри, както и плъгин за Photoshop. Ако все още желаеш да използваш класическите файлови формати, тогава се погрижи да предлагаш оптимизирани изображения на твоя сайт. Прочети статията ми по темата, за повече информация.
До нови срещи!
