Компьютерная помощь в г. Унеча Закажи себе баннер на сайт

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

+ -
0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Retina JPGs

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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


Просьба Автора
HTML-cсылка:

BB-cсылка:

Прямая ссылка:

Похожие новости

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

Автору будет очень приятно узнать ваше мнение о своей новости.



Комментариев 0