Оптимизация на изображения за уеб сайт – вече не е това, което беше! Google отдавна не се “радва” на уеб сайтове, изпълнени със стотици изображения без описание, по-големи от необходимото и с размер от рода на 6MB.
Точно поради тези причини, в настоящото ръководство ще ти дам насоки как да оптимзираш изображенията в уеб сайта си така, че големия G. да им се радва и да имаш 6+ при тест за оптимизация за търсещи машини.
В предстоящите редове (надявам се да не стане роман), ще ти разкрия не само за до болка познатите ни alt атрибути, но също и как да сервираш изображения, съобразени с мобилната версия на уеб сайта. Ще мина също и през XML картата на сайта, структурираната информация (structured data), и последно, но не и по значение – как да подбираш изображенията така, че да привличаш и задържаш потребители.
Започваме ли?
Като начало – ето пълен списък с всички теми, които ще покрия:
Структура на изображенията
- Използване на оригинални изображения
- Премахване на текст от изображения
- Премахване на излишните изображения
Подготовка на изображенията
- Използване на съотношение 4:3 или 16:9
- Оразмеряване на изображенията за размера, за който ще се използват
- Употреба на изображения с висока резолюция (HD или Retina)
- Използване на т.нар. next-gen формати за изображения
- Компресиране на изображения
- Употреба на описателни заглавия за изображения
Сервиране на изображенията
- Включване на кеширането
- Употреба на отдалечена мрежа за доставяне на съдържание (CDN)
- Употреба на т.нар. lazy loading
Идентифициране на изображенията
- Попълване на alt атрибуртите
- Употреба на caption
Та, време е да започна по същество, или да дам старт на първата част от това ръководство!
Оптимизация на изображения за уеб сайт
Най-добрите практики, що се отнася до оптимизиране на изображения за уеб сайт, се променят след всеки ъпдейт на алгоритъма за търсене на Google. Преди да стартирам с по-горе посочените точки, ето бърз анализ на положението в момента, изхождащ от настъпилите промени през последните 2 години.
За известен период от време, оптимизирането на изображенията за търсене беше считано за недотам важно действие. През 2013 г. от Google са добавили бутон за преглед на изображенията (view image) в резултатите от търсенето. Така, при търсене на изображения в Google, кликвайки на даден резултат, потребителя е бил пренасочван към страница само с изображението, а не към страницата, част от която е изображението (и съответно останалото съдържание). Това е довело до средно 63% загуба на трафик за уеб сайтовете.
През 2016г. от Getty images (уеб сайт – банка за стокови изображения), официално заявяват недоволството си от въпросния бутон пред Европейската комисия. С това си действие от Getty принуждават търсачката гигант да премахне бутона “view image”. Така при търсене в мрежата, кликвайки върху изображение, потребителя бива прехвърлен към страницата (с цялото й съдържание), на която се намира изображението, а от този момент оптимизацията на изображения за уеб сайтове отново влиза в играта като определящ органичния трафик фактор.
Алгоритмите за разпознаване на изображения стават все по-добри в идентифицирането на изображения
В тази секция на статията ще подходя с директен пример. Виж изображенията по-долу:
Тествайки изкуствения интелект на Google за разпознаване на изображения – Vision AI, останах изумена от това колко много знае той за това какво точно се съдържа в картинката. При това без никакви указания от името на изображението. 😉
Ако един алгоритъм може да се погрижи за основите, тогава трябва да насочим вниманието си към по-важните неща, което ни води до…
Семантична оптимизация за търсещи машини (Semantic SEO)
Алгоритмите за разпознаване на изображения не са единствените, които са получили ъпгрейд. Алгоритмите, които обхождат и консумират страниците ви, вече не търсят ключови думи, търсят точни съвпадения, за да разберат за какво се отнася самата страница. Сега те анализират цялото съдържание, за да разберат по-добре връзките между ключови думи и други важни думи, свързани с темата.
Това позволява на т.нар. паяци (web crawlers) да обхождат страниците на уеб сайта ти, за да разберат по-дълбокия смисъл на съдържанието му. Тоест – ако някой търси информация за темата на твоя уеб сайт, като използва синоним или вариант на правопис на твоята насочена ключова дума, търсачката ще може интуитивно да продължи да им предлага твоята уеб страница като качествен вариант. Това се нарича семантично търсене.
Отношенията между ключовите думи и начина, по който те се отнасят до дадена тема, придобиват все по-голямо значение. Ключовите думи са все още важни, но е важно и да разгърнем погледа си и към по-голямата картина.
Скоростта на зареждане на уеб сайта ти наистина е от значение
През юли 2018 г. Google обяви, че скоростта на уеб сайта е фактор за класиране в резултатите при мобилни търсения. По-рано скоростта на страницата беше само фактор за класиране за търсенията, извършени от настолен (desktop) компютър.
Това означава, че за да могат изображенията на уеб сайта ти да се справят добре в търсенето, не само трябва да добавиш правилната идентифицираща информация, като алтернативен текст (alt attributes), но и да оптимизираш самото изображението.
Твърде големите (като размер) изображения, които не са оптимизирани, добавят излишни мегабайти към дадената уеб страница.
Може да ти се струва, че изпадам в твърде много подробности, но тук целта е да разкрия по-голямата картинка и процесът и дълбокия смисъл на оптимизацията на изображения да стане ясен и смислен.
Оптимизация на изображение, което е подходящо за търсене
Използване на оригинални изображения
Спри да използваш т.нар. стокови изображения! Особено тези на усмихнати хора в офис (на които често може да видиш някой китаец, нищо, че таргет групата ти е в България) Оригиналните изображения се справят много по-добре в търсенето, отколкото стоковите изображения, затова развихри въображението си, извади смартфона си с 24mp камера, или пък DSLR камерата си, и направи няколко авторски изображения. Google ще възнагради оригиналността ти.
Ето какво казват самите Google „Уверете се, че визуалното ви съдържание е подходящо за темата на страницата. Препоръчваме ви да използвате изображения, които добавят оригинална стойност към страницата. Особено обезкуражаваме страниците, на които нито изображенията, нито текстът са оригинално съдържание.“
Премахни излишните изображения
Не създавай много изображения, само за да запълниш пространство на страницата си (освен ако не си фотограф и сайта ти не служи като портфолио). Идеята тук е да използваш изображения като способ за подобряване и поясняване съдържанието на страницата, както и като допълнителна информация. Както споменах по-рано, изображенията добавят много тяга към уеб страниците, така че ако изображението няма да подобри съдържанието ти, разкарай го.
Отново според Google, уеб страниците с по-малко, но съответстващи и авторски изображения, конвертират много по-добре, отколкото тези, изпълнени с “тонове” стокови, безсмислени изображения.
Не добавяй текст В изображенията
Важно е да избегнеш включването на текст в изображенията си. Ако искаш да имаш декоративно заглавие върху дадена снимка, то го създай с помощта на HTML и CSS. Това не само подобрява достъпността и четливостта, но и спомага за по-отчетлив и добре изпълнен адаптивен дизайн.
Подготовка на перфектно оптимизираното изображение
След като решиш какво точно ще бъде изображението, което ще качиш в уеб сайта си, е важно да изпълниш още няколко стъпки, за да подготвиш напълно. Изображение, което е подходящо оразмерено, компресирано, в следващо поколение формат (JPEG 2000 например), с описателно заглавие, ще се представя много по-добре в търсенето.
Регулиране на размерите
Ако си забелязал, когато използваш Google изображения, изключително големи и изключително широки (като панорамни изображения) обикновено не се показват при търсене. Най-често ще намериш изображения, които се придържат към съотношенията 4: 3 или 16: 9. За всичко останало трябва да зададеш търсенето си с правилните параметри.
Мащабиране на изображенията
Мащабирането на изображенията означава да ги преоразмериш до размерите, които ще използваш на сайта си. Когато изображенията са по-големи или са преоразмерени посредством HTML или CSS (примерно <img src=”sofia_1.jpg” width=”400” height=”500” alt=”София през нощта”/>, това създава допълнителна работа за браузъра и забавя скоростта на страницата, което определено не е добре.
Извод – добавяй изображенията предварително мащабирани за пространството, което ще заемат на уеб страницата. Може да видиш това пространство посредством браузъра и неговите developer tools.
Също, може да тестваш дали имаш по-големи от необходимото изображения посредством инструменти като GTmetrix или PingDom.
Ако имаш твърде много големи изображения, инструмент като Smush Pro CDN може да преоразмери всички тях накуп. Може също да използваш Photoshop за изображения в пакет, въпреки че това работи само за JPEG изображения.
Retina изображения
Устройствата, имащи Retina дисплей, имат два пъти повече пиксели от обикновените екрани. Не можах да намеря никакви доказателства, че Google награждава изображенията на Retina с по-висок ранг на страница, но можем да предположим, че тъй като екраните с висока дефиниция печелят пазарен дял, това ще става все по-вероятно, особено след като Google награждава сайтовете, които осигуряват голям потребителски опит.
Няма официални изявления, че Google награждава Retina изображенията спрямо останалите с по-висок ранг на страницата, но може да се предположи, че тъй като екраните с висока разделителна способност печелят все по-голям пазарен дял, това ще става все по-вероятно и някой ден може да го видим в акция. Особено изхождайки оттам, че Google награждава уеб сайтовете, чието съдържание дава удовлетворение и добро изживяване на потребителя.
Създаването на изображение за Retina дисплеи е лесно. Всичко, което трябва да направиш, е да замениш текущите изображенията на сайта си с версии, които са два пъти по-широки и два пъти по-високи. Сервиране на правилното изображение за различните устройства е малко по-трудно, но може да използваш плъгин като WP Retina 2x, в случай, че уеб сайта ти използва WordPress.
Използване на формати за изображения от следващо поколение
Ако си използвал Google PageSpeed Insights наскоро, може би си забелязал съобщението за възможността „Да се показват изображения от следващо поколение“.
Намерението на Google с това съобщение е не само да спомогне за създаването на по-бърза мрежа, но и да ни провокира да прехвърлим всичките си изображения към техния формат с WebP отворен код. Форматите на изображения от следващо поколение, като JPEG 2000 и WebP, имат превъзходни възможности за компресиране на изображения. Така че, не само страницата ти ще бъде по-бърза, но и ще се възползваш от добрата страна на Google, като използваш предпочитания от тях формат за изображения.
Компресиране на изображенията
Компресирането на изображението е един от най-пренебрегваните начини за създаване на по-малък графичен файл. Направено правилно, посетителите на уеб сайта ти едва ли ще забележат разлика.
А това може да направиш, като използваш инструмент като Adobe Photoshop или други графични редактори, с които да компресираш изображението преди качване. Друг вариант (който не препоръчвам особено), е да използваш плъгин, в случай, че използваш WordPress платформата.
С тази секция завършвам първата част от “Оптимизиране на изображения за уеб сайт [пълно ръководство]”. В следващата част очаквай повече информация за това как правилно да именуваш правилно изображенията си, как да подбираш най-добрите alt атрибути. как да добавяш описание (caption) и още много 🙂
Здравей 🙂 Казвам се Петя Петкова и съм уеб дизайнер. Развивам дейността си от 2013 година, като през годините съм изградила множество уеб сайтове, била съм лектор на множество конференции, свързани с уеб дизайна, и се стремя да предоставям полезна информация ежедневно.
