Обработка и оптимизация на изображения при работа със сайт

Какво трябва да знаем за изображенията, когато ги ползваме за нашият сайт

Липсата на оптимизация на изображения в даден сайт е една от най-често срещаните грешки при работа със сайтове.

Оптимизацията на изображения е изключително важна и по никакъв начин не трябва да се допуска нейната липса, тъй като това ще доведе до негативен ефект в скоростта на зареждане на нашия сайт, по-лошо класиране в търсещите машини като google, bing, yahoo и т.н, по – лошо потребителско изживяване и много други ефекти, които едва ли някой собственик на сайт желае.

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

Компресия на изображения

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

Как се компресира изображение

Съществуват различни инструменти за компресия на изображения. Ние ще Ви покажем няколко от най-разпространените.

Компресия на изображения с Photoshop

Когато обработите и оразмерите изображението, което ще качвате в сайта, преди да запаметите се уверете, че сте избрали опцията за запазване “File -> Save for Web”. След това ще видите прозорец с различни настройки. Уверете се, че запазвате файла в PNG формат и изберете “Save”.

Компресия на изображения с Optimizilla

Съществуват различни Online инструментим, с които може да оптимизирате изображенията, които искате да качите в сайта си. Един от най-добрите и ползвани е Optimizilla – можете да го намерите на: http://optimizilla.com/

Влезте в този сайт, качете готовите и оразмерени изображения. Инструментът ще започне тяхната компресия и когато са готови просто ги свалете на Вашето устройство. Ако сте качили няколко изображения, те ще се свалят в zip формат.

Компресия на изображения с google pagespeed insights

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

Когато достъпите инструмента, копирайте URL адреса на страницата, която искате да тествате. След края на теста, ще получите данни за намерените пропуски в сайта. Също така ще имате възможност да свалите вече оптимизираните изображения, които са намерени на конкретната страница. Имайте предвид, че в папката ще бъдат включени и други компоненти, като CSS и JS файлове, които също са били компресирани.

След като свалите оптимизираните изображения, просто ги заместете по техните места в страницата, която е преминала теста.

Alt тагове на изображения

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

Винаги, когато качвате изображение в сайта си, проверявайте дали то има alt таг. Това ще допринесе значително за добрата SEO оптимизация на Вашия сайт.

Как да поставим alt таг в дадено изображение.

В повечето съвременни CMS системи има едитори, с които лесно може да се постави alt таг на изображението. Уверете се, че той е дума или няколко думи, които са с малки букви и са свързани със средно тире например “заглавие” или “алт-таг”.

Ако все пак Вашият едитор не разполага с такава опция, alt тагът може да се сложи в HTML кодът. Вижте как става това

 //Стойността на атрибута alt е нашият alt таг
 <img src="img-path" alt="My alt tag">

Обърнете внимание на следното

• img - това е HTML таг, който казва, че типа на съдържанието ще бъде изображение;
• src - HTML атрибут, който оказва пътя на изображението;
• alt – HTML атрибут, който съдържа нашият alt таг.

Оразмеряване на изображения

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

Например, ако имате online магазин с различни продукти е абсолютно задължително да оразмерявате всяко продуктово изображение в подходящ размер. Ако не правите това, изображенията ще бъдат с различна големина, което ще доведе до лоша визия на продуктите. Някои изображения ще бъдат прекалено големи, а други прекалено малки, а както сами се досещате, това няма да се хареса на потребителите.

Оразмеряване на изображения с Photoshop

Направете един работен файл с размерите, които желаете да ползвате за изображенията, които ще качвате в сайта си. После копирайте желаното изображение в работния файл и го оразмерете до неговите размери. По този начин ще имате красиви и еднородни по размер изображения, които ще се харесат на всеки потребител.

Избягвайте inline стилове

За съжаление повечето едитори вкарват в изображенията inline стилове. Това определено не е добра практика и трябва да се избягва с класове, които дефинират стила в самия CSS. Когато качите дадено изображение и отворите code view на едитора, вижте кода и се уверете, че в кода на изображението няма никакви inline стилове. Ако има ги отстранете и сложете клас на HTML тага, който съдържа стилове в CSS файл.

 //Inline стил (неправилно)
 <img src="img-path" style="width: 400px;" alt="My alt tag">

 //За да създадем клас със стила от горния пример, ще напишем следните редове в нашият CSS файл
 .my-css-class {
     width: 400px;
 }

 //Сега ще поставим дефинирания клас по този начин
 <img src="img-path" class="my-css-class" alt="My alt tag">

Заключение

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