Содержание
Одним из необходимых пунктов при оптимизации сайта является использование качественной и одновременно малой по весу графики. Поэтому, для сайтов вопрос с размерами и весом картинок особенно актуальный. Рассмотрим несколько вариантов, которые позволят изменить размеры изображения по нужным параметрам: с использованием программы и изменение размеров картинок онлайн.
Изменение веса и размера изображения с помощью Фотошоп
Fotoshop — это одна из программ, которая просто необходима дизайнерам и тем, кто делает сайты самостоятельно. Да и любому другому пользователю эта программа окажется полезной. Ведь с её помощью можно быстро и просто откорректировать свои фотографии, нарезать картинки для группы в Вконтакте, эффективно обработать любое изображение. Программа платная, но в сети до сих пор можно найти «бесплатные» версии.
Для тех, кто не желает приобретать программу или искать и скачивать её из Интерента, для изменения размеров картинок, вторая часть статьи.
Итак, программа установлена и активирована. Запускаем Фотошоп и открываем изображение, у которого нужно изменить размер и/или вес. Делается это через меню «Файл» — «Открыть» («File» — «Open«):
После того, как изображение откроется в Фотошопе, приступим к изменению его размеров.
Изменение размера с искажением или пропорционально
Это самый простой вариант изменить натуральный размер картинки. Делается всё очень просто — через меню «Изображение» — «Размер изображения» («Images» — «Size images«). Другой вариант — нажать сочетание клавиш ALT+CTRL+I.
Появится сплывающее окошко, с помощью которого и происходит процесс изменения размера:
- указываем ширину
- высоту
- если необходимо, чтобы изображение не растянулось или сузилось — отмечаем галочкой пункт «Сохранять пропорции«
Нажимаем кнопку «Ок» и картинка автоматически примет указанные размеры.
Изменение размеров изображения визуально и с нужными пропорциями
Для выполнения этого, нужно также открыть нужную картинку в Фотошопе. Затем, нажать на специальный значок в левом углу — значок рамки и задать пропорции изменения размера:
Сверху, где указана ширина и высота — задаём нужные пропорции и выделяем нужную часть изображения. Рамка выделения автоматически будет принимать нужные нам пропорции обрезки. После выделения — щёлкаем в любом месте рабочей области программы Fotoshop и картинка обрезается.
Теперь, если изображение было большим или маленьким, не соответствуя нужным нам размерам, следует выполнить действия, описанные чуть выше. (с помощью меню «Изображение» — «Размер изображения«). Сохранение полученного рисунка выполняется через меню «Файл«.
Оптимизация изображений для сайта
Чтобы уменьшить вес картинки для использования её на своём сайте, в программе Fotoshop есть специальная функция уменьшения веса. Абсолютно любое изображение, которое весит в обычном виде большое количество килобайт, сжимается, при этом можно визуально контролировать получающееся при этом качество.
Итак, чтобы оптимизировать картинку, нужно её сначала открыть, затем изменить размеры (если требуется). Открываем меню «Файл«, щёлкаем на пункте «Сохранить для Web и устройств…» — это 17 строчка сверху в этом меню.
После этого откроется дополнительное окно, в котором будет наша картинка и блоки по-бокам с различными настройками:
- Выбор типа файла. Это важный момент — на сайт можно встроить и PNG и JPEG с GIF, только вес у таких файлов с одинаковым качеством будет разный. Если на картинке больше всего темных и белых цветов, или количество цветов минимально, то идеально подойдёт PNG-8. Особенно — когда на выходе сгодится и монохромный рисунок.
- Цвета — количество цветов на выходе. Для чёрно-белых или серых изображений подойдёт количество равное 8.
- Прозрачность — наличие прозрачности увеличивает вес, но иногда она просто необходима.
- Качество — с помощью этой регулировки и онлайн просмотра получающегося качества, уменьшается вес изображения в формате JPEG.
- Размерность — в этом же окне можно изменить размеры картинки.
Для сравнения рассмотрим процесс сохранения одной и той же картинки в разных форматах и определим итоговый вес каждого получившегося файла.
Допустим, есть изображение в формате JPG с исходным весом 250 Кбайт и размером 640 на 472 пикселей.
Попробуем уменьшить вес этой картинки. Для этого выполняем действия, описанные чуть выше. Получаем, что оптимальный вариант сохранения картинки в формате Jpeg — это следующие настройки в окне «Сохранить для Web и устройств«:
Практически без заметных глазу изменений, нам удалось уменьшить вес исходного изображения с 250 Кб до 14,96 Kбайт!
Теперь сохраним картинку в формате PNG. Настройки, которые максимально сильно сжали изображение, такие:
Качество изображение заметно хуже, чем при сжатии в формате Jpeg. Удалось получить вес только 85 Кб, что намного больше, чем при сохранении в JPEG.
Изменение размеров картинки онлайн
Чтобы изменить размеры картинок в режиме онлайн, нужно воспользоваться сервисом Pixlr.com — это замечательный онлайн-сервис, который представляет из себя урезанный по функциональности Фотошоп.
Как сразу изменить и размер, и вес изображения онлайн
Переходим на сайт http://pixlr.com/, среде трёх различных онлайн-редакторов, выбираем первый — «Pixlr Editor«:
Запускается онлайн-фотошоп и на экране появится всплывающее окно, где нужно выбрать или загрузить фотографию или картинку, которую нужно изменить:
Здесь есть такое же меню, как в стандартной программе Fotoshop. Для изменения размеров можно использовать такие же действия, как в самой программе.
Размер изображений регулируется при их сохранении:
Пользуйтесь!
