Правилен размер на уеб изображенията

Измерете най-широкия размер, в който изображението се изобразява, удвоете го за екрани с висока плътност и преоразмерете библиотеката си до това число. Зареждането на снимка с ширина 4000 пиксела в място за 800 пиксела означава, че браузърът изтегля около 25 пъти повече пикселни данни, отколкото може да покаже, след което отхвърля остатъка.

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

Защо твърде големите изображения струват толкова скъпо

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

Първият ред е чест случай в сайтове, където редакторите качват снимки директно от камерата. Браузърът изтегля 4.2 MB, смалява ги и показва еквивалента на файл от 180 KB.

Как да измерите реалния размер на показване

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

Проверете най-широкия случай, а не типичния. Изображение в колона на статия може да се показва с ширина 700 пиксела на десктоп и 380 на телефон, така че 700 е числото, което има значение. Тествайте при най-широкия прозорец на браузъра, който вашите посетители реалистично използват, тъй като банер с пълна ширина се разширява с екрана и изисква различно изчисление.

Правилото за удвояване при екрани с висока плътност

Умножете ширината на показване по 2 и спрете дотам, тъй като екраните с по-висока плътност не показват никакво допълнително подобрение, което някой да забележи. Изображение, показвано с ширина 700 пиксела, трябва да се експортира с 1400.

Утрояването понякога се предлага, но рядко е оправдано. Разликата между 2 и 3 пъти плътност е незабележима от нормално разстояние на гледане, докато файлът нараства с повече от половината. По-силното компресиране при 2 пъти плътност дава по-добър резултат от лекото компресиране при 3 пъти, защото допълнителните пиксели скриват компресията.

Често срещани ширини на показване за преоразмеряване

• Изображение в основния текст на статия: показва се около 700 px, експортирайте с 1400 px.
• Банер с пълна ширина (hero): показва се до 1920 px, експортирайте с 1920 px и компресирайте по-силно.
• Изображение на половин ширина: показва се около 600 px, експортирайте с 1200 px.
• Миниатюра в списък с продукти: показва се около 300 px, експортирайте с 600 px.
• Снимка на автор или профил: показва се около 80 px, експортирайте с 160 px.
• Лого в заглавната част: показва се около 180 px, експортирайте с 360 px или използвайте векторна графика.

Защо изображенията с пълна ширина са изключение

Банерът с пълна ширина няма фиксиран размер на показване, затова го ограничете до 1920 пиксела и го компресирайте по-силно, вместо да го удвоявате. Удвояването на изображение с пълна ширина до 3840 пиксела произвежда файл, който никоя страница не може да оправдае.

Банерите обикновено се гледат от разстояние и съдържат по-малко фини детайли от продуктова снимка, което означава, че агресивната компресия е по-малко забележима при тях. Банер от 1920 пиксела с качество 70 във WebP обикновено е под 200 KB и изглежда правилно на всеки екран, докато версията с 3840 пиксела не предоставя видима полза при 4 пъти по-голямо тегло.

Как да коригирате цяла библиотека

За да преоразмерите съществуващ сайт правилно, следвайте тези 6 стъпки.

1. Опишете местата за изображения във вашия дизайн, които обикновено са 4 до 6 различни размера, а не десетки.
2. Измерете ширината на показване на всяко място с помощта на инспектора на браузъра на публична страница.
3. Удвоете всяка ширина, за да получите вашия размер за експорт.
4. Сортирайте библиотеката в папки според мястото, тъй като една серия прилага един размер за всеки файл в нея.
5. Преоразмерете всяка папка до нейната целева ширина, след което компресирайте и конвертирайте в същата стъпка.
6. Заменете файловете, запазвайки същите имена, така че съществуващите страници да продължат да работят.

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

Адаптивни изображения и атрибутът srcset

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

Генерирайте 3 ширини на изображение, обикновено 400, 800 и 1600 пиксела, и ги опишете с техните пикселни ширини, за да може браузърът да избира. Повечето системи за управление на съдържание произвеждат това автоматично при качване, така че проверете какво прави вашата платформа. Когато тя прави това, качването на правилно оразмерен оригинал все пак подобрява всеки генериран вариант.

Винаги преоразмерявайте преди компресиране

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

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

Как влияе това на скоростта на страницата

Правилното оразмеряване на изображенията обикновено премахва от 60 до 90 процента от теглото им в сайт, където това никога не е правено. Подобрението е по-голямо от всяка промяна на формата и обикновено е по-голямо от всички други оптимизации, взети заедно.

Ефектът се фокусира върху мобилните посетители, където връзките са по-бавни и трафикът струва пари. Показателят Largest Contentful Paint се подобрява директно, тъй като това измерване обикновено се определя от едно голямо изображение. Преминаването на проверката Properly size images в Lighthouse често премахва 2 или 3 свързани предупреждения едновременно.

Никога не увеличавайте изображение, за да пасне

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

Когато изходното изображение е по-малко от мястото, което трябва да запълни, честните опции са да го използвате в естествения му размер, да изрежете оформлението около него или да замените изображението. Увеличаването на снимка от 600 пиксела до 1600 пиксела произвежда размазан файл с 4 пъти по-голямо тегло от оригинала, което се проваля едновременно и по качество, и по скорост.

Проверка на страница за твърде големи изображения

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

Всяко единично изображение над 500 KB си струва да се проучи, а всяка страница, където изображенията общо са над 2 MB, има проблем. Задръжте курсора си върху изображение в панела Elements, за да видите оригиналния и показвания му размер един до друг. Голямата разлика между 2-те числа е дефиницията за неправилно оразмерено изображение и се вижда за секунди.

Преоразмеряване на библиотека в една серия

Задайте целевата ширина веднъж и я приложете към всеки файл в папка, вместо да преоразмерявате изображенията едно по едно. Библиотека от няколкостотин изображения се преоразмерява за минути, когато работата се извършва на серии.

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