4 Основные советы по оптимизации изображений

Jan 31, 2026

Инструкции

Несколько счастливых разработчиков, и этот автор имел возможность Tech Edit Addy Addy Osmani's новая книга по оптимизации изображений, Оптимизация основных изображений , который вы абсолютно должны прочитать.

10 способов оптимизации изображений для лучшей производительности

Строите ли вы полноразмерный Сайты электронной коммерции или просто сделать онлайн дом для вашего дизайн портфолио В этой статье вы узнаете несколько советов от книги Addy, которая поможет сделать ваши изображения Sceener и быстрее.

Быть селективными и предварительными критическими изображениями

Посмотрите на свой сайт и определите критический актив изображения. Для большинства это будет логотип или изображение героя, которое вы хотите сделать как можно скорее.

Это где предшествовать Подсказка ресурсов приходит. предшествовать Является ли способ намекать к клиенту, что актива должен быть получен до того, как анализатор браузера в противном случае его обнаружен. Вы можете использовать его для почти всего, но он работает великолепно для предварительной нагрузки критических изображений. Вот пример его использования в HTML & lt; head & gt; Элемент на заказ для предварительной нагрузки Hero Banner Image:

<link rel="preload" href="/img/logo.svg" as="image">

Вы также можете использовать предварительную нагрузку в заголовке HTTP:

Link: </img/logo.svg>; rel=preload; as=image

Ниже вы можете увидеть два рулона скриншота одной и той же страницы загрузки в Chrome. Один сценарий использует предшествовать загрузить изображение баннера героя, а другой нет.

The effect of using preload on a hero banner — Эффект использования предварительной нагрузки на баннер героя

В примере с предшествовать , изображение баннера появляется в окне браузера пол второй быстрее. Все из-за быстрой одноклассника, который дал браузер головой начать.

Автоматически упростить ваше произведение SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Упростите инструмент Illustrator, показывающий количество точек привязки до и после того как точность кривой снижена

Оптимизация SVGS отличается от других типов изображений, поскольку в отличие от JPEG или PNGS, SVGS состоит из текста, в частности, разметки XML. Это означает, что типичные оптимизации, которые вы применяете к текстовым активам (например, заимствование, сжатие GZIP / BROTLI), могут также применяться к SVGS. Кроме того, вы можете использовать оптимизатор, такой как SVGO, чтобы понять размер SVG.

Но что, если вы не просто потребляете векторные работы, но создаете его? Если вы являетесь пользователем Illustrator, вы можете автоматически упростить свои произведения искусства, чтобы уменьшить количество точек привязки в путях через упрощенное диалоговое окно.

Этот диалог можно найти в Иллюстратор CC. Меню, собираясь на объект и GT; путь и GT; упростить. Снидящую точность кривой (и необязательно регулировка порогового значения угла), можно удалить дополнительные точки пути в ваших произведениях. В этом случае вы отметите, что уменьшение точности кривой всего 6% удаляет 54 пункта пути. Образуется, это может даже улучшить внешний вид вашего произведения искусства.

The savings that path simplification can afford — Экономия, что упрощение пути может позволить себе

Слово к мудру - будьте осторожны, насколько агрессивно вы получаете с этим инструментом. Нижняя кривая точности слишком много, и ваше время тщательно продуманные произведения искусства будут передаваться в Blob. Убедитесь на правильный баланс, и вы получите награды.

Преобразовать анимированные GIFS в видео

With FFmpeg you can turn flabby GIFs into svelte video — С FFMPEG вы можете превратить Flabby Gifs в Svelte Video

Мы все любим хороший анимационный GIF. Они эффективно передают почти любые настроения, но они могут быть действительно огромными. Оптивенеры изображения, такие как Gifsicle, могут помочь побрить лишние килобайты, но билет - это преобразование этих GIF в видео и встраивает их в HTML5 & lt; Видео и GT; тег. То FFMPEG Утилита командной строки хорошо подходит для этой задачи:

 FFMPEG -I Animated.gif -b: V 512K Animated .Webm
FFMPEG -I Animated.gif -b: V 512K Animated.ogv
FFMPEG -I Animated.gif -b: V 512K Animated.mp4

