Единственная самая большая победа производительности, которую я когда-либо отправлял на WP Adminify's маркетинговый сайт был 't плагин кэширования или настройка CDN. Это было удаление одного изображения. Наш старый герой был скриншотом PNG 2400px I'd экспортирован по адресу "полное качество и котировки; потому что я упорно верил, что PNG означает четкость. Этот файл был 1,4 МБ. На Android среднего класса более 4G это был самый большой элемент Contentful Paint - и он перетаскивал LCP примерно до 4,1 секунды. Я поменял его на 84 КБ webp на фактической ширине дисплея и LCP опустились ниже 1.9s в тот же день. нет кода. просто уменьшенная картинка.
Это 's разочаровывающая вещь об SEO изображения. It's не экзотика. Изображения обычно являются самой тяжелой вещью на странице - часто около половины общего количества байтов - и тем не менее, большинство из нас относятся к ним как к второстепенной мысли. Мы бросаем оригинал камеры в CMS, набираем "screenshot" в поле alt и идем дальше. Затем мы задаемся вопросом, почему Основные веб-жизненные ресурсы отчет в Search Console на мобильном телефоне кровоточит красным.
Это руководство - контрольный список, который я на самом деле запускаю на Toolz.dev и клиентских сайтах, написанный с точки зрения того, кто отправляет эти вещи. I' будет честным о том, что делают бесплатные инструменты и - что не менее важно - что они делают 't. Каждый инструмент изображения на Toolz.dev работает полностью в вашем браузере на <canvas>, так что ничего, что вы падаете, нигде не загружается. Это имеет реальные последствия для вашего рабочего процесса, некоторые хорошие, раздражающие. Мы доберемся до обоих.
TL;DR: Измените размер изображения до его реальной ширины дисплея, затем сжимаем, затем обслуживаем современный формат. На практике это три прохода: Изменение размера изображения Чтобы сократить размеры пикселя, Изображение компресс сжать байты и конвертер формата Чтобы получить webp.
width/heightатрибуты, позволяющие остановить сдвиг макета, написать альтернативный текст, который человек скажет вслух, и лениво загрузить что-либо ниже складки. Сделайте это, и ваши LCP и CLS улучшатся - два основных веб-жизненных объекта, управляемых изображениями, на которых Google фактически стоит в рейтинге.
Почему изображения так важны для SEO?
Два из трех основных веб-жизненных объектов являются скрытыми проблемами изображения. Самая большая контентная краска - это, на большинстве страниц контента, изображение героя, завершающее загрузку. Кумулятивный сдвиг макета очень часто представляет собой позднюю загрузку изображения и перемещение текста вниз по строке. Оба являются подтвержденными входами ранжирования, и оба являются вещами, которые вы исправляете, лучше обрабатывая изображения, а не записывая больше контента.
Там's второй канал трафика люди забывают: Google Images. Для многих сайтов электронной коммерции, рецептов, путешествий и дизайна поиск изображений - это значимый фрагмент органических посещений, иногда пятая часть. Этот трафик полностью зависит от того, что может прочитать сканер - имя файла, альтернативный текст, окружающая копия и достаточно ли маленькое изображение, чтобы его можно было быстро индексировать.
А вот и скучно-но-настоящая: пропускная способность стоит денег и терпения. Страница, на которой поставляется 3 МБ изображений, отскакивает от мобильных пользователей от измеренных соединений, прежде чем они увидят ваш заголовок. Более быстрые страницы удерживают людей, а вовлеченность, однако Google измеряет это, не повредит.
Какой формат изображения вы должны использовать?
Выбор формата — это то, где живут большинство сбережений, а правила проще, чем война формата, заставляют их звучать.
неправильный для фотографий - все, что с плавными градиентами и тысячами цветов. It's lossy, что именно то, что вы хотите для фотографии.A качестве 7585 сжатие невидимо для обычного зрителя и файл является частью оригинала. Don't использовать его для чего-либо с жесткими краями, текстом, или прозрачностью.
png это без потерь. Используйте его для скриншотов, логотипов, диаграмм и всего, что имеет плоские цветовые области или прозрачность. Загвоздка: для фотографии PNG создает комично большой файл по сравнению с JPEG. Моя ошибка героя размером 1,4 МБ была именно такой - фотографический скриншот, вынужденный попасть в PNG.
webp является практичным по умолчанию в 2026 году. Он выполняет как с потерями, так и без потерь, поддерживает прозрачность и анимацию и обычно на 25–34% меньше, чем JPEG, с соответствующим качеством. Поддержка браузера теперь универсальна. Это формат, в который я конвертирую почти все.
авиаф сжимает еще сильнее - часто значительно меньше, чем WebP - потому что it's построен на видеокодеке AV1. It's отличный формат. но я должен быть прямо с вами здесь, потому что множество руководств (включая черновик этой статьи заменено) говорят вам в & quot;просто конвертировать в AVIF& quot; с онлайн-инструментом, и это's не как работает кодировка холста браузера.
стара Для векторов: иконки, логотипы, простые иллюстрации. Он масштабируется бесконечно и остается крошечным. Это бесполезно для фотографий.
Оговорка AVIF никто не упоминает
Вот честный момент. Toolz.dev's конвертер формата экспорт PNG, JPEG или WebP- и только те три. Он может't выводить AVIF, и большинство внутрибраузерных преобразователей тоже. Причина техническая: инструмент рисует ваше изображение на a <canvas> и звонки canvas.toBlob('image/webp', quality), йо- Кодировщик холста поставляется в окне JPEG, PNG и WebP; он не поставляет кодер AVIF. Так что нет возможности выжать из холста авф, полный останов.
Вы все еще можете кормить файл AVIF - браузер успешно декодирует AVIF через new Image(), поэтому вставка avif будет отображаться в холсте. Вы просто не можете вернуть ни одного. Это декодирование, асимметрия кодирования, и она постоянно сбивает людей с толку.
Итак, мой реальный совет: используйте конвертер формата для шага webp, который покрывает 95% победы. Если вы хотите, чтобы Avif был сверху, сгенерируйте его в конвейере сборки с помощью sharp, avifencили Squoosh's автономный кодер - это's, где в любом случае принадлежит AVIF, потому что его кодировка медленная, и вы не хотите и #39;t хотите делать это вручную для каждого изображения.
| формат | лучше для | потеря? | Конвертер Toolz.dev может вывести его? |
|---|---|---|---|
| неправильный | фотографии | да | да |
| png | Скриншоты, логотипы, прозрачность | нет | да |
| webp | Почти все в сети | оба | да |
| авиаф | Максимальное сжатие на тяжелых изображениях | да | Нет - используйте инструмент сборки |
| стара | Иконки, логотипы, векторное искусство | недействительный | Нет (вектор, а не холст) |
Как сжимать изображения без сбоев?
Ошибка, которую я вижу больше всего, заключается в том, что сжимаем неправильную вещь в неправильном порядке. Сжатие изображения размером 4000 пикселей, которое отображается на 800px, похоже на вакуумную герметизацию чемодана, который вам никогда не нужно было упаковывать. Сначала измените размер, сожмите второй. всегда.
Итак, рабочий процесс: открытый Изменение размера изображения, установить ширину на наибольший размер изображение будет рендеринг на (проверьте ваш макет - изображение тела блога часто 720 — 800px, а не 1920).Resizer подходит внутри вашего целевого ящика и никогда не растягивается или не посевает, поэтому соотношение сторон безопасно. Затем взять этот вывод в Изображение компресс и снижайте качество, пока вы не сможете просто едва сказать - обычно 78 北82 для фотографий. Предварительный просмотр при полном увеличении, прежде чем вы зафиксируете; артефакты прячутся в градиентах и оттенках кожи, а не в миниатюре.
Один номер, на котором стоит якорь: для фотографического контента качество 80 — это скучный и надежный ответ. я есть A/B'D 80 против 90 на реальных снимках продукта и при 100% увеличении хорошего монитора большинство людей не могут это назвать. Но 80 часто на 40% меньше. Ниже около 60 вы начинаете видеть блочные артефакты в гладких областях, так что это пол для всего, кроме крошечной миниатюры.
Два браузерных заповедника, которые вас смутят
Оба они стоили мне реального времени отладки, так что изучите их бесплатно.
Прозрачный PNG → JPEG поворачивает фон черный, а не белый. Однажды я преобразовал прозрачный логотип в JPEG, и прозрачные области стали сплошными черными. Я предположил, что инструмент сломан, и потратил двадцать минут, глядя на него. Это & #39;s не ошибка - it& #39;s спецификация HTML. Когда вы сериализуете холст в формат без альфа-канала (JPEG), прозрачные пиксели компонуются в сплошной черный. Если вам нужна прозрачность, сохраните PNG или используйте WebP, который поддерживает альфа. Если вам конкретно нужен белый фон, сначала положите белый слой.
Каждый повторно кодирует метаданные EXIF и GPS. Поскольку эти инструменты перерисовывают изображение на свежий холст, на выходе нет EXIF, информации о камере, встроенных координат GPS. Это ' это настоящая победа в области конфиденциальности - вы ' не публикуете случайно широту/долготу вашего телефона, отпечатанную на фотографии. Но это ' это также есть возможность, если вы полагались на встроенные цветовые профили или метаданные авторских прав; они тоже. Для SEO это не так и #39; не имеет значения, но знайте это и #39; происходит.
Как работают адаптивные изображения и srcset?
Телефон отображает изображения в ширину 390px. Отгрузка файла 1920px тратит большую часть байтов, которые вы только что тщательно сжаты. srcset Исправляет это, передавая браузеру меню размеров и позволяя ему выбирать.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
Чтобы создать эти три файла, запустите один и тот же источник через Изменение размера изображения при 400, 800 и 1200px, затем конвертируйте каждый в webp. sizes атрибут - это часть, которую люди пропускают, и ее пропуск незаметно ломает все - без него браузер предполагает, что изображение заполняет окно просмотра, и хватает самого большого кандидата. Расскажите ему, насколько широко изображение действительно отображается, и он загружает правильный.
Как написать alt-текст, который действительно помогает?
Альтернативный текст — это вторая половина SEO-изображения, и это половина разработчиков спешат. Он выполняет сразу три работы: это то, что скрин-ридер читает вслух слепому пользователю, как гусенок понимает, что показывает изображение, и это запасной текст, если изображение не загружается. Правильно все правильно писать как человек, а не робот с ключевым словом.
Правило, которое я использую: опишите изображение так, как вы 'd опишите его кому-нибудь во время телефонного звонка. Конкретный, естественный, короткий - менее 125 символов, поэтому считыватели экрана делают don't неловко усекают его. Пропустите " изображение " или "фото, " потому что считыватель экрана уже объявляет, что это 's изображение; ведущее с этими тратами время слушателя и #39;s. И если ваше целевое ключевое слово действительно соответствует изображению, включите его один раз, естественно. Если оно не подходит и #39;t, оставьте его - фотография клавиатуры не подходит ' не нужно " купить дешевые беспроводные наушники и квот; застрял в его альтернативе.
Несколько до/после реальных обзоров, которые я сделал:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(заполненные ключевыми словами) →alt="Over-ear headphones with the carrying case open beside them"
Один нюанс, который люди ошибаются: чисто декоративные изображения - перегородка, фон - должны иметь незанятый alt="", не описание. Пустой альтернативный файл говорит считыватель экрана, чтобы он полностью пропустил его, что именно вам и нужно для украшения. Зарезервируйте реальный текст для изображений, которые несут информацию.
Пока вы в нем, назовите файл также описательно. wireless-headphones-matte-black.webp ритм IMG_4532.jpg Поскольку поисковые системы читают имя файла как сигнал, а дефисы (не подчеркивают) являются разделителем, который Google анализирует как разрывы слов.
Насколько это на самом деле меняет основные веб-жизненные данные?
LCP (наибольшая содержательная краска): ваш герой обычно является элементом LCP. Подавайте его в правильных измерениях, в WebP, в качестве ~80, и - что критически - делайте не лениво загружайте его. Ленивый загрузка «Герои выше» — это классическое «я» — это задержка в точном измерении LCP. Если это герой, <link rel="preload" as="image"> это вместо этого.
CLS (кумулятивный сдвиг макета): Всегда кладите width а height на <img>, йо- Эти два атрибута позволяют браузеру зарезервировать место до прибытия изображения, поэтому текст не перескакивает при загрузке. Это единственное дешевое исправление CLS, и я все еще нахожу его, что его не хватает.
INP (взаимодействие с следующей краской): Изображения не движутся напрямую INP, но страница, содержащая 3 МБ неоптимизированных изображений, голодает по основному потоку и сети емкости, необходимой для ответа вашего JavaScript. Более легкие изображения, более быстрое взаимодействие, косвенно.
Несколько вещей, которые я узнал раздражающим способом
Аудит перед оптимизацией. запустите страницу через PageSpeed Insights и сначала исправьте самый тяжелый файл - нарушитель размером 1,2 МБ имеет большее значение, чем сбривание значка на 4 КБ. Имя файлов, как у человека: wireless-headphones-matte-black.webp ритм IMG_4532.jpg в поиске изображений, потому что сканер читает имя файла как сигнал контента. напишите альтернативный текст you'd на самом деле сказать описание фотографии кому-то по телефону - конкретное, естественное, ключевое слово-включенный только там, где он подходит, никогда не набитый ключевыми словами. И don' не забудьте о себе открытый график поделиться изображением; правильно размер 1200 × 630, который вы сделали Изменение размера изображения Это то, что проявляется в социальных превью, а иногда и в поиске.
Часто задаваемые вопросы
Действительно ли оптимизация изображений влияет на рейтинг SEO?
Да, через основные веб-жизненные данные. LCP и CLS подтверждены сигналами рейтинга Google, и оба они сильно управляемы изображениями. Оптимизированные изображения обычно улучшают показатели скорости мобильной страницы с заметным отрывом, а на мобильных устройствах могут преобразовывать движение в рейтинге. Он также разблокирует изображения Google в качестве отдельного источника трафика.
Могу ли я конвертировать изображения в AVIF с помощью бесплатного онлайн-инструмента?
Обычно нет, и конвертер формата Toolz.dev не может. Внутрибраузерные конвертеры рисуют в <canvas>, а брезентовый кодер браузера и #39;s выводит только JPEG, PNG и WebP - там & #39;s нет доступного ему кодера AVIF. Конвертируйтесь в WebP онлайн для большей части выигрыша и генерируйте AVIF в конвейере сборки с помощью таких инструментов, как sharp или avifenc, если он вам нужен.
Должен ли я использовать webp или avif в 2026 году?
WebP - это безопасный дефолт и то, к чему я обращаюсь в первую очередь - универсальная поддержка, большая экономия, и вы можете сделать это в браузере. AVIF сжимается еще сильнее, и его стоит добавить для больших изображений героев и галерей, но генерируйте его во время сборки и обслуживайте через <picture> с запасным вариантом WebP.
Для каких настроек качества я должен сжимать JPEG и WebP?
Качество 80 - надежный ответ на фотографии. Обычно это неотличимо от оригинала при обычном просмотре, но при этом значительно меньше. Предварительный просмотр при 100% масштабирования перед фиксацией, так как артефакты отображаются в градиентах и тонах кожи. Ниже 60, сжатие становится видимым.
Почему мой прозрачный PNG стал черным после преобразования в jpeg?
Потому что JPEG не имеет альфа-канала. Спецификация HTML Canvas говорит, что прозрачные пиксели соединены в сплошной черный при сериализации в формат, не содержащий альфа. Это ожидаемое поведение, а не ошибка. Сохраните изображение как PNG или WebP, чтобы сохранить прозрачность, или сначала сложите его на белый фон, если хотите белый.
Эти инструменты загружают мои изображения на сервер?
Нет. инструменты изображения на Toolz.dev обрабатывают все локально на холсте в вашем браузере - файл никогда не покидает ваше устройство. побочный эффект, который стоит знать: каждый повторный кодирование полоски метаданные EXIF и GPS, что хорошо для конфиденциальности, но означает, что встроенные данные камеры и цветовые профили также отбрасываются.
Каков идеальный размер файла для веб-изображения?
В качестве грубой цели: изображения героев под ~ 200 КБ, изображения из содержания ~ 100 КБ и миниатюры до ~ 30 КБ. Они очень достижимы, если вы измените размер реальной ширины дисплея и подайте webP.Точное число имеет меньше, чем привычка менять размер, а затем сжимать, а затем преобразовывать.
Связанные с ними чтение и инструменты:
- Изображение компресс- вырезать размер файла после изменения размера
- Изменение размера изображения- создавайте отзывчивые размеры и социальные образы
- конвертер формата- экспортируйте PNG, JPEG или WebP
- Руководство по инструментам разработчика
- Объяснение сжатия изображения
