Это сообщение является второй частью статьи
Умные PNG оптимизация Techniques, что мы опубликовали на прошлой неделе.В качестве веб-дизайнера, вы могли бы быть уже знакомы с форматом PNG изображение, которое предлагает полнофункциональные прозрачности.It’ SA потерь, надежный, очень хорошая замена изображений формата GIF старший.В Photoshop (или любой другой графический редактор) пользователь вы думаете, что есть не так много вариантов для оптимизации PNG, особенно для полноцветных PNG’ S (PNG-24 в Photoshop), который doesn’ т есть.Некоторые из вас могут даже подумать, что этот формат “ unoptimizable”.Ну, в этой должности we’ постараемся развенчать эту myth.
Это сообщение описывает некоторые методов, которые могут помочь вам оптимизировать свой PNG-images.Эти методы являются производными от трудоемкой часов, потраченных на изучение, как именно PNG датчик сохраняет данные.We’ поговорим об оттенках серого, как использовать меньшее количество цветов для оптимизации, а также о снижении подробно minmize файл size.
Вы можете взглянуть на следующие статьи:
Grayscale
Photoshop can’ T сохранения градаций серого PNG, так что вы должны использовать OptiPNG после сохранения черно-белых изображений, например:
optipng -o5 bw-image.png
Grayscale изображений занимает гораздо меньше места, чем RGBs, потому что каждый пиксель описан только один байт, а не три:
PNG-24 (Photoshop → истинный цвет), 8167 bytes.
PNG-24 (Photoshop OptiPNG → серого), 6132 bytes
Настройка оттенков серого цвета режим (Image → Mode → Grayscale) для изображения перед сохранением их в формате PNG очень важно, особенно для полупрозрачных изображений (см. Грязная transparency метод для получения дополнительной информации).
Меньше Colors
Это альтернатива Posterization Способ уменьшения цветов в изображении.Постеризация может кардинально изменить цвета изображения, которое является неприемлемым, если у вас есть, чтобы смешать изображение на фоне вашего сайта.Этот метод дает вам больший контроль над цветом, но не должна превышать 256 colors.
Метод в основном для извлечения данных изображения из полупрозрачного изображения (например, удалить прозрачность), преобразовать его в индексированные цвета и применять оригинальные маски.Уменьшение количества цветов сделает поток данных изображенийупаковка в PNG компрессора более эффективной.Let’ посмотрим, как оно works.
1.Откройте оригинальные image в Photoshop и продублируйте его (Image → Дубликат)
63 KB
2.Удалить прозрачности от дублированных изображений (Filter → Фото → Wiz удалить прозрачность):
3.Установите изображение в режиме индексированных цветов (Image → Mode → индексированные цвета).В новом диалоговом окне введите следующие параметры:
- Цвета: 190,
- Dither: диффузия,
- Количество: 80%
.
4.Установите режим изображения обратно в RGB и скопируйте слой изображения в исходном файле.Совместите скопированный слой с ссылками одно и применять свои маски.Теперь сохраните его в формате PNG-24:
51 KB
Как вы можете видеть, эти простые шаги спасли нас 11 KB оригинального изображения без заметного влияния на качество изображения.Но этот метод имеет еще одно преимущество: бег OptiPNG на этих изображениях часто спасает даже более байт.В этом примере, image’ Размер S была снижена на 36%, с 51 КБ до 33 КБ.Вместо преобразования изображения в режим индексированных цветов, вы можете сохранить его для Web и применять Влияние mask можно сэкономить bytes.
Пожалуйста, обратите внимание, что этот метод не является таким же, как PNG-8 с палитрой прозрачности в Fireworks.В большинстве случаев меньше colors даст вам больше, чем 256 цветов, так что вы будете иметь, чтобы сохранить изображение в PNG-24, а не PNG-8.Помните, что твердые красные и 50%-прозрачный красный два разных colors.
Сокращение Detail
Этот метод полезен для оптимизации тени, отражения, свечения, и т.д. Идея состоит в том, чтобы уменьшить подробно в областях изображения, которые едва видны.Как вы помните из Грязная transparency метода, каждый пиксель полноцветных изображений с прозрачностью описано в четыре байта: RGBA.Последний контролирует пикселей прозрачности.Для пикселей, Альфа значение слишком низкое (т.е. пиксели, которые едва заметны), вы можете заменить RGB данные для лучшего сжатия изображения.Let’ Давайте попробуем that.
1.Открыто Ставку retro в Photoshop, again.
63 KB
2.Как вы можете видеть, радио есть …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров