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

Sep 15, 2025

Инструкции

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

По иронии судьбы, проблема не ушла в наши дни. Каждый раз, когда вы посещаете веб-сайт Script-Heake Web (например, Mainstream World News), он часто тянет дюжину мегабайт кода JavaScript, изображений, видео и athnot. Это все еще может быть болезненно медленным и даже стоить симпатичной пенни для некоторых пользователей мобильных данных (это не должно быть проблемой, если вы используете приличный Строитель сайта , и хорошо веб хостинг следует следить за этим для вас).

В этом руководстве мы узнаем, как вы сможете умереть битовые файлы для веб-сайта. До тех пор, пока он использует старые добрые форматы PNG и JPEG (см. Больше о Форматы файлов изображений здесь и обязательно сохраните ваши файлы справа облачное хранилище Кроме того, мы увидим, как мы можем сделать их меньшими без ущерба для качества, используя немного горячей Проекты с открытым исходным кодом Отказ В конце концов, у нас будут существенно меньшие файлы, которые все равно будут выглядеть хорошо, но требуют меньше времени и данных для отображения веб-браузеров пользователей.

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

Лучшие темы портфолио WordPress

Выберите правильный формат

Это может звучать тривиально, чтобы по-прежнему быть осторожным о размере файла, но достаточно примеров, где изображение либо слишком массивно без каких-либо целей, либо выглядит ужасно, несмотря на небольшие. Чтобы избежать таких ошибок, выберите формат, чтобы сохранить или преобразовать изображение с умом. Использование JPEG подразумевает разрыв изображения в плитки 8х8 пикселей, где каждая плитка сжимается. Уровень компрессии зависит от пользователя (это тот слайдер, когда вы сохраняете изображение), но обычно JPEG допускает на 10: 1 увеличение размера файла с приемлемой потери по качеству.

Отличие восприятия между файлами JPEG, выполненные с высоким содержанием (80-100) и низким (40-60) соотношением сжатия, минимальны для фотографических изображений, но очень заметны для таких вещей, как цифровые произведения искусства, значки и скриншоты. Поэтому рекомендуется выбрать JPEG для фотографий и пойти с чем-то другим для других типов растровых изображений.

PNG является одним из самых подходящих форматов для сетевой графики (на самом деле, это то, что означает его сокращение). Хотя формат JPEG всегда является потеря (даже с набором качества до 100), формат PNG может быть либо потерями, либо нет. Более того, даже когда это так, он сжимает данные за счет уменьшения количества цветов, используемых на изображении, так что результат обычно все еще выглядит четко и понятно. Так что выберите PNG для изображения изображений ScreenGrabs или любых других изображений с твердой заливкой.

Начните с удобных методов

Imagine is based on Electron and provides a friendly interface for processing several images at once — Представьте себе, что электрон и обеспечивает дружеский интерфейс для обработки нескольких изображений одновременно

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

Представьте себе произведения с файлами JPEG, PNG и WebP и идеально подходит для кодирования потерь. Самое большое преимущество состоит в том, что инструмент интерактивный; Это мгновенно показывает, как изображение будет выглядеть с текущими настройками и отображает предлагаемый размер файла. Представьте себе отлично работает для партии обработки - по крайней мере, он может сохранить все открытые изображения сразу, если вам нужно.

Само собой разумеется, есть десятки, если не сотни, из других jpeg и PNG Optimivers, включая некоторые удобные онлайн-сервисы (например, Tinyjpg. ). Но еще не спешите - у нас есть что-то лучше на нашем рукаве.

Расширенные методы сжатия

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — Для JPEG мы использовали тестовое фото соломенной шляпы на размытом фоне; Guetzli уменьшенный размер файла на 33 процента и лептона на другой 23 процента

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

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

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Исходное изображение может быть либо PNG, либо JPEG, а выход всегда является JPEG. Поэтому вы можете использовать Guetzli для преобразования PNG в JPEG благодаря своему современному сжатию. Качество должно падать между 0-100. Guetzli - это невероятно ресурсостойкое программное обеспечение; Он потребляет почти 300 МБ памяти на 1 мегапиксель, а также много мощности процессора. Мы надеемся, что ваши супер оптимизированные JPEG не будут повышать глобальное потепление ...

Портативная сетевая графика - это другая история, пока она была разработана для кодирования изображения без потерь. Когда вы сохраняете изображение в качестве PNG в редакторе изображений, как GIMP, у вас есть слайдер соотношения сжатия со значениями от 0 до 9. Здесь 0 означает отсутствие сжатия, и он делает изображение весом, как если бы он был сохранен как TIFF. Напротив, 9 полоски большинство ненужных цветной информации и приводит к файлу, в 15-20 раз меньше, чем Tiff.

На этот раз мы попытаемся сделать уже маленький файл PNG (с соотношением 9) еще меньше. Для этого мы будем использовать ZOPFLI, еще один инструмент с открытым исходным кодом, который снова имеет корни в Google Labs. ZOPFLI - это высококачественный компрессор для дежитации, кодирования данных GZIP и ZLIB.

Интересная часть заключается в том, что ZOPFLI содержит два кодировщика в одном пучке: двоичный бинарный и выделенный инструмент «ZOPFLIPNG». Последнее это именно то, что нам нужно! ZOPFLIPNG - энкодер на основе дежита с определенными алгоритмами, образующимися из формата WebP. Он достаточно умный, чтобы автоматически выбрать лучшую стратегию, используя коды сканирования и удаление различных ненужных кусков внутри PNG. Используйте его с этим простым синтаксисом:

zopflipng original_png output_png

ZOPFLIPNG, вероятно, может сделать работу еще лучше со следующими явными опциями:

 ZOPFLIPNG - теракты = 500 --Filters = 01234MEPB --lossy_8bit --lossy_transparent Original_png
OPENT_PNG

Цена, которую вы платите, такая же, как и с Guetzli: инструмент занимает много времени для обработки изображения, особенно если он большой. Чем больше итераций, которые вы используете, тем дольше это займет, но 500 - разумное число. Усиление размера файла с ZOPFLI лежит от 8 до 20 процентов, что очень хорошо для визуальных изображений. Вкратце, набирает 8 процентов общего для скриншотов, тогда как 20 процентов возможно с фотографиями (когда вам нужно хранить их как PNGS).

Обновление до следующих форматов файлов

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — Тестовое изображение PNG было обычным скриншотом 1920x1080; Последовачное сдавление ZOPFLIPNG, а затем Flif приобрела 14 процентов без уменьшения количества цветов.

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

Один из них - это новый формат изображения без потерь на основе метода сжатия Maniac (метаадаптивно-нулевой арифметической арифметической арифметики), который может превзойти PNG, FFV1, без потерь без потерь, без потерь BPG и без потерь JPEG 2000 с точки зрения соотношения сжатия. Flif доступен для всех платформ, и некоторые зрители изображений уже поддерживают его, но он имеет долгий путь, чтобы ударить на мейнстрим. Прямо сейчас это имеет смысл, используя фликс для хранения или на стороне сервера. Это может вести себя как эффективный формат архивации. Вам нужно будет схватить код на странице GitHub Project и компилируйте его. Как только у вас есть фликс Бинарный установлен, используйте следующую команду для кодирования изображения PNG:

 Flif-E Original_png Optual_flif

Заменять -Е. с потрясающий и поместите файлы в обратном порядке, чтобы «распасть» свое изображение обратно в PNG. С точки зрения инструментов, прямо сейчас, есть компонент API Flif WiC API для Windows, плагин QT Flif для Linux и Phew Image Viewer и плагин QuickLook для MacOS (см. Раздел «Ссылки» для получения подробной информации). По сравнению с изображением, который был подвергнут замученному ZOPFLIPNG, Flif уменьшает размер его файла дальше на ~ 10 процентов. Впечатляющие результаты!

Наш последний герой - Лептон, еще один формат открытого источника, щедро опубликованный разработчиками Dropbox. Lepton делает с JPEG, что делает флейс с PNG. Лептон может уменьшить JPEGS до 22 процентов в режиме без потерь, что означает, что энкодер не вызывает никаких потерь по качеству по сравнению с исходным файлом JPEG. Под капотом Lepton подразумевает интеллектуальные методы сжимания этих блоков JPEG 8x8. Вместо того, чтобы написать Zeros и OD, Lepton кодирует данные растрового изображения с помощью арифметического кодера VP8, который уважает контекст вокруг каждого блока.

Наш тест оказался Lepton, чтобы быть очень эффективным и быстрым. Команда выглядела как следующее:

 Lepton Original.jpg Optement.lep

А за секунду или два инструмент произвел файл .lep, который был меньше почти на четверть оригинала. По сравнению с трудоемким ГУЕТЛИ, Лептон быстро быстро. Вы можете использовать лептон так же, как делает Dropbox. Формат позволяет снизить затраты на хранение на 20-25 процентов, и, поскольку оно настолько Snappy, вы можете сделать последовательности кодирования / декодирования на летах без серьезных недостатков. Кстати, команда декодирования одинаково проста, ему нужно только поменять два файла, и полученный файл идентичен исходному JPEG:

 Lepton Original.lep english.jpg

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

Как получить программное обеспечение

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

Захватить бинарный бинарный здесь Отказ Это самое проще всего сделать. ZOPFLI дает только код (построить его с 'make') в Гадость Отказ Однако для вас может быть мудрее, чтобы получить его через Node.js Package Manager:

 <Код> NPM Установите узел ZOPFLI

Некоторые полезные ссылки на Flif:

Фликс-хаб. : Справочная реализация, источники и двоичные файлы Windows
Xnview mp. : Кроссплатформенный зритель фото со встроенной поддержкой флофики
qt-flif-плагин : Небеса для пользователей Linux
Фей : Зритель и плагин QuickLook для MacOS
Лептон : Исходный код и двоичные файлы Windows

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

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

Окончательное руководство по разрешению изображения
Как создать эффекты текста и изображения глюков в CSS
Руководство дизайнера по использованию изображений более эффективно
4 Советы по оптимизации основных изображений

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

Выберите правильный формат

Начните с удобных методов

Расширенные методы сжатия

Обновление до следующих форматов файлов

Как получить программное обеспечение

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

Начните с Bulma

Как изменить размер изображения в Photoshop

30 подсказки рендеринга Keyshot

Используйте Marmoset Toolbag для представления моделей в VR

Как использовать текстуры в Photoshop

Разбросание деревьев с V-Ray

сделать реалистичные растения в кино 4D

сделать прототип Hi-Fidelity в атомном

Категории