Оптимизация на снимки и други изображения

Ценни инструменти и решения за максимална оптимизация на всички изображения на вашия сайт

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

Нека да започнем с едно напомняне: използвайте подходящи релевантни ключови думи за:

  • името на файла на изображението;
  • алтернативния текст в мета данните му (алтернативно заглавие);
  • неговият caption и description

А сега да си поговорим за самите изображения – по-конкретно техният хостинг, вид, размер и качество.

1. Къде да хостваме изображенията на нашия сайт?

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

Повярвайте ми – не желаете това! Скоростта на зареждане на страниците ви е ваш приоритет номер 1 по ред причини! И некачествено оптимизираните изображения могат да попречат на успешното реализиране на тази цел!

Но тук е мястото да направя една много важна вметка! От известно време насам Google разпознава дали използваните изображения на един сайт са уникални или са взети от друго място. Ето защо, ако много сте си харесали някоя снимка или друго изображение и имате правото да го използвате за вашата страница, то помислете дали не е удачно да го преработите, за да може то да стане уникално (например чрез добавяне на текст, промяна на цветове и други). Разбира се, това означава да имате и правото да извършите тези промени. Проверявайте лиценза на изображенията, които искате да използвате! А ако пък файла, който толкова много сте харесали не следва да претърпи промяна и той се намира на надежден сайт, то може би ще е удачно в този случай да не го запазвате на вашия хостинг, а да го вмъкнете от неговото оригинално местонахождение. Google дори харесва взаимоотношенията между сайтовете, когато става въпрос за споделяне на изображения. Така ако желаният от вас файл е вече индексиран, вие няма да получите „мъмрене“ от страна на алгоритъма на търсачката за това, че сте използвали чуждо (от нейна гледна точка) съдържание.

2. Вида на изображенията, които ще използваме

Най-разпространените формати, които са подходящи за употреба на един сайт са:

  • JPEG – следва да се използва за снимки и други изображения, които съдържат в себе си милиони цветове. Предлага качествена компресия, която позволява постигане на малък размер на файла, но която е „lossy“,  тоест при нея част от информацията се загубва. JPEG формата не е подходящ за изображения, които съдържат основно текст, солидни цветове или графики без гладки форми.
  • PNG – формат, който е бил замислен като заместител на GIF (в дните, когато се е очаквало да се изисква такса за употребата му). Като качество на компресията PNG е много по-добър от GIF. Този формат също така позволява наличието на прозрачност, което е идеално от гледна точка на web дизайна. Например можете да позиционирате графика и да зададете прозрачен фон и така в крайна сметка ще използвате цветовете на фона на вашия сайт. При дизайн на background banner-и употребата на PNG файловете позволява да направите преливане към прозрачност, тоест в даден момент цветът на банера ще прелее в цветовете на вашия сайт. PNG форматът не е особено подходящ за фотографии и също така може да не се изобрази достатъчно добре при разглеждане на сайта ви от по-стари мобилни телефони и устройства.
  • GIF – идеален за употреба за изображения с малък, фиксиран брой цветове. Този формат винаги е редуциран до не повече от 256 уникални цвята. Предоставя много добра компресия, която на всичкото отгоре не е и толкова сложна, както тази, която предлага JPEG. За сметка на това GIF не е подходящ за фотографии и други изображения с градиентни цветове. Причината се крие в ограниченият брой цветове, които този формат поддържа. Напоследък все по-голяма популярност набира употребата на анимирани GIF файлове вместо кратки клипове. Помислете си дали вашият сайт не би имал полза от едно такова решение.

3. А какъв да е размерът на изображенията?

Правилният отговор тук е – възможно по-малък! Не сте забравили, че целта е максимална скорост при зареждането им, нали така? 🙂 Не мога да препоръчам конкретни размери, но със сигурност ще желаете първо те да са под 1 mb (дори бих бил и по-краен – под 500 kb) и второ – да ограничите по възможност килобайтите до 100, 70, а защо не и 30 (с уговорката, че изображението трябва да е с добро качество).

4. Което неминуемо води до следващия въпрос – как да постигна максимално добро качество при максимално малък размер?

Предполагам повечето от вас ще пожелаят да обработят изображенията преди да ги качат онлайн. Също така предполагам, че мнозинството ще заложи на програми като Photoshop и GIMP.

  • За Photoshop – след обработка запазете изображението с командата „Save for web„. Стремете се обработените файлове да бъдат с DPI от 72 пиксела. Ако ще работите с формат JPEG, то можете да изберете и „Save As“, като се стремите да изберете Medium quality.
  • За GIMP – признавам си, че не съм работил достатъчно дълго с тази програма, но този свободен продукт притежава наистина богата и достъпна документация, от която можете да прочетете как да извършите оптимизация на снимки и други изображения. Посетете този линк: Preparing your Images for the Web и продължете да четете всички подточки от точка 2.

А ако нямам някоя от тези програми за обработка на изображения под ръка?

Тогава използвайте някое от качествените онлайн решения! В тази публикация в Optibg.com съм описал четири от тях: Четири онлайн решения, чрез които можете бързо и лесно да редактирате Вашите изображения. Разгледайте техните настройки и би трябвало да успеете да съхраните качествени файлове с подобаващо малък размер.

И ако все пак не съм доволен от размера и Google изисква от мен допълнителна компресия?

Добрата новина е, че тук отново разполагате с редица онлайн решения, повечето от които са безплатни!

Ето някои от тях:

Compressor.io за оптимизация на снимки и изображения за SEO

Този нов играч в онлайн оптимизацията на изображения определено заслужава своето внимание! Той предоставя едно цялостно потребителско изживяване и възможност за работа с четири файлови формата – споменатите вече JPEG, PNG, GIF и форматът за графики SVG. Можете да качвате изображения с размер до 10mb, които да компресирате. За съжаление няма опция за масово ъплоудване.

TinyPNG за оптимизация на снимки и изображения за SEO

Този сайт предоставя качествена lossy компресия и е предназначен (както се подразбира от името му) за оптимизиране на PNG файлове. Можете да качвате до 20 изображения едновременно, но лимитът на файл е 5mb. Като бонус е наличен плъгин за Photoshop.

JPEGMini за оптимизация на снимки и изображения за SEO

Този сайт позволява да компресирате допълнително JPEG файловете, като запазите тяхната резолюция и качество. Масовото качване на снимки е допустимо след регистрация. Лимитът е 200 mb за 1000 снимки.

Optimizilla за оптимизация на снимки и изображения за SEO

Умната комбинация от lossy компресия и много добра оптимизация на вашите изображения, позвoлява на Optimizilla да смали размера им до абсолютно допустимия минимум, като същевременно запазва изискваното ниво на тяхното качество. Можете да качите до 20 файла във формат JPEG и PNG. Това, което прави Optimizilla още по-предпочитан избор за оптимизация на снимки и други изображения е възможността, която ви е предоставена за предварителен изглед на компресираните файлове и за пълен контрол над компресията. Можете да свалите вече оптимизираните изображения, едва след като сте останали доволни от видяното. Чудесно е, нали? 🙂

Yahoo-Smush.it за оптимизация на снимки и изображения за SEO

Тази онлайн услуга позволява lossless компресия на изображенията и снимките ви. Можете да оптимизирате множество файлове в различни формати (GIF, PNG, JPEG). Ще можете да изтеглите компресираните файлове наведнъж в zip архив. За Yahoo Smush.it ще поговорим отново малко по-късно в тази статия, когато стане въпрос за оптимизация на изображения за WordPress сайтове. Надявам се да имате търпението и желанието да стигнете дотам! 🙂

OK – всичко дотук е чудесно, но аз искам да оптимизирам изображенията офлайн и не използвам Photoshop или GIMP. Как да постъпя тогава?

Нали не си мислите, че вариантите са се изчерпали? В тази ера, в която софтуерните решения дебнат отвсякъде с целта да ни бъдат полезни, просто няма как да останем без нужните ни инструменти.

Искате да оптимизирате изображения и снимки офлайн? На ваше разположение са:

  • Paint – не знам дали това изглежда банално във вашите очи, но тази скромна програмка, която съпровожда всяка една Windows инсталация може да редуцира драстично размера на вашите изображения. Всъщност това е единствената ѝ полза за целите на оптимизацията им. Поставям я на първо място, защото е много вероятно да разполагате с нея веднага, ако сте потребител на Windows.
  • Trimage – нека да не забравяме феновете на Linux! Аз спадам към тях и затова за мен е удоволствие да представя един офлайн компресор за любимата ми OS. Още повече, че този инструмент предлага lossless компресия! За съжаление към настоящия момент работи само с JPEG и PNG формати.
  • ImageOptim  и ImageAlpha – компресори за потребителите на MAC OS X
  • PNG Gauntlet – още един компресор за PNG изображения за Windows

