Скоростта на сайта е фактор за по-доброто позициониране в резултатите от търсене както и за привличането на повече посетители. Един изключително важен момент за нейното максимално увеличение е свързан с оптмизиацията на снимките и другите изображения, които ще бъдат качени на него.
Important!
Тази статия притежава всички качества да бъде определена като ценен ресурс, от който ще научите как бихте могли да се справите успешно с това.Нека да започнем с едно напомняне: използвайте подходящи релевантни ключови думи за:
- името на файла на изображението;
- алтернативния текст в мета данните му (алтернативно заглавие);
- неговият 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 изисква от мен допълнителна компресия?
Добрата новина е, че тук отново разполагате с редица онлайн решения, повечето от които са безплатни!
Ето някои от тях:
Този нов играч в онлайн оптимизацията на изображения определено заслужава своето внимание! Той предоставя едно цялостно потребителско изживяване и възможност за работа с четири файлови формата – споменатите вече JPEG, PNG, GIF и форматът за графики SVG. Можете да качвате изображения с размер до 10mb, които да компресирате. За съжаление няма опция за масово ъплоудване.
Този сайт предоставя качествена lossy компресия и е предназначен (както се подразбира от името му) за оптимизиране на PNG файлове. Можете да качвате до 20 изображения едновременно, но лимитът на файл е 5mb. Като бонус е наличен плъгин за Photoshop.
Този сайт позволява да компресирате допълнително JPEG файловете, като запазите тяхната резолюция и качество. Масовото качване на снимки е допустимо след регистрация. Лимитът е 200 mb за 1000 снимки.
Умната комбинация от lossy компресия и много добра оптимизация на вашите изображения, позвoлява на Optimizilla да смали размера им до абсолютно допустимия минимум, като същевременно запазва изискваното ниво на тяхното качество. Можете да качите до 20 файла във формат JPEG и PNG. Това, което прави Optimizilla още по-предпочитан избор за оптимизация на снимки и други изображения е възможността, която ви е предоставена за предварителен изглед на компресираните файлове и за пълен контрол над компресията. Можете да свалите вече оптимизираните изображения, едва след като сте останали доволни от видяното. Чудесно е, нали? 🙂
Тази онлайн услуга позволява lossless компресия на изображенията и снимките ви. Можете да оптимизирате множество файлове в различни формати (GIF, PNG, JPEG). Ще можете да изтеглите компресираните файлове наведнъж в zip архив. За Yahoo Smush.it ще поговорим отново малко по-късно в тази статия, когато стане въпрос за оптимизация на изображения за WordPress сайтове. Надявам се да имате търпението и желанието да стигнете дотам! 🙂
Warning!
За съжаление Yahoo прекратиха поддръжката на тази услуга и тя вече НЕ е налична!OK – всичко дотук е чудесно, но аз искам да оптимизирам изображенията офлайн и не използвам Photoshop или GIMP. Как да постъпя тогава?
Нали не си мислите, че вариантите са се изчерпали? В тази ера, в която софтуерните решения дебнат отвсякъде с целта да ни бъдат полезни, просто няма как да останем без нужните ни инструменти.
Искате да оптимизирате изображения и снимки офлайн? На ваше разположение са:
- Paint – не знам дали това изглежда банално във вашите очи, но тази скромна програмка, която съпровожда всяка една Windows инсталация може да редуцира драстично размера на вашите изображения. Всъщност това е единствената ѝ полза за целите на оптимизацията им. Поставям я на първо място, защото е много вероятно да разполагате с нея веднага, ако сте потребител на Windows.
- Trimage – нека да не забравяме феновете на Linux! Аз спадам към тях и затова за мен е удоволствие да представя един офлайн компресор за любимата ми OS. Още повече, че този инструмент предлага lossless компресия! За съжаление към настоящия момент работи само с JPEG и PNG формати.
- ImageOptim и ImageAlpha – компресори за потребителите на MAC OS X
- PNG Gauntlet – още един компресор за PNG изображения за Windows
Important!
Изключително важен ъпдейт:
За да увеличите максимално скоростта на зареждане на изображенията, както и да оптимизирате още повече техните размери следва да подходите така:
- Избирате подходящи размери, резолюция и съотношение за точното място на сайта, където следва да се покаже картинката. При responsive дизайн браузърът на посетителите ще скалира изображението (най-често намалявайки го), а това означава, че ако можете да използвате по-малки размери на оригиналната картинка, то следва да ги приложите и да я качите с тях. Тук трябва да тествате на различни резолюции и да се убедите, кой е оптималният размер. Ако пък сте фиксирали размерите на изображението в дизайна на сайта, това просто означава, че директно следва да генерирате файл с точно тези размери, а не да разчитате на браузъра да го оразмери спрямо зададената команда. Това намалява скоростта на зареждане.
- Въпросното тестване на различни резолюции можете да направите чрез този сайт: Screenfly
- Следващото нещо, което следва да направите е да оптимизирате допълнително големината на файла чрез 2 инструмента, които са налични за Windows и Linux. Чрез тях се работи от конзолата (команден ред), но получените резултати подобряват драстично скоростта на сайта ви. Тези програми са:
- След това помислете за следната опция – или да използвате надежден CDN доставчик или да създадете поддомейн или друг хостинг, под ваш контрол, на който да качите изображенията. Това ще намали товара над сървъра и ще допринесе допълнително за скоростта на зареждане. Честно казано CDN е най-удачният вариант, но трябва да изберете подходящ доставчик и да изберете и подходящ ценови план.
А ако използвам 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. 🙂
Warning!
Този плъгин работи перфектно, но вече не използва Yahoo Smush.it, а разчита на технологията на WPMU DEV. Поради това името му се промени само на WP Smush. Наличен е като безплатно разширение и PRO версия, която е платена, но дава още по-добри възможности за оптимизация.Каква е ситуацията при Joomla?
Notice
Важно! Преди да се запознаете с плъгините и компонентите по-долу, е добра идея да направите следните настройки, описани тук: кликнете. Също така не забравяйте да прочетете и статията в Optibg.com SEO за Joomla в няколко лесни стъпки, в която са засегнати част от настройките за оптимизация на изображения. Освен това най-добрата практика (според мнозина Joomla спеициалисти) би била да подготвите вашите файлове предварително. Изброените по-горе инструменти могат да бъдат от полза!- Content Optimizer Plugin – Подготвя изображенията на сайта ви чрез кеширане, оптимизиране и преоразмеряване. Спомага изображенията да изглеждат по-добре, и спестява трафик.
- Imgen Component & Plugin – Този компонент за Joomla ви позволява да преоразмерите динамично и да компресирате изображенията на вашия сайт. Включва и плъгин феймуърк като плъгините могат да добавят и воден знак към вашите снимки за защита на авторското право. Също така ще можете да контролирате кой потребител може да вижда изображенията. Този компонент също така може да кешира файловете и включва lazy loading.
- Повечето компонени, модули и галерии за Joomla (особено компонента K2) разполагат с опции за редуциране на качеството или размера на генерираните миниатюри и за оптимизация на използваните изображения.
Подбраните компоненти и плъгини за Joomla са едни от най-популярните. Разбира се, съществуват и други решения за оптимизация на изображения. Моята препоръка е да разгледате внимателно Joomla! Extensions Directory и да прочетете ревютата на потребителите по-долу.
Important!
Не забравяйте, че тестването на различните компоненти, модули и плъгини за Joomla и плъгините за WordPress е строго препоръчително да бъде направено на тестова инсталация (например чрез XAMPP)!А сега какво следва?
Изберете най-удобното за вас решение и започнете оптимизацията на снимките и всички други изображения, които считате за необходимо да качите на вашия сайт. Проверявайте редовно дали сте се справили чрез инструменти като pingdom или PageSpeed Insights на Google. Те ще ви дадат информация и за цялостната оптимизация на вашия сайт за по-голяма скорост. Какво още можете да направите за нейното подобряване, освен да оптимизирате използваните изображения?
- Възползвайте се от възможностите за кеширане на браузъра с цел по-голяма скорост за вашия WordPress сайт
- Настройте WP Super Cache с цел постигане на оптимални резултати
- Алтернативно може би ще поискате да настроите W3 Total Cache?
А какво още? Съвсем скоро ще научите от последващите статии в Optibg.com!
Ако този ресурс ви се струва полезен, то не го запазвайте само за себе си! Споделете го с вашите приятели и контакти в социалните мрежи и им помогнете да научат как могат да оптимизират снимките и всички останали изображения на техните сайтове! 🙂
До нови срещи!