Война форматов — JPEG vs. GIF

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

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

Да, не спорю, но gif полезен только для максимум 256 цветов. А второй человек, воспользовавшийся его советом на своем блоге seopmr.ru использует gif для больших полноцветных картинок, которые в gif с этими gif-овскими точечками смотрятся ужасно. Например в Jpeg с качеством 70-80% потеря качества была бы незаметна, без точечек да и по размеру не больше бы было.

Почему важен размер картинок на сайте

Когда я только начинал учиться делать сайты, в далеком хз каком году (Ближе к началу двухтысячных) еще не у большинства был скоростной интернет. У большинства простых смертных был dial-up (коммутируемый доступ в интернет). Если вы его не застигли — не расстраивайтесь. Скорость была порядка 56 кбит (на самом деле всегда меньше). Песни качались часами, а фильмы неделями. Можете почитать статью на Лурке, чтобы быть вкурсе.

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

Согласитесь, открывая страничку с 20-50 фотками на каком нибудь развлекательном ресурсе. Страничка грузится дольше, чем сразу. У меня самого 1 мбит, некоторые меня поймут. Особенно если включен торрент и вы что-то качаете.

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

Как делать картинки меньшего размера

Чтобы картинки меньше «весили» можно оперировать двумя параметрами картинки: «Размером картинки в пикселях» и «качеством картинки«. Понятно, что в интернете на сайте при беглом просмотре не нужна оригинальная фотография с фотоаппарата в несколько мегапикселей. Достаточно ее уменьшенной копии. Уже при подробном просмотре картинки можно сделать больше. Но даже на сайтах фотографий есть уменьшенные копии для предпросмотра.

Форматов для картинок огромное множество, но предпочтительным быдет использовать картинки не больше 640 пикселей. Помните, не у всех 23″ мониторы, есть и 19″ (у меня например), и остались еще 17″ и может даже 15″. Даже сам Microsoft выделяет стандартные для веб-документов размеры.

640×480 — Веб-документ крупный

448×336 — Веб-документ мелкий

Понятное дело, не нужно все изображения подгонять ровно под это количество пикселей. Я, например, стараюсь на сайте использовать картинки мелкие до 300 пикселей большей стороны, а большие до 550 в ширину.

Качество картинки можно ухудшать. Gif имеет 256 цветов, соответственно можно задать ему меньшее количество цветов и картинка будет менее разноцветной, но по размерам меньше. Jpeg можно ухудшать качество самого изображения в процентах. Поставив качество 70-80% (в зависимости от картинки) вы практически не заметите изменений в изображении, а только в ее размере.

Приведу простые примеры наглядные примеры:

Первая картинка 256 цветов — 5кб (Оригинал)
Вторая картинка 32 цвета — 3,5кб (изменения качества не заметны)
Третья картинка 4 цвета — 1,3кб (изменения заметны, но информативности )
Четвертая картинка 80% jpeg — 5кб
Пятая картинка 60% jpeg — 4кб

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

Первая картинка оригинал Jpeg 98% качества — 133кб
Вторая картинка Jpeg 80% качества — 53кб (изменения не сильно заметны)
Третья картинка gif 256 цветов — 122 кб (при потере в «страшное небо» и «страшная нога» размер почти не поменялся)
Четвертая картинка gif  32 цвета — 62кб (качество ужасное, но размер приблизился к JPEG80%)

Jpeg отлично подходит для фотографий и сложного изображения. Gif нервно курит.

Вывод

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

Формат Jpeg подходит для отображений фотографий и других сложных объектов

Выбирать конечно вам, но я привык к JPEG и вас к этому агитирую 🙂 Вместе с этим не стоит забывать, что GIF умеет работать с прозрачностью, а Jpeg нет, а также с динамическими изображениями. А вообще я люблю красивые картинки а GIF их уродует ->

Какие программы использовать для изменения качества изображений

Программ для редактирования изображений стотыщмиллионов штук. Каждый выберет себе более подходящую.

Например для изменения размера можно использовать стандартную Microsoft Office Picture Manager, которая идет в пакете Microsoft Office. Можно тот самый пресловутый и популярный фотошоп. В Photoshop можно менять не только размер картинки, но и качество. Я чаще всего пользуюсь бесплатным FastStone Image Viewer. Программа бесплатная, легкая и обладает широкими возможностями, хоть и предназначена для просмотра изображений, а не редактирования.