Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <p>Теги: производительность, веб-приложения, изображения, нагрузка, png, jpg</p>

2 <p>Зачастую общий размер изображений, которые подгружаются на веб-страницу, составляет больше половины веса всей страницы. Именно поэтому очень важно выбирать правильный формат изображений. Об этом и поговорим.</p>

3 <p>На самом деле, выбор заключается в том, чтобы отдать предпочтение одному из двух известных форматов:<strong>PNG</strong>и<strong>JPG</strong>. Давайте рассмотрим особенности каждого из них.</p>

4 <h2>PNG</h2>

5 <p>Крутой растровый формат, когда-то заменивший GIF. Особенности: •<strong>прозрачность</strong>. Если этот параметр важен, ваш выбор - однозначно PNG; •<strong>разнообразная палитра</strong>(8 и 24 бит). Позволит вам делать небольшие по цветовой гамме картинки еще и маленькими по размеру.</p>

6 <h4>Когда лучше применять?</h4>

7 <p>На деле PNG дает возможность показывать изображения с высокой точностью цветопередачи и без потери мельчайших деталей. С его помощью можно успешно отображать: • иконки; • малоцветные иллюстрации; • картинки с повышенными требованиями к четкости мелких деталей.</p>

8 <h4>О палитрах PNG24 и PNG8</h4>

9 <p>PNG24 обеспечивает максимальную глубину цветов - хорошее решение для многоцветных картинок. PNG8 характеризуется ограниченной палитрой от 1 бита (два цвета) до 8 бит (соответственно, 256 цветов). Что это значит на практике? А то, что вы получаете возможность существенно уменьшать размер файлов с небольшим количеством цветов.</p>

10 <p>Вот как можно выполнить преобразование PNG24 в PNG8:</p>

11 <h2>JPEG</h2>

12 <p>Формат характеризуется максимально доступной палитрой, а в целях уменьшения размера можно применять специальный механизм сглаживания и сжатия.</p>

13 <h4>Когда применять?</h4>

14 <p>У JPEG есть сильная сторона, которая проявляется, если картинка содержит много цветов, а особые требования к мелким деталям отсутствуют. В результате можно успешно отображать: • фотографии; • скриншоты; • многоцветные иллюстрации.</p>

15 <h4>Progressive JPEG</h4>

16 <p>JPG поддерживает прогрессивный формат. К примеру, если пользователь откроет изображение в браузере, он поначалу увидит лишь общие очертания, но впоследствии детализация и качество максимально увеличатся. Такой нехитрый трюк оставит впечатление о том, что сайт загружается быстрее. Это важно, если скорость доступа в сеть понижена.</p>

17 <p>Как выполняется преобразование в progressive-формат:</p>

18 <p>Также можно использовать imagemagick:</p>

19 <h4>Сглаживание</h4>

20 <p>В JPEG есть возможность указывать уровень сжатия/сглаживания в процессе сохранении картинки. Да, качество снижается, но порой это проходит незаметно, в то время как экономия размера бывает весомой.</p>

21 <p>Используя значения в диапазоне 5-95, вы сможете получить разные уровни сжатия:</p>

22 <h2>GIF</h2>

23 <p>Когда существует PNG, использовать GIF имеет смысл лишь в одном случае: при наличии анимации. Это актуально, к примеру, для<strong>прелоадеров</strong>.</p>

24 <h2>Рекомендации</h2>

25 <p>Напоследок предлагаем перечень рекомендаций по работе с изображениями. Следование списку ниже позволит вам снизить итоговую нагрузку на веб-приложение: - убирайте белые края с изображений (лучше используйте отступы); - обращайте внимание на уровень JPEG-сглаживания (дефолтные значения часто завышены); - не забывайте про Progressive JPEG (появится впечатление, что сайт работает быстрее); - применяйте ограниченную PNG-палитру; - применяйте GIF лишь для анимаций; - оптимизируйте картинки, но не в ущерб качеству; - помните про технику CSS-спрайтов (полезно при объединении мелких иконок в единый файл); - не стоит сохранять текстовый документ в виде изображения; - уменьшенные копии картинок лучше, чем их уменьшение в HTML, но только в том случае, когда размер уменьшенной версии отличается больше чем наполовину.</p>

26 <p><em>По материалам блога https://highload.today/.</em></p>