Оптимизиране на изображения за уеб

5/5 - (3 гласа)

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

На картинката по – долу сме показали една нормална уеб страница с изображения:

страница с изображения

Всяко една от тези картинки трябва да се изтегли от сайта , за да се визуализира пред потребителя. Потенциално всяко едно изображение може да забави страницата. Нека да направим тест за скоростта на зареждане на тази страница с безплатния инструмент от  Google PageSpeed Insights.

тест за скорост на зареждане на страница

Резултатът, който виждаме е задоволителен и е по – висок от средния, но това е следствие на други фактори, като компресиране, минимизиране на CSS, HTML и JavaScript. Това, което е притеснително в случая е подсказването, че трябва да компресираме изображенията. В конкретния пример е възможно да намалим общо с 79% големината на изображенията, без да загубим от тяхното качество. Това е нещо, което със сигурност бихме искали да направим. В някои страници с повече и по – тежки изображения е възможно да намалим дори с няколко MB големината на страницата. Защо да се генерира голям трафик за едно и също качество?

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

И тук идва решението, съществуват няколко сайта за оптимизиране на изображения (или компресиране), например CompressPNG (ако е необходимо да компресираме PNG файлове) и CompressJpeg (ако желаем да компресираме jpg и jpeg). Съответно, необходимо е да свалим локално на нашия компютър изображението, което желаем да компресираме и да го качим в тези онлайн базирани платформи за намаляване на размера на изображенията.

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

Може да качите няколко файла наведнъж, за по – голямо удобство. В случая намалихме с 73% този jpg файл и то без да загубим от качеството му. Сега трябва да качим новите файлове по местата им в нашата уеб страница и да проверим какви ще са резултатите. В зависимост от това как сте изградили вашия сайт, начините за качване ще са различни.

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

Както виждате, има промяна в скоростта за зареждане на страницата. Имайте предвид, че много голяма част от това зависи от изображенията, които сте качили, в някои случаи промяната в скоростта може наистина да бъде драматична. WordPress, OpenCart, както и други системи за управление на съдържанието, притежават plugin-и и разширения, които могат да направят автоматично компресирането на изображенията. За всеки случай, убедете се сами, че работата е свършена.

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