А ако използвам WordPress или Joomla?

Естествено, че има качествени решения и за най-популярните CMS-и!

Нека да започнем с WordPress:

  • EWWW Image Optimizer – Изключително добър и надежден плъгин за WordPress, който ще ви позволи да компресирате и конвертирате качените изображения на вашия сайт! Инсталацията може да бъде леко усложнена, ако вашият hosting доставчик не предлага част от необходимите за работата на EWWW Image Optimizer инструменти. Но не би следвало да се тревожите, тъй като повечето реномирани доставчици разполагат с тях! Този плъгин ви дава допълнителни възможности за контрол над компресията и не ви налага ограничения за размера на файловете, които следва да бъдат оптимизирани. Предлага и други възможности, като cloud оптимизация (която за съжаление е платена, но не е задължителна за работата на плъгина). Това, което ще ви накара да се влюбите в EWWW Image Optimizer е възможността му да оптимизира не само файловете във вашата WordPress галерия, но и всички други изображения и снимки, които са налични на вашия сайт: файловете от използваната в момента тема, снимките от вашата NextGEN или GRAND FlAGallery галерии. Това определено е моят фаворит и аз разчитам на него за Optibg.com.
  • WP Smush.it – Нали не сте забравили, че обещах да си поговорим още малко за Yahoo Smush.it? 🙂 Е, обещанията трябва да се спазват, затова сега отново се връщаме на тази услуга. Вече знаете на какво е способен този онлайн инструмент, а сега се запознайте с плъгина за WordPress, който разчита на него, за да оптимизира снимките и изображенията на вашия сайт. При това изключително качествено! Но (за съжаление тук има едно наистина голямо НО) масовото оптимизиране е все още в beta версия и може да не работи коректно. Аз лично не съм забелязал някакви проблеми, освен досадното чакане (все пак изображенията от вашия сайт преминават през Yahoo Smush.it и след това се връщат, но вече оптимизирани). Истинският проблем, който може да ви откаже да използвате WP Smush.it е лимитът от 1mb на файл, като това ограничение идва от Yahoo. Но, ако вашите изображения са под този размер, то тогава ще изпитате истинско удоволствие от употребата на WP Smush.it. 🙂

Каква е ситуацията при Joomla?

  • Content Optimizer Plugin –  Подготвя изображенията на сайта ви чрез кеширане, оптимизиране и  преоразмеряване. Спомага изображенията да изглеждат по-добре, и спестява трафик.
  • Imgen Component & Plugin – Този компонент за Joomla ви позволява да преоразмерите динамично и да компресирате изображенията на вашия сайт. Включва и плъгин феймуърк като плъгините могат да добавят и воден знак към вашите снимки за защита на авторското право. Също така ще можете да контролирате кой потребител може да вижда изображенията. Този компонент също така може да кешира файловете и включва lazy loading.
  • Повечето компонени, модули и галерии за Joomla (особено компонента K2) разполагат с опции за редуциране на качеството или размера на генерираните миниатюри и за оптимизация на използваните изображения.

Подбраните компоненти и плъгини за Joomla са едни от най-популярните. Разбира се, съществуват и други решения за оптимизация на изображения. Моята препоръка е да разгледате внимателно Joomla! Extensions Directory и да прочетете ревютата на потребителите по-долу.

А сега какво следва?

Изберете най-удобното за вас решение и започнете оптимизацията на снимките и всички други изображения, които считате за необходимо да качите на вашия сайт. Проверявайте редовно дали сте се справили чрез инструменти като pingdom или PageSpeed Insights на Google. Те ще ви дадат информация и за цялостната оптимизация на вашия сайт за по-голяма скорост. Какво още можете да направите за нейното подобряване, освен да оптимизирате използваните изображения?

А какво още? Съвсем скоро ще научите от последващите статии в Optibg.com!

Ако този ресурс ви се струва полезен, то не го запазвайте само за себе си! Споделете го с вашите приятели и контакти в социалните мрежи и им помогнете да научат как могат да оптимизират снимките и всички останали изображения на техните сайтове! 🙂

До нови срещи!