Работа по оптимизации изображений для web делится на два этапа:
- подготовка изображения в редакторе
- процесс сжатия.
Не будем останавливаться на операциях по коррекции уровней, балансу цветов, насыщенности и кадрированию. Перейдем к параметрам, влияющим на степень возможного сжатия изображения.
Разрешение (Resolution) задаем стандартное для Web – 72ppi, пропорции сохраняем (Constrain Proportions). Размер изображения в пикселях желательно задать минимально необходимый. Ориентироваться следует на самое распространенное разрешение экрана, которое в настоящее время составляет 1280х1024 (1280х800 для широкого экрана).
При любом изменении размеров (кроме обрезки – Crop) главное - не менять общее количество пикселей в изображении. Потому как ухудшается четкость картинки, создаются дополнительные контурные искажения, что приводит к неоднозначности картинки на экране монитора. Рассмотрите любой из скриншотов, помещенных на этой странице, при разных масштабах показа в браузере. Поэтому все операции с резкостью выполняются только при 100% масштабе.
Требования оптимизации для форматов JPEG, GIF и PNG отличаются, что связано с разными алгоритмами сжатия.
Оптимизация изображений в формате JPEG и PNG-24
Обрабатываем фильтрами повышения резкости.
Фильтр Unsharp Mask с параметрами: Amount=100%, Radius=0.2 pixels, Treshold=0 levels, повторив последовательно его действие от трех до пяти раз.
Затем применяем фильтр размытия Despeckle (Filter – Noise – Despeckle). Обычно достаточно уменьшить размытие примерно до 50%, добиваясь сохранения мелких деталей при минимальной контурной резкости.
Шумы убираем фильтром Reduce Noise (Filter – Noise – Reduce Noise).
Фильтрам можно назначить ярлыки в меню и быстрый вызов. Edit – Keybord Shortcuts and Menus – Filter – Noise и Sharpen
Переходим к сжатию изображения, выбрав File – Save for Web (Файл – Сохранить для Web) или Ctrl+Shift+Alt+S. Устанавливаем режим просмотра одновременно двух изображений, нажав 2-Up.
Под сжатым изображением показаны основные его характеристики: размер и время загрузки в браузере при определенной скорости интернет – соединения. Для выбора скорости кликните правой кнопкой мыши по изображению.
В правом углу расположены основные регулировки сжатия. Щелкнув по стрелке в окне Quality (Качество), выводим шкалу и ползунком регулируем степень сжатия, контролируя качество.
Оптимизация изображений в формате GIF и PNG8
Для графических изображений с небольшим количеством цветов, большими однотонными участками и текстом, например, диаграммы, таблицы, лучше применять сжатие в форматах GIF и PNG8.
PNG-8 обычно дает лучшие результаты, чем GIF. Для выбора формата используем выпадающее меню окна Preset
Для регулировок доступны следующие параметры: размытие (Dither), прозрачность (Transparency) и количество воспроизводимых цветов (Colors). Уменьшайте количество цветов.
Поэкспериментируйте с алгоритмом сжатия. Обычно наилучший результат при минимальном объеме дает выбор Selective.
Сглаживание позволяет имитировать недостающие цвета несколькими соседними пикселями. Обычно используется режим Diffusion, а для градиентов – Noise.
Конкретное значение размытия устанавливаем в окне Dither с помощью выпадающей шкалы.
В формате GIF есть функция Lossy (Понижение качества), которая позволяет при небольших значениях уменьшить размер сжатого файла. При регулировке надо внимательно следить за качеством, которое быстро ухудшается при значениях Lossy выше 20%.
Форматы GIF и PNG позволяют сохранять прозрачность. Это позволяет наложить изображение на фон страницы.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
