Java, UX, HTML, CSS, WEB-design

Оптимизация изображений в продвинутой веб-разработке


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

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

Ваш набор инструментов веб-дизайнера

Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна
Начинается с всего $16,50/месяц!


Типы файлов и когда их использовать

Существует три типа файлов изображений, которые мы используем при создании веб-сайтов: .jpg, .png и .svg.

JPG лучше всего использовать для фотографий, таких как пейзажи, пейзажи или люди. Для изображений в контенте, таких как изображение статьи в блоге, мы стремимся к 20-70 КБ. Большие фоновые фотографии могут весить до 500 КБ, но 200 КБ — это хороший средний показатель.

Файлы JPG имеют потери (они повторно сжимают и ухудшают качество изображения при каждом экспорте), и они не очень хорошо справляются с градиентами. Если у вас есть градиент в изображении, иногда вы можете разделить изображение на две части, чтобы вы могли отображать градиент на отдельном фоне, используя вместо этого градиенты CSS.

PNG лучше всего подходят для таких ресурсов, как логотипы и значки, поскольку они поддерживают прозрачность, а логотипы и значки часто используют более ограниченную цветовую палитру, поскольку PNG обеспечивают сжатие за счет уменьшения количества цветов.

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

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

В качестве примера использования PNG и SVG сравните логотипы Silver Screen Insider и Bozeman Websites. Для первого мы использовали SVG. Для веб-сайтов Bozeman из-за сложности, связанной с анимацией CSS, когда пользователь прокручивает страницу вниз, мы решили вместо этого использовать PNG, чтобы не снижать производительность браузера.

Иногда лучшим решением является сочетание обоих: для логотипа на веб-сайте JTech компонент «JT» — это PNG, а «Празднование 20-летия» — это SVG, чтобы он сохранял свое качество во всех размерах области просмотра.

Методы оптимизации

Чтобы получить наилучшие результаты, важно оптимизировать изображения. Для этого мы используем три программы: ImageOptim (для JPG и PNG), ImageAlpha (для PNG) и Scour (для SVG).

Оптимизация JPG

ImageOptim уменьшает размер файлов JPG и PNG. Для больших изображений, таких как те, которые мы используем для фоновых панелей, мы ограничиваем размеры 1600x1200px. Для фотографий контента, таких как изображение, вставленное в статью блога, мы ограничиваем размеры от 200 до 800 пикселей в ширину.

После изменения размера до окончательного разрешения изображение выводится в Photoshop в наилучшем доступном качестве. Каждый раз, когда мы сжимаем изображение, оно теряет некоторую точность, поэтому мы предпочитаем полагаться исключительно на ImageOptim для сжатия, а не на Photoshop. Photoshop заметно менее эффективен: его «сохранение для Интернета» с качеством 65 создает изображение такого же размера файла, но с худшей точностью, чем качество ImageOptim 85.

Сетчатка JPG

При нацеливании на сетчатку или другие дисплеи с высокой плотностью мы обнаружили, что лучше всего сохранить один JPG с удвоенным разрешением, но использовать более высокое сжатие, около 50-60 в ImageOptim, что может создать высококачественное изображение, которое хорошо выглядит. как на сетчатке, так и на стандартных дисплеях с более низкой плотностью. Этот метод позволяет нам использовать один ресурс для сетчатки и стандартных дисплеев, а не вырезать и загружать несколько версий и не увеличивать размер наших изображений в четыре раза.

Оптимизация PNG

Для PNG мы выводим из Photoshop, используя PNG 24 в их опции «сохранить для Интернета», а затем запускаем его через ImageOptim. Если он обнаружит, что изображение использует менее 256 цветов, ImageOptim без потерь преобразует изображение в PNG 8, более простой формат файла, который может создавать очень легкие файлы.

С ImageOptim наш конечный результат изображения без особых сложностей (минимальный цвет, простые формы и разрешение менее 200×200 пикселей) может иметь размер от 15 КБ до менее 1 КБ.

Оптимизация больших PNG

Для более сложных изображений, если мы не можем создать файл размером от 15 КБ до 50 КБ с помощью ImageOptim, мы используем ImageAlpha. ImageAlpha используется для обработки PNG-файлов от PNG 24 (миллионы цветов) до PNG 8 (максимум 256 цветов), изменяя изображение с потери без потерь на с потерями, в конечном итоге стремясь к изображению с наименьшим количеством цветов.

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

После экспорта из ImageAlpha мы запускаем его через ImageOptim для дальнейшей оптимизации.

Оптимизация SVG

Когда дело доходит до SVG, мы максимально упрощаем его перед экспортом изображения из Illustrator. Часто утомительный процесс из-за их размера, мы сначала пытаемся уменьшить количество слоев до минимума, при этом точно отображая иллюстрацию. Затем он сохраняется как SVG в Illustrator и оптимизируется с помощью программы Scour.

Мы используем этот сценарий автомата, чтобы упростить его использование в macOS, позволяя вам щелкнуть правой кнопкой мыши файл SVG в Finder и оптимизировать SVG через меню «Службы». Мы часто используем файлы шрифтов для векторной графики, которые являются одноцветными, с помощью программы под названием Glyphs.

Вывод

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

Мы надеемся, что это исследование нашего опыта работы с типами файлов JPG, PNG и SVG, инструментами сжатия изображений и качества станет для вас полезным, поскольку мы постоянно совершенствуем наш собственный процесс для создания веб-сайтов высокого уровня.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Оптимизация изображений в продвинутой веб-разработке

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

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

Название: Оптимизация изображений в продвинутой веб-разработке . Краткое описание: ⭐ Изображения веб-качества всегда балансируют м . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»