Как да обработваме и оптимизираме снимки за уеб и SEO?

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

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

Имена на файловете

1. Никога НЕ използвайте кирилица в имената на файловете. Да!

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

На моя десктоп: хомеопатия.jpg

На уеб сървъра: %D1%85%D0%BE%D0%BC%D0%B5%D0%BE%D0%BF%D0%B0%D1%82%D0%B8%D1%8F.jpg

Ето защо нашата препоръка е да се придържате към имена на латиница(шльоканица) или в конкретния пример: homeopatia.jpg

2. Никога НЕ използвайте странни символи и празни пространства.

Ще се учудите колко често хората описват файловете си с всевъзможни странни символи от типа на ” % & $ ‘ и т.н. Повечето от тези символи се използват в програмните езици като служебни символи, и попадайки в имената на файловете могат да бъдат интерпретирани като програмен код и да доведат до “счупване” на страниците.

Същото важи и за празни пространства(интервал) във името на файла: Моята страхотна ваканция на Малдивите.jpg

Интервалите също представляват “символ”, който представлява ето това: %20, т.е. отново нещо подобно на код, а и не четимо за окото. Съответно ако вашият файл се казва “a b.jpg”, то той ще бъде интерпретиран като a%20b.jpg… Капиш 😉

В заключение, нашата препоръка е да се придържате към използване на латиница в имената на файловете и да използвате единствено тире “-“, за да разделяте думичиките в името на файла от vashata-strahotna-vakancia-na-maldivite.jpg.

Компресия и качество на снимките

1. Не използвайте .PNG освен ако снимката, която използвате няма нужда от прозрачност в нея.

Много често се случва потребителите да публикуват огромни снимки, само защото по подразбиране PhotoShop или други софтуери предлага този снимков формат. А това е тотално грешно!

Използвайте .PNG единствено и само ако е необходимо снимката да има прозрачен фон. Ако не е необходимо, тогава използвайте JPEG, който позволява да компресирате файла и да спестите огромно количество кило и мегабайти.

2. Компресирайте ги тези  JPEG-зи 😉

Ако използвате PhotoShop, при експорт на снимката в JPEG, задайте максимум на компресията 65. Над тази стойност обикновените потребители няма да забележат подобрение в качеството, а само увеличение в кило и мегабайтите 😉

3. Помислете и за Webp

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

4. CDN (Content Delivery Network)

Отново няма да навлизам в детайли какво представляват CDN-ите, питайте Google или клликнете тук. Един от най-популярните е CloudFlare, който предоставя безплатна услуга, от която можете да се възползвате и да зареждате статичното съдържание като снимки, css и др. директно от тям. Така ще спестите сериозно количество трафик, както и ще облекчите уеб сървъра от допълнителни заявки за статично съдържание.

Ако решите да инвестирате в платените планове на CloudFlare, то там вече ще намерите много екстри относно сервирането на снимките към потребителите, като например: автоматчино оразмеряване спрямо устройство, допълнителна компреси и др.