ПРАКТИЧНО РЪКОВОДСТВО
Оптимизация на изображения: размер, формат и зареждане
Как да подготвите по-леки изображения с четими детайли, подходящи размери, alt текст и правилно зареждане на първия екран.
Започнете от реалното място на изображението
Снимка с ширина 4000 пиксела обикновено е излишна за малка карта. Изберете размер според ширината на компонента и плътността на дисплея. Проверявайте реално заредения файл, а не само размера, зададен с CSS.
Формат и компресия
JPEG е подходящ за много снимки; PNG пази детайли без загуба и прозрачност; WebP и AVIF често дават по-малки файлове. Резултатът зависи от изображението и настройките, затова сравнете качество и размер. SVG е подходящ за икони и схеми, но непроверен SVG код трябва да се обработва безопасно.
Адаптивни размери
Използвайте srcset и коректен sizes, за да може браузърът да избере вариант за конкретния layout. Задайте width и height или правилно съотношение на страните, за да запазите място преди зареждане и да ограничите разместването на съдържание.
Lazy loading с правилно изключение
Отложеното зареждане е подходящо за изображения под първия екран. Не го задавайте на основната Hero снимка, когато тя е важна за LCP. За нея осигурете ранно откриване в HTML и подходящ приоритет. Браузърът може да зарежда lazy изображения и малко преди да влязат във видимата зона.
Alt текст и файлови данни
Опишете информационната функция на изображението, без да трупате ключови думи. Декоративно изображение обикновено има празен alt. Премахвайте ненужни EXIF данни, включително местоположение, когато нямат функция; запазете необходимата информация за права и произход.
Инструменти и проверка
TinyPNG, ImageOptim, Compressor.io и Optimizilla са примери за обработка на файлове. ImageOptim е приложение за macOS, а не WordPress плъгин. При WordPress може да се оцени Smush, ShortPixel или EWWW според функциите, лиценза и текущия workflow. Не включвайте няколко конкуриращи се механизма за lazy loading.
Проверете страницата в PageSpeed Insights и на реален телефон. Сравнете LCP, CLS, мрежовите заявки и четимостта на снимката. Лабораторният тест не замества данните от реални посещения.