Оптимизирайте използването на изображения на уеб страница обработвайте изображения
Причината номер едно за забавянето на уебсайта е свързана с количеството заредени данни. В този регистър най-взискателният елемент се отнася, без съмнение, за изображенията.
Както видяхме в статията Защо да оптимизираме уебсайт ?, подобряване на скоростта на зареждане на страницата на даден сайт с най-малко 4 директни въздействия: броя на посетителите и чрез използване на реферирането, икономическа печалба и реално въздействие върху околната среда.
Интуитивно разбираме, че причината за забавяне номер едно е свързана с обема на заредените данни. В този регистър най-алчният предмет се отнася, без съмнение, за изображенията. Нека разгледаме възможните пътища за оптимизация и ще бъдете изненадани да видите степента на възможните печалби.
Изисква ли се изображение ?
Но нека започнем с привидно наивен въпрос: имате ли нужда от изображения ?
Изненадващо, в някои случаи изображенията се използват за оцветяване на твърди повърхности, като фон на страница, банер или фон на меню. Например, солиден 20-пикселен квадрат, повтарящ се безкрайно като фон на страницата, е еквивалентен на поне 100 байта, докато използвате свойството за фон на CSS, което консумирате само 30. Между тези два подхода, предимство от поне 60% за еквивалент рендиране. Ето защо първият ми съвет е: преследвайте ненужните изображения !
В много подобен смисъл не управлявайте полетата на изображенията, като добавяте плътна граница на цвета на фона. Предпочитайте много по-диетичен подход, използвайки CSS атрибутите margin и padding.
Изберете правилния формат на изображението
След това помислете, че само три формата на изображения са жизнеспособни за уебсайтове:
- jpg (или jpeg за Съвместна фотографска експертна група): този формат може да обработва до 16 милиона цвята и трябва да се използва само за усъвършенствана графика, висококачествени изображения или снимки.
- gif (за Графичен формат за обмен): този формат поддържа максимум 256 цвята, но поддържа прозрачност или ви позволява да съставяте прости анимации. Следователно използването му е идеално.
- png (за Преносима мрежова графика): този формат може да управлява до 16 милиона цвята, както и различни нива на прозрачност . Следователно е подходящ за почти всички ваши визуални подобрения.
Имайте предвид обаче, че не всички браузъри изначално поддържат png формата (особено Internet Explorer за версии под 7) и че може да се наложи да използвате подходящи хакове [1]. Но според статистиката, изготвена от StatCounter, това представлява доста под 3,76% от използваните браузъри (за W3Scools.com това е 0,3%).
Форматът png обикновено е безопасен залог, но за емблематични изображения, които не изискват използването на прозрачност, отделете време и за сравнение на jpg и png версиите, които понякога могат да доведат до 1 на 10 несъответствия.