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

image-optimizationЗдравейте, приятели! Днес ще ви разкажа как да оптимизирате изображенията на сайта и защо е важно да правим това, а също и каква е ползата от това, че вашите картинки ще “тежат” по-малко.

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

Ако седнем и помислим как да подобрим скоростта на зареждане на страниците в сайта, то може да предприемем много действия. Например, да преминем на по-мощен сървър, да свием (смачкаме) кода на страницата, да обединим няколко файла (например css и/или js файловете) в един, но най-добри резултати ще даде намаляването на тежестта на картинките. Защо? Защото те заемат много повече място, отколкото текста.

Може да сбиете кода във файловете на вашия сайт. Даже ако го направите за абсолютно всички файлове, това може да намали обема на информацията която се зарежда от няколко до стотици килобайти. А оптимизацията на само една картинка може да намали обема със толкова, с колкото е намален целия код на сайта. Може да изпълните всички препоръки за оптимизация на кода, но ако не намалявате обема на картинките, няма да направите вашия сайт пъргав.

Начини за намаляване на обема на картинките

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

Това е важно и за потребителите. Ако страницата се зарежда за повече от 3-5 секунди, това дразни хората. Ние сме нетърпеливи същества, и искаме всичко на момента, затова по-бързата скорост не се изисква само от роботите, но и от хората.

Завършвам със теорията и преминавам към това, как да намалите обема на вашите снимки

  • Намалявайте размера на картинките до оптималния за дизайна на вашия сайт. Никога не качвайте изображение например 1600×700 пиксела, ако ширината на полето за текст във вашата тема е например 600 пиксела. Изображението разбира се ще се намали автоматично, но картинката така или иначе ще се зарежда в пълния си размер и тежест.
  • Използвайте онлайн ресурси. Днес в Интернет има няколко много добри сайтове за намаляване на обема на картинки. За мен най-добрия е optimizilla.com, защото може да настройвате качеството ръчно. По този начин, може да намалите обема на картинката със 10-90%, в зависимост от вашите потребности.

Кликнете бутон “UPLOAD FILES” или просто влачете и пуснете картинката/те в полето и автоматично ще им бъде намалена тежестта. Може допълнително да намалите още обема на картинката като използвате плъзгача под надпис “Quality”. Картинката до плъзгача ще показва в реално време как ще изглежда картинката. Когато сте доволни от качеството, натиснете бутон “APPLY”. След това натиснете бутон “DOWNLOAD ALL”, за да свалите оптимизираните изображения.

image-optimization-1Сайта също позволява да се “мачкат” картинки със png формат, просто намалявайки количеството на цветовете в картинката. Това позволява да се намали размера 3-5 пъти, като при това съществени разлики от оригинала практически няма да има!

  • Използвайте PhotoShop, защото програмата предлага полезната функция – Save for web, която е предназначена специално за създаване на леки и качествени картинки със минимален размер. Преди не използвах PhotoShop за тези цели, но вече съм осъзнал всички преимущества които дава програмата и картинките за моя сайт ги обработвам с програмата.

Работата с PhotoShop си има някой предимства. Първо, не е нужно да влизате във сайт. Второ, имате повече настройки и контрол на качеството, което позволява да намалите силно обема на картинката или съвсем малко. Единственото преимущество на онлайн ресурса е, че там може да качите и оптимизирате много файлове наведнъж и много по-бързо, отколкото във PhotoShop. Във по новите версии на PhotoShop (аз използвам PhotoShop CC 2015.0.0) настройките за оптимизация на картинки се намират във – “File” -> ”Export” -> ”Save for Web (Legacy…)”.

image-optimization-photoshopНе се престаравайте

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

Как да оптимизирате картинките в WordPress сайт с помощта на разширение

Препоръчвам ви да използвате за тази цел супер полезния плъгин – EWWW Image Optimizer. Проблема е, че може би сте разбрали за оптимизацията на картинките например от тази статия, и е възможно вече във вашия сайт да сте качили стотици картинки. Разбира се може ръчно да оптимизирате изображенията, но това е бавна и досадна работа, а този плъгин позволява да ускорите в пъти процеса за намаляване на обема на всички изображения в сайта. Плъгина има превод на български език, така, че може да си поиграете със настройките и да изберете качеството на картинките което ви устройва.

image-optimization-2Същото може да се направи и със картинките на самата тема – иконките и т.н. Например, във шапката на сайта (header) имате лого. Разбира се, логото трябва да изглежда красиво, но все пак се опитайте поне малко да намалите неговия обем.

Обединяване на малки икони в спрайтове (sprites)

Може да оптимизирате малките икони като ги разположите във една картинка (sprites). Проблема е в това, че всяка, даже и най-малка картинка е допълнително натоварване (всяка картинка се отваря отделно) върху сървъра. И колкото са повече тези запитвания към сървъра (HTTP Requests), толкова е и по-бавно зареждането на сайта. Ако обединим 10-15 малки изображения във едно и го оптимизираме, така ще получим 70-80% по-бързо зареждане, а също и само 1 запитване към сървъра, вместо десетки.

CSS-SpriteСъс това завършвам днешната статия и ви желая успешно намаляване на обема на вашите картинки. Успех.

С уважение, Николай Томов.

Хареса ли ви статията? Споделете я с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *