Оптимизиране на зареждането на изображения в уебсайт на SoftFluent
Уеб страниците стават все по-тежки всяка година. За да се убедите, можете да разгледате тази графика, направена от Tammy Everts в блога на Soasta.
Както се вижда изображенията представляват малко над 60% от общото тегло на страницата. Това е така, защото връзките стават по-бързи, така че конструкторите на уебсайтове си позволяват да добавят все повече и повече изображения, за да илюстрират своите страници. Но тази тежест за съжаление е придружена от няколко отрицателни точки, включително:
- Прехвърлянето на изображения заема честотна лента на сървъра
- Страниците се зареждат по-дълго
- Допълнителни разходи за хостинг, ако плащате за обема (съхранение и честотна лента)
- Допълнителни разходи за клиента, ако плащаме по обем
Как да отстраните това ?
Компресиране на изображения
Първото решение е да се намали размерът на изображенията, като същевременно се поддържа приемливо качество. За да направите това, трябва да използвате формати, които предлагат добри нива на компресия и които се поддържат от различните браузъри. Форматите PNG или JPG са добри кандидати. Благодарение на различни техники, като например намаляване на цветовата палитра на изображението, е възможно да се постигне по-добра степен на компресия, без визуално загуба на качество (винаги не забравяйте да проверите изобразяването). Съществуват различни уеб услуги или софтуер за компресиране на изображения: tinyjpg, tinypng, jpegmini, compressor.io. Ако използвате Grunt, Gulp или друго решение, основано на Node, има и решения: imagemin (Node), grunt-contrib-imagemin (Grunt), gulp-imagemin (Gulp).
В примера по-долу второто изображение е почти 3 пъти по-лек:
Друго решение е да се използват векторни изображения, когато е възможно и има печалба. Векторното изображение описва изображението с геометрични примитиви (точки, линии, криви на Безие и др.). Следователно разбираме, че сложното изображение може да е по-тежко във вектор, отколкото в пикселирано (Bitmap/Raster). По-голямата част от браузърите поддържат SVG формата (източник: Мога ли да използвам). Например логото на SoftFluent (горе вляво на тази страница) е SVG, с резервен вариант в случай на грешка в PNG изображението.
Предоставете изображение с правилния размер
Втората стъпка е да предоставите изображение с правилния размер. Няма смисъл да предоставяте изображение с ширина 1000px, след което ще бъде преоразмерено на 200px чрез CSS. Това е много лесно за изображение с фиксиран размер, но когато искате да създадете отзивчив сайт, е по-трудно да изпратите най-доброто изображение. HTML5 все още предлага решения, по-специално с атрибута srcset, който позволява на браузъра да зареди изображението, най-подходящо за клиента, като използва размера на екрана, а също и плътността на пикселите: