Сохранение для web в Photoshop

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Дизайн

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

Ответ лежит на поверхности: из за времени его загрузки на странице. К сожалению, качество модемных соединений ещё очень далеко от идеального, а выделенные линии стоят не у всех. Но как раз скорость соединения с интернет и играет первостепенную роль. Графическая информация передаётся значительно медленнее чем текстовая. Время загрузки изображений пропорционально размеру их файла и обратно пропорционально качеству. Приведу пример. Кликнув на эту ссылку, вы увидите страницу с изображением вверху, которое по размеру своего файла равно размеру текста в форме на той же странице. Отсюда делаем вывод, что какой бы интересной картинка ни была, посетитель не будет вечно ждать её загрузки! Но как и где нужно уменьшать размер? Самое простое решение — в Photoshop.

Photoshop обладает  хорошими средствами для сжатия графических файлов. Само это сжатие включает в себя:

  • Снижение размеров и разрешения изображений.
  • Уменьшение количества цветов в изображении.
  • Использование сжатых и специальных форматов файлов, их оптимизация.
  • Оптимизация параметров сжатия для отдельных фрагментов изображения.

Вы никогда не задумывались, почему подавляющее большинство всех графических файлов в интернете находятся в форматах gif или jpg? Всё из-за того, что эти форматы хорошо сжимают изображения. В последнее время появился ещё одни формат — png, который тоже неплохо подходит для хранения картинок. Но, прежде чем перейти непосредственно к оптимизации в Photoshop, вы должны решить, к каком формате вы будете сохранять ваше изображения. Для этого вы должны кое-что о них знать.

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

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

Ну а теперь перейдём к процессу оптимизации. Выбирайте пункт меню в Photoshop: Файл — Сохранить для Web. После этого вы увидите вот это окно. В нём вы и будете задавать параметры оптимизации. Справа вы можете выбрать формат и различные атрибуты сжатия. В главном окне будут показаны оптимизированные изображения и оригинал для сравнения. Изменяя параметры сжатия, изображения будут автоматически меняться. Под каждым из них написан текущий формат, оптимизированный размер, количество цветов и время загрузки. Привожу самые главные параметры, влияющие на размер и на качество изображения.

Dither
Это сглаживание  изображения. При небольшом изменении это может значительно понизить размер, не затронув качества.

Lossy
Весьма эффективный алгоритм предварительной обработки изображения. Чем больше значение, тем меньше размер и тем хуже качество. Но изменение в пределах 5-15% почти не влияют на качество, зато снижают размер файла.

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

Colors
Определяет количество цветов, используемых в вашей картинке. Чем меньше цветов, тем меньше размер.

Transparency
Прозрачность. Если на вашей картинке есть прозрачные области, то поставьте значок рядом с этим пунктом, иначе эти области будут залиты цветом, который стоит в пункте Matte.

Interlaced
Определяет тип появления изображения в процессе его загрузки. Если флажок убран, то изображение будет показываться постепенно. То есть сначала будет показан самый верх, потом все больше и больше, пока всё изображение не загрузится. Если же флажок поставлен, то изображение появится всё и сразу, но оно будет очень плохого качества. В процессе загрузки картинка будет обретать чёткость, пока не загрузится вся.

Color Table
Цветовая палитра оптимизированного изображения. В ней вы можете вручную изменять цвета, добавлять новые, или делать прозрачными уже имеющиеся.

Blur
Размытие. Чем больше, тем резкость, чёткость и размер изображения меньше.

Quality
Качество. Ну тут всё понятно. Вам просто надо найти компромисс между размером изображения и его качеством.

Selective, Adaptive, Web…
Эти значения влияют на палитру цветов, используемых в изображении. Если, к примеру, стоит палитра Web, то все цвета изображения будут заменены на близкие им из цветовой таблицы, которую вы можете можете найти на моём сайте в разделе «Графика«.

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

Источник: webcorp.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты