Главная » Архив меток: оптимизация изображений

Архив меток: оптимизация изображений

Вектор? Растр? Почему не оба?

От автора: на этой неделе я столкнулся с интересным классом задач, для которых, оглядываясь назад, можно было бы найти гораздо лучшее решение. Существует ли оно? Проблема связана с hero-изображением в правой части домашней страницы jamstackconf.com. Мы работаем с Figma в маркетинговой команде Netlify, и моя первая попытка экспортировать такое изображение была связана с проблемами. Попытка 1: SVG 10.1 MB Оригинальный ...

Читать далее »

Максимальная оптимизация загрузки изображений для Интернета в 2021 году

От автора: в этом посте я опишу 8 методов оптимизации загрузки изображений, чтобы минимизировать использование для отображения изображений как пропускного канала, так и ЦП. Я представлю их в виде аннотированного примера HTML, чтобы людям было легче воспроизвести результаты. Некоторые из этих методов более устоявшиеся, другие в некоторой степени новы. В идеале, ваш любимый механизм для публикации веб-документов (например, CMS, генератор ...

Читать далее »

Преобразование и оптимизация изображений из командной строки

От автора: изображения занимают до 50% от общего размера средней веб-страницы. И если изображения не оптимизированы, пользователи в конечном итоге загружают дополнительные байты. Когда они загружают дополнительные байты, сайту не только требуется гораздо больше времени для загрузки, но и пользователи используют больше данных. И то, и другое можно решить, по крайней мере частично, путем оптимизации изображений перед их загрузкой. Исследователи ...

Читать далее »

Пять способов отложенной загрузки изображений

От автора: даже при правильной оптимизации изображения могут весить довольно много. Это может оказать негативное влияние на время, которое посетители должны ждать, прежде чем смогут получить доступ к контенту на вашем сайте. Скорее всего, они потеряют терпение и перейдут куда-то еще, если только вы не придумаете решение для загрузки изображений, чтобы это не влияло на воспринимаемую скорость. В этой статье ...

Читать далее »

Неприглядная правда об оптимизации красивых изображений

От автора: прочитайте любой блог о производительности или посетите любой доклад о производительности, и все посоветуют вам, что оптимизация изображений — это лучшее место для начала. Используя автоматизированные сервисы, вы можете получить изображения меньшего размера за относительно короткий промежуток времени. И все мы знаем, что меньшие изображения дадут нам лучшую производительность — или нет? Потратив последние пару лет на ситуации, ...

Читать далее »

Состояние современных методов оптимизации изображений в 2019 году

От автора: в прошлом году я написал пост, в котором рассматриваются способы использования изображений в Интернете. С помощью данных из архива HTTP, я смог посмотреть, как доставляют изображения 500 000 веб-сайтов и сколько сайтов могут улучшить свои механизмы доставки изображений, чтобы сократить время загрузки страницы. Heart Internet попросили меня обновить данные и предоставить информацию о состоянии доставки изображений в Интернете ...

Читать далее »

Оптимизация изображений для пользователей с низкой скоростью соединения

От автора: для каждого веб-сайта время загрузки страницы является критическим фактором. Благодаря более удобному пользовательскому интерфейсу, который является следствием быстрой загрузки веб-страницы, те, кто уделяют этому достаточно внимания, получают преимущества в виде более высокого ранжирования в поисковых системах, более высокого коэффициента конверсии, лучших показателей отказов и времени просмотров страниц. И этот факт был отмечен в нескольких исследованиях. Например, согласно одному ...

Читать далее »

Оптимизация изображений для сайта: влияние на оценку производительности Google

От автора: оптимизация изображений для сайта играет одну из важнейших ролей. Google обращает внимание на производительность больше, чем когда-либо прежде. Производительность является фактором ранжирования в органическом и платном поиске (Google, 14 января 2019 г.). Производительность сайта напрямую влияет на показатели вашего бизнеса (Test My Site от Google). Google измеряет производительность с помощью специальной оценки производительности. Оценка производительности определяется Lighthouse, моделирующим ...

Читать далее »

Для чего и как использовать сегодня изображения WebP

От автора: изображение WebP — это формат, разработанный Google в 2010 году. Он был создан в качестве альтернативы таким форматам, как PNG и JPG, позволяя иметь файлы гораздо меньшего размера при сохранении схожего качества изображения. Для чего использовать WebP? WebP — невероятно полезный формат, потому что он предлагает и производительность, и функционал. В отличие от других форматов, WebP поддерживает сжатие ...

Читать далее »

Отложенная загрузка изображений для увеличения производительности веб-сайта: пять методов

От автора: благодаря тому, что изображения являются одними из самых популярных типов контента в Интернете, время загрузки страниц может стать проблемой. Отложенная загрузка изображений призвана бороться с этим. Даже при правильной оптимизации изображения могут иметь довольно большой размер. Это может отрицательно сказаться на времени, которое посетители должны ждать, прежде чем смогут получить доступ к контенту на вашем веб-сайте. Скорее всего, ...

Читать далее »