Статия

Оптимизирайте медията на сайта за скорост и Core Web Vitals

Изображенията и видеата обикновено представляват 60 до 80 процента от общото тегло на една уеб страница. Тяхното правилно обработване е единственото нещо с най-голям ефект, което можете да направите за скоростта на зареждане, оценките Core Web Vitals и класирането в търсачките. Добрата новина: нищо от това не изисква специализиран софтуер или сървър, а файловете ви никога не е нужно да напускат устройството.

Изберете правилния формат преди всичко друго

Изборът на формат е по-важен от всеки плъзгач за качество. За снимки на уеб страница WebP е правилната стойност по подразбиране: той е с 25 до 35 процента по-малък от JPEG при същото визуално качество и всеки модерен браузър го поддържа. AVIF компресира още повече, до 50 процента по-добре от JPEG, с цената на по-бавно кодиране. Използвайте AVIF за заглавни и продуктови снимки, които компресирате веднъж; използвайте WebP за всичко, което обработвате на партиди или ви трябва бързо. PNG е на мястото си само там, където ви е нужна беззагубна точност или прозрачен фон. SVG е единственият разумен избор за лога, икони и илюстрации: той се мащабира до всякакъв размер и често тежи няколко килобайта срещу стотици за растеризиран еквивалент.

Компресирайте изображения без видима загуба на качество

Започнете с преоразмеряване до реалните размери на показване: заглавно изображение, което се показва с ширина 1280 пиксела, не се нуждае от 4000 пиксела данни. Преоразмерете първо, после компресирайте. За снимки качество 80 в WebP или JPEG е практичната долна граница, под която обикновените зрители започват да забелязват, затова се стремете към 75 до 85 и разгледайте резултата при пълно увеличение преди публикуване. За графики с текст и плътни участъци PNG без загуба или SVG запазва остротата, която загубните формати замазват. Компресорът за изображения на този сайт обработва всички тези формати, работи изцяло във вашия браузър и прилага същите алгоритми като специализираните настолни инструменти.

Конвертирайте видео за уеб, без да го качвате

Фоновите цикли и вграденото видео са там, където оптимизацията на уеб медията често не достига целта. MP4 с H.264 се възпроизвежда навсякъде, но WebM с VP9 е с 20 до 40 процента по-малък при същото качество, което е от значение за мобилните потребители с ограничени връзки. Практичният подход е да конвертирате веднъж в WebM, да го предоставите като предпочитан източник в елемент video и да запазите MP4 като резервен вариант. Конверторът за видео тук използва FFmpeg, компилиран до WebAssembly: конверсията се изпълнява във вашия браузър, нищо не се качва и файлове с всякакъв размер работят, стига устройството ви да има достатъчно памет. За вградено фоново видео обмислете и инструмента за изрязване на видео, за да премахнете мъртвите секунди преди кодирането: продължителността е най-големият фактор за размера на файла.

Вградени ресурси: base64 и SVG

Много малки изображения, икони и favicon, вградени директно в HTML или CSS като base64 низове, премахват едно мрежово отиване и връщане на ресурс. Това има смисъл за ресурси под около 2 KB, които се появяват на всяка страница, като спрайт на лого или индикатор за зареждане. По-големите ресурси трябва да останат отделни файлове, защото base64 кодира с 33 процента по-тежко от двоичния вариант, а браузърите кешират препратките към файлове, но не и вградените данни поотделно. Оптимизаторът на SVG премахва излишния код от редактора в експортираните SVG, без да докосва визуалния резултат. Конверторът от изображение към base64 генерира готов за поставяне data URI във вашия браузър.

Инструменти от тази статия

Често задавани въпроси

Влияе ли компресията на изображенията на класирането ми в търсачките?

Google използва Core Web Vitals като сигнал за класиране, а Largest Contentful Paint почти винаги е изображение или постер на видео. Страница, чието заглавно изображение се зарежда под секунда, се класира по-добре от такава, при която отнема три секунди. Компресията и правилният формат влияят пряко на тази метрика, така че да, оптимизацията на изображенията има измерим ефект за SEO. Ефектът е най-силен на мобилни устройства, където връзките са по-бавни, а наказанието за тежки изображения е по-голямо.

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

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