Команды выше предпринимают источник GIF ( анимирован.гиф. ) в качестве ввода в аргументе -i и выходные видео с переменным битрейтом максимум 512 кбит / с. В тесте наших собственных мы смогли взять на себя анимированное GIF 989KB и уменьшают его до 155 КБ MP4, 109 КБ OGV и 85KB WebM. Все видео файлы были сопоставимы по качеству для источника GIF. Из-за везде & lt; Видео и GT; Поддержка тегов в браузерах эти три форматы видео можно использовать так:

 & lt; Video Preload = «Нет» и GT;
  & lt; источник src = "/ Видео / animated.webm" type = "Видео / webm" и GT;
  & lt; источник src = "/ Видео / анимация.ogv" type = "Видео / OGG" и GT;
  & lt; источник src = "/ Видео / анимация.mp4" type = "Видео / MP4" и GT;
& lt; / video & gt;

Если вы решили пойти по этому маршруту, обязательно закажите свой & lt; источник и GT; Метки, так что наиболее оптимальный формат указан первым, и наименее оптимальный указан последний. В большинстве случаев это означает, что вы сначала начните с видео WebM, но проверяйте размер выходного файла каждого видео и переходите с тем, что является наименьшим первым, и заканчивается тем, что самое большое.

Если у вас нет FFMPEG или не знаю, что это такое, Проверьте это Отказ Легко установить через менеджеры пакетов операционной системы, такие как домашний или шоколад.

Ленивая нагрузка с пересечением

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

К счастью, API пересечений Observer дает нам проще и гораздо более эффективный способ определить, когда элементы находятся в просмотре. Вот пример какой-то базовой ленивой нагрузки на разметку изображения:

. ширина = "320" высота = "240" & gt;

Здесь мы загружаем изображение заполнителя в сортировка атрибут, а затем хранить URL для изображения, которую мы хотим лениво загружать в data-src. атрибут. Чтобы все это все, мы даем & lt; img & gt; элемент класс ленивый для легкого доступа с Queryselectorall. Отказ Оттуда мы просто используем этот код:

 Document.addeventListener ("domcontentloaded", Функция () {
  Если («IntersefectionIbServer» в окне и AMP; «IntersizerVERVERVERENTRY» в Окно и AMP; & amp; "IntersectionRatio" в окне.
    Elements = document.queryselectorallall («IMG.Lazy»);

    VAR ImageObserver = новый интерсефекционныйibserver (функция (записи, наблюдатель) {
      записи .Foreach (функция (вход) {
        Если (вход .isintersecting) {
          intry.target.SetAttribute («SRC», intry.target.getAttribute ("data-src"));
          intry.target.classlist.Remove («ленивый»);
          ImageBserver.Unobserve (intry.target);
        }
      });
    });

    элементы .Foreach (функция (изображение) {
      ImageBserver.Observe (изображение);
    });
  }
});

Здесь мы связываем код к документ объекты Domcontentloaded мероприятие. Этот код проверяет, поддерживается ли наблюдатель пересечения текущего браузера. Если окажется, что это, мы вообще IMG элементы с классом ленивый с Queryselectorall. а затем прикрепите им наблюдателей.

Наблюдатель содержит ссылки на элементы, которые мы наблюдаем ( завод ) и сам наблюдатель ( наблюдатель ). Этот код петли на каждой записи наблюдателя изотерсеттинг ценить. Хотя наблюдаемый элемент выходит из точки зрения, изотерсеттинг возвращается 0. Отказ Хотя элемент входит в просмотр в области просмотра, он вернет значение больше 0. Отказ Это в этот момент, что мы поменяем содержание изображения data-src. атрибут в сортировка атрибут и удалить его ленивый учебный класс. После данного изображения ленивые нагрузки наблюдатель удаляется из него с наблюдателем неравномерно метод.

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

Эта статья была первоначально опубликована в вопросе 301 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить проблему 301 здесь или же Подписаться здесь Отказ

Статьи по Теме:

Полное руководство по SVG
Использование векторных инструментов: подход веб-дизайнера
Animate SVG с JavaScript

4 Основные советы по оптимизации изображений

Быть селективными и предварительными критическими изображениями

Автоматически упростить ваше произведение SVG

Преобразовать анимированные GIFS в видео

Ленивая нагрузка с пересечением

Инструкции - Самые популярные статьи

Как нарисовать руку

8 золотых правил мобильного дизайна

Создать AI-Chatbot

Начните с WebVR

Оставьте щетку миксер в Photoshop

10 удивительных вещей, которые вы можете сделать с слоями

Получите голову реагируют с этими пятью факторами

Как сделать свой веб-сайт WordPress Multingual

Категории