изображения

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

  • Мобилно сърфиране. Мобилното сърфиране представлява 55,6% от общото сърфиране и тази цифра продължава да се увеличава.
  • Не губете потребители. Бавният и тежък уебсайт е синоним на много висока степен на отпадане и, разбира се, не искате това. Не карайте потребителите си да чакат, оптимизирайте теглото на уебсайта си.
  • SEO позициониране. Google има ограничено време за обхождане на уебсайта ви, така че колкото по-малко тежи, толкова повече страници ще може да обходи и ще имате повече шансове да се класирате по-добре, тъй като вече знаем, че Google придава голямо значение на скоростта на зареждане сред факторите за позициониране.

Къде да започна? Анализирайте кои изображения трябва да оптимизирате

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

Най-добрите приложения за анализ са:

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

Вече сте убедени в важността на оптимизирането на вашите изображения за мрежата? Нека да видим как да го направим:

Първото нещо е да знаете как да изберете подходящия формат на изображението за вашите нужди. Със сигурност някога сте се чудили каква е разликата между jpg, png или gif. Няма да ви отегчаваме с технически характеристики, а само ще ви кажем кога е по-добре да използвате един или друг формат:

  • .GIF

Остарял формат, на практика се използва само за анимирани изображения.

  • .PNG

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

  • .JPG

Идеален за снимки с детайли и много цветове. Това е формат за компресиране със загуби, т.е. губи качество, за да намали размера, и по този начин губи острота, така че в определени области могат да се появят хроматични аберации.

Като цяло ще използваме PNG за всички изображения, които съставляват нашия уебсайт (лога, икони, бутони ...) и JPG само за снимки, особено големи.

Освен тези, все по-често се използват векторни формати (.EPS или .SVG) за лога и икони, тъй като те са напълно мащабируеми до всички резолюции. В NoJpeg ни дават много причини да изберем тази опция.

Как да оптимизираме изображенията

Ако сте във Photoshop, не забравяйте, че трябва да запазите изображенията си, като използвате опцията «File> Save for web ...«Но какво да правя след това?

Първо изберете формата, в който искате да експортирате (gif, png или jpg) горе вдясно. Ако използвате горните раздели, можете да видите до четири копия, за да сравните различни формати или компресии и да видите съотношението им качество/тегло.

Ако експортирате в JPG, имайте предвид:

  • Лентата за качество, от 0 до 100, е 0 максимална компресия и 100 нулева компресия, тоест високо качество.
  • Опцията "прогресивна". Ако го натиснете, jpg ще запази различни слоеве с различни качества, така че когато бъде качено на сървъра, изображението ще се вижда с ниско качество и дефиницията му ще се подобри при зареждането му. Ако не, изображението ще се появи право нагоре, препъвайки се.

Ако експортирате в PNG, имайте предвид:

  • PNG-8 или PNG-24? Основната разлика е, че PNG-8 компресира максимум 256 цвята, като GIF, докато PNG-24 достига 16 милиона цвята. Обикновено ще използвате последното.
  • Прозрачност. Доста очевидно, но ако го включите на фона на изображението ще бъде прозрачно (стига да няма плътен слой на фона на Photoshop).
  • Опцията "interlaced" е много подобна на "progressive" в JPG, тя се отнася до вида на товара. Това ще зависи от нашите предпочитания и възможностите на браузъра, където ще се зареди изображението.

В панела „Запазване за уеб ...“ на Photoshop има много повече опции, но не искаме да сме прекалено технични, затова ви показваме само най-често срещаните опции. В 90% от случаите няма да имате нужда от повече.

Освен Photoshop, има и други програми, които ще ви помогнат да намалите теглото на вашите изображения, компресиране и премахване на метаданни и други опции. Препоръчваме две: Image Optim (MAC) и RIOT (PC).

Автоматично компресиране и оптимизиране в WordPress

Ако използвате WordPress и искате автоматично да компресирате и оптимизирате вашите изображения, без да се налага да преминавате през Photoshop или други програми, препоръчваме Smush, плъгин, който ще свърши цялата мръсна работа вместо вас.

Завършеност

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

@socialmood

Половината агенция, наполовина водевил. Ние сме настроение за кофти.