Как уникализировать картинки и изображения на сайте?

Уникализация изображений для сайта

Во времена развития Интернета изображения (так называемый графический контент) считался самым проблемным: картинка могла неадекватно отображаться в разных браузерах и на разных платформах, имела большой информационный вес и часто тормозила загрузку страницы. В те времена и возникла потребность в оптимизации графики, которая чаще всего проявлялась в банальном уменьшении размера изображения в байтах.

Теперь же, в связи с просто запредельными (в сравнении с Интернетом десяти-двадцатилетней давности) скоростями соединения необходимость в этом, казалось бы, отпала. Практически любой сайт, с любой графической насыщенностью отображается в мгновении глаза. Однако это на первый взгляд. Дело в том, что и сам информационный вес изображений значительно возрос. Если, скажем, десять лет назад средняя цифровая фотография «весила» полтора мегабайта, то сегодня и десять – далеко не предел. Поэтому можно смело утверждать, что оптимизация графики по-прежнему актуальна не только для профессиональных веб-мастеров, но и для любителей.

Как уникализировать картинки

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

Перевод в другой формат

В эпоху зарождения Интернета все картинки записывались в GIF-формате («гифки»). И это не случайно: данный формат имеет наименьший информационный вес. Существенным же недостатком его является малое количество передаваемых цветов, так что ни о каком полноцветном фото речи быть не могло. GIF используется и сейчас, но уже очень редко, в основном для рекламных баннеров, хотя и они в последнее время перешли во flash.

Сам перевод осуществляется очень просто. Практически в любом графическом редакторе имеется функция «Сохранить как…» При ее использовании на выбор предоставляется ряд доступных форматов и прочих настроек (все зависит от выбора редактора). Предпочтение в настоящее время отдается формату jpg, который уменьшает объем изображения при незначительных потерях в детализации и цвете.

Уменьшение размера

Само собой, что изображение размером 1050х840 пикселей будет весить больше, чем та же картинка размером 640х480. К тому же, уменьшение физического размера бывает необходимо для того, чтобы «втиснуть» изображение на страничку без потери форматирования. Многие графические редакторы позволяют сделать это. Например, популярный Фотошоп осуществляет данную операцию всего за пару кликов. Нужно на строке заголовка окна, в котором открыто изображение, щелкнуть правой кнопкой мыши, выбрать пункт «Размер изображения» и в открывшемся диалоговом окне установить нужный размер. Если в том же окне оставить флажок «Сохранять пропорции» включенным, при изменении, скажем, ширины картинки, ее длина установится автоматически.

Можно изменить размер непосредственно из html-кода страницы, используя параметры тега <img>, где параметр width отвечает за ширину, а height – за высоту. Однако следует помнить, что при этом изменяется лишь размер, но не вес картинки! Исходное изображение все равно будет загружаться из другого хранилища. В прежние времена даже существовало понятие «пиксель смерти», когда изображение размером в гигабайт ужималось до размеров 1х1. Таким образом машина пользователя могла «повиснуть» намертво без видимых причин.

Специализированные средства

Во главе всего, конечно же, стоит Фотошоп. Дело в том, что в нем имеется специальная функция оптимизации для веба. Нужно лишь в основном меню выбрать «Файл – Сохранить для Веб». Откроется довольно сложное и информативное окно, в котором можно «перегнать» изображение как в другой формат, так и выбрать из четырех предлагаемых вариантов наиболее подходящий для оптимизации внутри одного формата. При этом пользователь в реальном времени может оценить качество конечного изображения.

Кроме Фотошопа, существуют и специализированные приложения, позволяющие качественно оптимизировать изображения с самыми разными тонкими настройками. Самостоятельно разобраться в них не составляет труда: интуитивный интерфейс в помощь. Вот примеры некоторых из них: RiotPngoutSuperGIFSuperPNG (плагин для Фотошопа), OptiPNGImageOptim,Color quantizerCaesium, а также онлайн-оптимизаторы: PunyPNGTinyPNGSmush.itShrink PicturesJPEG miniImage OptimizerWeb resizer, Image Optimizer, Kraken.

Данный список можно продолжать и продолжать.


Метки:

Если Вам понравилась заметка, пожалуйста, прокомментируйте ее, подпишитесь на фид и получайте будущие публикации по RSS, либо поделитесь с друзьями в социальных сетях:

Комментарии

Пока нет комментариев.

Прокомментировать

(обязательно)

(обязательно)