Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Оптимизация JPEG для сайтов Категория: Веб-дизайн
Название: Оптимизация JPEG для сайтов
Дата добавления: 22-05-2013
Раз просмотрено: 2101
Комментарии: 1
Рейтинг: * * * * * * * * * * (2 голоса)

Оптимизация JPEG для сайтов

Сжатие изображения можно встретить в каждом формате изображений. Однако, разница между GIF, PNG и JPEG заключается в том, как информация сжимается и отображается на экране. Есть очень много советов для создания отличных и малых по размеру изображений для интернета, однако многие дизайнеры до сих пор не понимают некоторых основных принципов.

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

Всегда избегайте сохранения в 100% качестве

Вы почти никогда не должны сохранять JPEG изображения при 100% качестве. Это не даст вам самое лучшее, оптимизированное изображение. Даже по сравнению с 90% или 95% качества вы увидите значительное снижение размера файла без внешних изменений.

В большинстве случаев рекомендуется сохранять изображения в значительно более низком качестве, чем 90%. Если откроете далоговое окно «Сохранить для Web» («Save for Web») в Photoshop и перейдете в формат JPEG, вы заметите, что в нем предлагают несколько заданных значений качества. Вот список этих вариантов, обратите внимание на присущие им названия и значения:

Видите, что даже в Adobe Photoshop 60% качества изображения считается высоким. Многие веб-разработчики предлагают держаться в диапазоне 50% –70% качества.

Когда «Низко» — это слишком низко?

Некоторые дизайнеры утверждают, что ниже 30% вы уже сильно и заметно снизите качество изображения. Другие дизайнеры считают 50% пределом уменьшения качества изображения. Однако лучшим решением будет попробовать разные настройки и посмотреть, что лучше всего смотрится, при приемлемом размере файла.

Параметры сжатия

Прежде всего, следует уточнить термины «сжатие» и «качество», которые являются обратными по значению друг к другу. Это означает, если вы сохраните JPEG изображение при 40% сжатия вы получите 60% качества (по сравнению с максимум 100% качества без сжатия).

Это основной параметр для использования, и его должно быть достаточно при сохранении для веба. Обычные пользователи не переходят в более глубокие настройки. Но вы можете продолжить настройку в более сложных вопросах, когда вы преобразуете RGB изображения в YCbCr. Яркость изображения всегда сохраняется на максимальном возможном значении при сжатии JPEG. Со значением яркости на отдельном канале легче оптимизировать отдельные значения красных и синих цветов. Это также известно как подвыборка цветности. Интересно отметить, что Adobe Photoshop не всегда использует подвыборку для сжатия. Любые изображения, которые сохраняются командой «Сохранить для Web» будут использовать только подвыборку цветности ниже 50% значения качества.

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

Дополнительные инструменты для сжатия JPEG

Yahoo! Smush.it

Интересным и полезным инструментом для сжатия JPEG изображений является Yahoo! Smush.it. Это веб-приложение, куда вы можете загрузить ваши изображения и Smush.it удалит все ненужные дополнительные байты для оптимизации размера файла. Этот процесс сжатия совершенно не уменьшает качество вашего изображения. Кроме того, к плюсам этого сервиса является то, что вы можете загружать файлы на него напрямую, введя их URL.

Yahoo! Smush.it

IrfanView

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

RIOT

Есть еще одна очень неплохая программа RIOT, которая также существует в виде плагина к бесплатному редактору изображений GIMP. В этой программе используется двухоконный интерфейс, который позволяет вам наглядно сравнить исходное изображение и результат его оптимизации и сжатия.

Возможности программы RIOT поразительны, а процесс ее использования удобен и прост. Наряду с сжатием JPEG изображений, вы также можете удалить дополнительные метаданные, таких как EXIF ​​и Adobe XMP. Эти кусочки данных увеличивают размер JPEG изображения, а используются редко.

RIOT

Заключение

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

Сжатие JPEG изображений при сохранении в программе Adobe Photoshop само по себе дает неплохие результаты, а подкрепленное оптимизацией JPEG изображения в какой-нибудь дополнительной программе как RIOT или Smush.it даст самые неплохие и эффективные результаты.

Это интересно: «Золотое сечение в веб-дизайне».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Rudolf  •  2014-01-07 14:28:16
Отличная статья! Спасибо!