Оптимизацията на изображенията означава възможно най-много намаляване на размера на  изображенията, без да се нарушава качеството, така че времето за зареждане на страницата да остане ниско. Това е и SEO оптимизация на изображенията. Тоест, да направите вашите изображения да се класират както в Google, така и в другите търсачки.

Оптимизацията на изображенията означава да се уверите, че изображенията ви изглеждат безупречно на настолни, мобилни и таблетни устройств и че те не пречат на зареждането на уебсайта.

Целта на оптимизацията на изображенията е да се създадат висококачествени изображения с възможно най-малък размер на файла. Тук роля играят три основни елемента:

  • Размер на файла на изображението (JPEG срещу PNG срещу WEBP изображения)
  • Ниво на компресия
  • Височина и ширина на изображението

Като намерите баланса между трите, можете да намалите размера на изображението и да подобрите производителността на уебсайта.

Как да оптимизираме изображенията за уеб?

1. Използвайте кратки и директни имена на изображенията

Много е лесно да прегледате стотици снимки на продукти и да запазите имената на файловете, които фотоапаратът ви задава по подразбиране.

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

Бихте могли да използвате общото име, което вашият фотоапарат е определил за изображението (напр. DCMIMAGE10.jpg). Много по-добре би било обаче да дадете име на файла 2012-Ford-Mustang-LX-Red.jpg.

В горния пример купувачите на автомобили могат да търсят термини като:

  • 2012 Red Ford Mustang LX
  • Ford Mustang LX Red 2012
  • Red Ford Mustang LX 2012

Съответно, изображенията ще е хубаво да се именуват по следния начин:

  • 2012-Red-Ford-Mustang-LX.jpg
  • Ford-Mustang-LX-Red-2012.jpg
  • Red-Ford-Mustang-LX-2012.jpg

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

Разгледайте този въпрос и отговор от Moz, за да разберете колко е важно да именувате стратегически файловете с изображения на сайта си. Това определено може да подобри SEO оптимизацията на страницата ви, но също така може да помогне на вашите страници и изображения да се класират по-високо в страниците с резултати от търсенето (SERP).

2. Оптимизирайте внимателно alt tags

Alt атрибутите са текстовата алтернатива на изображенията, когато браузърът не може да ги визуализира правилно. Те се използват и за осигуряване на уеб достъпност. Дори когато изображението е визуализирано, ако минете с мишката над него, ще видите текста на alt атрибута (в зависимост от настройките на браузъра).

Атрибутът alt също така добавя стойност за оптимизацията на вашия уебсайт. Добавянето на подходящи alt атрибути, които включват подходящи ключови думи, към изображенията в уебсайта ви може да ви помогне да се класирате по-добре в търсачките. Всъщност използването на alt атрибути вероятно е най-добрият начин продуктите ви за електронна търговия да се показват в изображенията и в уеб търсенето на Google.

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

Ето някои прости правила за атрибутите alt:

  • Описвайте изображенията си на разбираем език, както сте направили за имената на файловете с изображения.
  • Ако продавате продукти, които имат номера на модели или серийни номера, използвайте ги в alt атрибутите си.
  • Не пълнете alt атрибутите си с ключови думи (напр. alt=”ford mustang muscle car buy now cheap best price on sale”).
  • Не използвайте alt атрибути за декоративни изображения. Търсачките могат да ви санкционират за прекомерна оптимизация.

3. Изберете разумно размерите на изображението и ъглите на продукта

Обичайна практика е да показвате няколко ъгъла на продукта си. Ако се върнем към примера с Ford Mustang, не бихте искали да покажете само един кадър на автомобила, особено ако се опитвате да го продадете. Във ваш интерес е да покажете снимки на:

  • Интериора
  • Задната част (особено въздушния спойлер)
  • Джантите
  • Двигателят (все пак това е Mustang)

Най-добрият начин да се възползвате от тези допълнителни снимки е да попълните атрибутите alt. Начинът, по който ще направите това, е като създадете уникални alt атрибути за всяка продуктова снимка:

2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> използвайте атрибут alt: alt=”2012 Ford Mustang LX Red Leather Interior Trim”

2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> използва атрибута alt: alt=”2012 Ford Mustang LX Red Rear View Air Spoiler”.

Ключът тук е да добавите описания към базовия си alt атрибут, така че потенциалните търсещи да попаднат на вашия уебсайт. Ако положите допълнителен труд, Google ще ви възнагради с търсещи потребители.

Едно предупреждение относно предоставянето на по-големи изображения! Сега може да искате да предоставите по-големи изображения на посетителите си, което може да допринесе за чудесно потребителско изживяване, но бъдете внимателни.

Каквото и да правите, не поставяйте най-голямото изображение на уебстраницата си и просто не намалявайте размерите му чрез код. Това ще увеличи времето за зареждане на страницата ви поради по-големия размер на файла. Вместо това направете по-малък размер на изображението и предоставете възможност за разглеждане на по-голямо изображение в изскачащ прозорец или на отделна уебстраница. Съвет: Научете как да направите изображенията на продукти с възможност за увеличаване във вашата тема, като използвате jQuery image zoom.

4. Промяна на размера на изображенията

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

За изображенията за електронна търговия добро правило е да се опитате да поддържате размера на файла на изображението под 70 килобайта. Понякога това може да бъде трудно, особено за по-големи изображения.

