Оптимизируем картинки на наш блог. Выбираем формат

«Почему 2 картинки одинаковые по размеру и расширению имеют настолько разный вес файла?» — еще один часто задаваемый вопрос. Давайте сравним!
Левая картинка изначально имела размер примерно в 8кб, а правая 45кб. Да, разница ощутимая. Но стоит заметить и разницу в цвете – левая картинка использует всего несколько цветов (основной белый, фон), а на правой довольно широкий диапазон, т.е. от количества цветовых переходов зависит и информация самого файла в двоичной системе, ведь каждый пиксель нам что-то говорит.
Прошу прощения за столь банальную тему, но я пишу в надежде, что наши сео-оптимизаторы-блогеры не почтут за лишним прочитать и сделать свое детище аккуратным и быстрым, ведь часто бывает, что мы просто хватаем картинку или рисуем где-либо и сразу вставляем в блог, а если размер нас не устроил, то используем встроенный обработчик изображений, который кстати не ужимает, а просто уменьшает размер картинки, ну ведь глупо же.
Поговорим о вставке картинок в наши блоги (сайты), при этом максимум оптимизируем их, т.е. ужмем по размеру самого файла, сохранив качество. Ведь всех нас напрягает долгая загрузка картинок на сайте. Попробуем сохранить время, трафик и нервы (время загрузки) нашего читателя.


Вот 3 основных формата графических файлов для web, какой из них использовать?
1) GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. Количество цветов от 2 до 256 (для любимой фотографии кота не подойдет). Файл в формате GIF может содержать прозрачные участки. Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации. Применяют для текстов, логотипов, иллюстраций с четкими краями, анимированных рисунки, изображений с прозрачными участками, баннеры.
2) JPEG ((Joint Photographic Experts Group) — популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Не поддерживает прозрачность. Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения (любимая собака останется той же собакой). Основная характеристика формата — качество, позволяющее управлять конечным размером файла. Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения (вспоминаем Opera Turbo). Используется преимущественно для фотографий.
3) Неплохой формат в определенный случаях PNG (Portable Network Graphics) – альтернатива формату GIF, но глубина цвета может быть любой, вплоть до 48 бит, поддерживает также полупрозрачные пикселы за счет Альфа-канала с 256 градациями серого. Хорош для для шапки (логотипа) с сохранением прозрачности с тенью и количеством цветов высокого качества, за что страдает правда размер файла. Старые версии браузеров не поддерживают прозрачность формата.
и
4) Забудьте про формат *.bmp для web! Это один из первых графических форматов. BMP хранит данные с глубиной цвета до 48 бит и максимальным размером 65535×65535 пикселей. На данный момент формат BMP практически не используется ни в интернете (JPG весит в разы меньше), ни в полиграфии.
Работаю с одним блогером-самоучкой без каких-либо знаний в графике, постоянно юзает MSPaint, который по умолчанию сохраняет картинки в *.bmp с размером в среднем 2,5 мб (не много ли для тумба?). И для самых ленивых существует вот такой сервис, который позволяет оптимизировать-конвертировать из одного формата в другой.
Кстати, в некоторых ЦМС уже заложена функция ужима качества изображения, либо же доставляем нужный плагин. Для среднего качества обычно ставят 75%-80%.
Формат выбрали. В следующем посте напишу коротко о всего нескольких действиях в фотошопе для обрезки и сохранения качества изображения.