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

Здравей, читателю! При разработка и обновяване на сайта сред основните цели трябва да бъдат обезпечаване на добро впечатление от използване на сайта от потребителите и конверсията. Тези два фактора са ключови за повишаване на доходите от сайта. Но вие може да се сблъскате с един проблем: повече изображения правят дизайна по привлекателен, но това оказва негативно влияние върху скоростта на зареждане на страниците.

Днес картинките може да съставят 60% от цялото съдържание на сайта което се зарежда. Оптимизацията на изображенията може да даде значителен ръст на производителността. Тя изисква внимателна оценка на много параметри и деликатен баланс между съдържанието, форматите, качеството и големината на картинката в пиксели.

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

Автоматично избиране на най-ефективния формат

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

Алгоритъма на cloudinary динамично определя и конвертира всичките изображения в най-подходящия формат според текущия браузър. Вие може лесно да качите изображения на cloudinary и да ги конвертирате в други формати. Например, сайта конвертира автоматично изображенията във формат JPEG-XR за Internet Explorer и WebP за Google Chrome. Ако има нужда да се запази прозрачност, може да изберете PNG формат. Има много причини, които ще ви накарат да смените формата на снимката:

  • GIF, ако картинката се състои от няколко цвята;
  • PNG (24 bit) за изображения с високо качество и прозрачен фон;
  • JPEG за фотографии, които трябва бързо да се зареждат (или като WebP, ако посетителя отваря сайта със Google Chrome или мобилно приложение).

За да промените формата на изображението, просто попълнете новия формата в края на URL адреса на картинката. Новия формат може да се посочи във вида на разширението в името на файла или в параметъра на формата. Пример:

cloudinary_demo_1

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

Cloudinary автоматично избира размера и качеството на файла. Умните алгоритми за качество и кодировка анализират всяко изображение за достигане на оптимален баланс между големина на файла и визуално качество. На изхода получаваме отлично качество и минимална „тежест“ на картинката. Индивидуално сканиране на всички изображения и намиране на оптимално ниво на обема и кодировка на картинките, може съществено да понижи размера на файла без да има забележими за човешкото око промени в качеството.

Автоматично мащабиране и кадриране на изображенията за по-добро пасване според макета на страницата

Изображения с по-голяма резолюция използват излишно количество ресурси и забавят скоростта на зареждане на сайта. Но ръчно създаване на няколко версии на едно изображение за различни резолюции може да изисква много ресурси и време. Cloudinary автоматично мащабира (изрязва) картинките до оптимално значение, за да предостави подходящата резолюция за всички устройства които използват посетителите на сайта.

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

Умното кадриране правилно изрязва всички изображения, а не само снимките с лица. Всички изображения се анализират отделно за намиране на оптималната област на фокусиране. Изходно изображение:

cloudinary_demo_2

Пример за изрязване:

cloudinary_demo_3

Динамичен URL адрес

Лесно може да трансформирате вашите картинки в реално време  във всякакъв формат, стил и резолюция, а също да оптимизирате изображенията  да са със по-малка големина на файла. Cloudinary предоставя изображения по динамичен URL адрес чрез бърза CDN (Content Delivery Network) мрежа. В адреса се съхранява публичния ID на картинката и останалите параметри за изменение. Публичното ID е уникален идентификатор на изображението.

В URL адреса на картинката може да се добавят различни инструкции за трансформация до публичен ID.  При първо посещение на адреса в реално време се създава изображение и се показва на посетителя. Полученото изображение вече се съхранява в кеша на CDN мрежата и става достъпно веднага за всички следващи посетители, които отварят същото изображение.

Обобщение

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

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

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

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