Война форматов — 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. Программа бесплатная, легкая и обладает широкими возможностями, хоть и предназначена для просмотра изображений, а не редактирования.
Тут дело вкуса и пристрастия. Но я сильно не заморачиваюсь. Jpeg рулит и этим все сказано. Но на вкус и цвет сторонников нет.
Наглядно и понятно доказано преимущество формата JPEG. Между прочим меня тоже раздражает обилие картинок на сайте, который хочешь открыть и долго ждешь загрузки, т.к. скорость не очень, особенно в конце месяца.
Очень интерестнная статья,очень популярная и преспективная в наше время,спасибо узнал очень многое
Автор, сам комментарий писал? 🙂
Формат-формату рознь =)
Все фотки в Джег! Гиф устарел давно
Что не говори а jpeg рулит будет рулить, слишком он уж занял хорошее место.
А почему не рассматриваться такой формат как png?
А Вы спросите кто знает такой формат и вопросов больше не возникнет 🙂
А зря… очень хороший формат, с качественным сжатием + еще и с чересстрочная развертка.
Кстати как справка: формат png был создан как раз для замены gif
Я не спорю но пока он не достиг тех высот что jpeg
тестирование и сравнение я не делал… но на своем блоге использую именно его — как то он больше нравиться
png отличный формат и используется повсеместно
blogrub, ты не прав, он очень знаменитый и много кто знает и использует. Сейчас, наверно, уже и не найти сайтов с исходниками в gif, сплошь и рядом png.
Насчет использования в сайтах, бесспорно отличный вариант и уже современные браузеры его хорошо понимают (IE как-то еще пару лет назад не понимал, что он прозрачный и делал фон серым) Единственное, что там нельзя сделать 80% от качества как в jpeg, а либо отличное никакое.. и размер не подрегулируетшь для блога. Если картинка сложная и супер красочная, то в png она будет занимать довольно-таки нормально места
Можно устроить голосование и jpeg уйдет в отрыв 🙂
у png есть одно преимущество — он поддерживает прозрачный фон, тем самым его легко использовать при создании шаблонов сайта.
Так что смотря какой вопрос поставить на голосование.
Я ведь не спорю, я про то что кто более популярен и известен. Вопрос поставить на голосование такой какой формат изображений Вы больше встречали jpeg или png?
Ну тут однозначный ответ: jpeg более распространен. Но не всегда можно приравнять «известнее=лучше»
А я ведь об этом и не спорю и так понятно смысл других форматов 🙂
Я использую формат .png, на мой взгляд не хуже jpeg-а.
Отличная развернутая статья.