Ето и някои други впечатляващи онлайн инструменти за редактиране на изображения:

  • Експертите определят PicMonkey като “зашеметяващо добър инструмент за редактиране на снимки”.
  • PIXLR е изключително лесен за употреба и се предлага със 100% безплатно приложение за вашия смартфон, така че можете да редактирате в движение.
  • Canva е друг доста усъвършенстван онлайн редактор на изображения.
  • www.webspeedtest.cloudinary.com
  • www.photopea.com
  • www.squoosh.app
  • И накрая, винаги има GIMP. GIMP е безплатно софтуерно приложение за редактиране на изображения с отворен код, което може да се използва под Windows, Mac или Linux. То може да прави всичко, което може да прави Photoshop, но е малко по-неудобно. Но за безплатно приложение за редактиране на изображения не можете да го надминете.

Да предположим, че правите всичко останало правилно, както е описано в тази публикация. Оптимизирате изображенията си и ги качвате. Но след това добавяте това изображение с ширина 1080px в малка колона и то се показва с ширина 225px. Това не е идеално.

WordPress всъщност създава много размери на изображенията, когато качвате изображение. Това невинаги е очевидно, но може би си спомняте, че сте виждали опцията да ги избирате.

5. Изберете правилния формат на изображението

Съществуват три общи типа файлове, които се използват за публикуване на изображения в уеб: JPEG, GIF и PNG. Нека разгледаме трите типа и как те влияят на едно и също изображение:

  1. JPEG (или .jpg) е де факто стандартният тип файл за изображения за уеб. Изображенията JPEG могат да бъдат компресирани значително, което води до качествени изображения с малки размери на файловете. В изображението по-горе форматът JPEG позволява прилично качество при малък размер на файла.
  2. GIF (.gif) изображенията са с по-ниско качество от JPEG изображенията и се използват за по-опростени изображения, като например икони и декоративни изображения. GIF файловете също така поддържат анимация. Що се отнася до оптимизацията на изображенията, GIF файловете са чудесни за онези обикновени, прости изображения в уебстраницата, които включват само няколко цвята.
  3. PNG изображенията стават все по-популярни като алтернатива на GIF файловете. PNG изображенията поддържат много повече цветове от GIF изображенията и не се влошават с течение на времето при повторно запазване, както е при JPEG изображенията. Въпреки че файловият тип PNG започва да се използва все по-често, размерите на файловете все още могат да бъдат много по-големи от тези на JPEG изображенията.

Ето няколко съвета, които да запомните, когато избирате типове файлове:

  • В повечето случаи в електронната търговия JPEG ще бъде най-добрият ви залог. Те осигуряват най-добро качество на изображението при най-малък размер на файла.
  • Никога не използвайте GIF файлове за големи продуктови изображения. Размерът на файла ще бъде много голям и няма добър начин да го намалите. Използвайте GIF файлове само за миниатюри и декоративни изображения.
  • PNG могат да бъдат добра алтернатива както на JPEG, така и на GIF. Ако можете да получите продуктови снимки само във формат PNG, опитайте да използвате PNG-8 вместо PNG-24. PNG са отлични като прости декоративни изображения поради изключително малкия размер на файловете. Ако сикате да използвате снимки със трансперант фон тогава PNG може би е най-удачно, тъй като JPG не поддържа трансперант фон.
  • Повечето софтуери за редактиране на изображения могат да записват изображения във всеки от разгледаните по-горе файлови формати.

6. Тествайте изображенията си

Целият смисъл на оптимизирането на изображенията е да спомогне за увеличаване на печалбата ви. Говорихме за намаляване на размерите на файловете и за това как да накарате търсачките да индексират изображенията ви, но какво ще кажете за тестване на изображенията, за да видите кое води до повече клиенти?

Тествайте броя на продуктовите изображения на страница. Тъй като времето за зареждане е проблем за някои нехоствани сайтове за електронна търговия, може да откриете, че намаляването на броя на изображенията на дадена страница ще увеличи броя на кликванията и продажбите. Възможно е също така предоставянето на много изображения на страница да подобри потребителското изживяване и да доведе до повече продажби. Единственият начин да разберете това е да го тествате.

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

Тествайте колко продуктови снимки трябва да имате на страниците с категории. Десет, 20, 100 продукта? Тествайте броя на продуктите, които изброявате на страниците с категории, за да видите кое работи най-добре за вашите клиенти.

7. Добавяйте “Caption” към изображенията, ако е необходимо

Друго поле, което ще забележите в мултимедийната библиотека на WordPress, се нарича “Caption”. Добре е да разберете, че не е необходимо да добавяте Caption към всяко изображение, което добавяте в WordPress. Вместо това, трябва да спрете и да помислите как ще се използва изображението.

Ключът, който трябва да запомните, е да не използвате надписа на изображението единствено с цел SEO оптимизация. Той трябва да има и второстепенна цел.

Тя е малко техническа, но се опитайте да помислите дали изображението се използва за целите на “сканирането”. Ако надписът на изображението ви се показва забележимо, когато потребителите сканират страницата, тогава използвайте надпис. Ако не е така, може би е прекалено оптимизирано да го използвате за всяко изображение. Използвайте Caption само ако за посетителите на уебсайта е логично да има такъв. Например в галерията е идеалното място за показване на надписи на изображения. Не забравяйте да добавяте надписи към изображенията, които използвате в галериите.