Какой формат для небольших изображений на сайте? GIF или PNG?
Когда вы делаете маленькие иконки, заголовки и т.п. для веб-сайтов, лучше ли использовать GIF или PNG?
Очевидно, что если требуются эффекты прозрачности, тогда PNG - это определенно правильный путь, и для больших, более фотографических изображений я бы использовал JPEG - но для обычной веб-"мебели", что бы вы порекомендовали и почему? Это могут быть просто инструменты, которые я использую, но файлы GIF обычно кажутся немного меньше, чем сопоставимые PNG, но их использование кажется 1987 годом.
17 ответов
Как правило, PNG никогда не бывает хуже, и часто лучше, чем GIF из-за превосходного сжатия. Могут быть некоторые крайние случаи, когда GIF немного лучше (потому что формат PNG может иметь немного большие издержки от метаданных), но это действительно не стоит беспокоиться.
Это могут быть только инструменты, которые я использую, но файлы GIF обычно кажутся немного меньше, чем сопоставимые файлы PNG.
Это может быть связано с тем, какой инструмент кодирования вы используете.
/ РЕДАКТИРОВАТЬ: Wow, кажется, есть много неправильных представлений о размере файла PNG. Процитирую Мэтта:
Нет ничего плохого в GIF-изображениях для изображений с небольшим количеством цветов, и, как вы заметили, они имеют тенденцию быть меньше.
Это типичная ошибка кодирования и не присуща формату. Вы можете контролировать глубину цвета и сделать файл PNG как маленький. Пожалуйста, обратитесь к соответствующему разделу в статье Википедии.
Кроме того, отсутствие поддержки в MSIE6 взорвано Chrono:
Если вам нужна прозрачность и вы можете использовать GIF-файлы, я бы порекомендовал их, потому что IE6 поддерживает их. IE6 не очень хорошо работает с прозрачными PNG.
Это неверно. MSIE6 поддерживает прозрачность PNG. Он не поддерживает альфа-канал (без нескольких хаков), но это другой вопрос, поскольку в GIF-файлах его вообще нет.
Единственная техническая причина использовать GIF вместо PNG - это когда нужна анимация, и вы не хотите полагаться на другие форматы.
В W3C упоминаются 3 преимущества PNG над GIF.
• Альфа-каналы (переменная прозрачность),
• Кроссплатформенная гамма-коррекция (контроль яркости изображения) и цветовая коррекция
• Двумерное переплетение (метод прогрессивного отображения).
Кроме того, посмотрите на эти ресурсы для руководства:
Вау, я действительно удивлен всеми неправильными ответами здесь. PNG-8 всегда будет меньше, чем GIF при правильной оптимизации. Просто запустите ваши файлы PNG-8 через PngCrush или любую другую подпрограмму оптимизации PNG.
Ключевые вещи для понимания:
- PNG8 и GIF без потерь <= 256 цветов
- PNG8 всегда может быть меньше, чем GIF
- GIF никогда не должен использоваться, если вам не нужна анимация
и, конечно же,
- Используйте JPG для черно-белых или полноцветных фотографических изображений
- Используйте PNG для низкого цвета, штриховых рисунков, скриншотов
The main reason to use PNG over GIF from a legal standpoint is covered here:
http://www.cloanto.com/users/mcb/19950127giflzw.html
Срок действия патентов, по-видимому, истек с 2004 года, но идея о том, что вы можете использовать PNG в качестве открытого источника поверх GIF, привлекает многих людей.
(ссылка на открытый исходный код png: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)
Будьте осторожны с изменением цвета при использовании PNG. Эта ссылка дает пример и содержит еще много ссылок с дополнительными пояснениями:
http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
GIF изображения не подвержены этой проблеме.
Я не думаю, что это имеет большое значение (клиенты не заботятся). Лично я бы выбрал PNG, потому что они являются стандартом W3C.
Будьте осторожны с эффектами прозрачности PNG: они не работают с IE6.
Для изображений в Интернете у каждого формата есть свои плюсы и минусы. Для фотографий типа фотографии (т. Е. Много-много цветов, без резких краев) используйте JPEG.
Для значков и т.п. у вас есть выбор между PNG и GIF. GIFs ограничены 256 цветами. PNG могут быть отформатированы как GIF (то есть 256 цветов, с 1-битной прозрачностью, которая будет работать в IE6), но для небольших изображений они немного больше, чем GIF. 24-битные PNG поддерживают как большую гамму, так и альфа-прозрачность (хотя это неприятно в IE6).
PNGS - ваш единственный действительно разумный выбор для таких вещей, как снимки экрана (т. Е. Как много цветов, так и резких краев), и лично это то, чем я придерживаюсь большую часть времени, если у меня нет чего-то, для чего JPEG больше подходит (например, фотография).).
Индексированный PNG (менее 256 цветов) на самом деле всегда меньше, чем GIF, поэтому я использую это большую часть времени.
О компьютерной графике (т.е. нарисованной вами в Photoshop, Gimp и т. Д.) JPG не может быть и речи, потому что она с потерями - то есть вы получаете случайные серые пиксели. Для статических изображений PNG лучше во всех отношениях: больше цветов, масштабируемая прозрачность (скажем, прозрачность 10%,.gif поддерживает только 0% и 100%), но существует проблема, заключающаяся в том, что некоторые версии Internet Explorer не поддерживают PNG прозрачность правильно, так что вы получите плоский непрозрачный фон, который выглядит некрасиво. Если вас не интересуют эти пользователи IE, перейдите на PNG.
Кстати, если вы хотите анимации, пойти на GIF.
PNG является 100% заменой файлов GIF и поддерживается всеми веб-браузерами, с которыми вы можете столкнуться.
Есть очень и очень мало ситуаций, когда GIF предпочтительнее. Наиболее важным из них является анимация - стандарт GIF89a поддерживает анимацию, и практически каждый браузер поддерживает его, но обычный старый формат PNG этого не делает - вам придется использовать MNG для этого, который имеет ограниченную поддержку браузера.
Практически все браузеры поддерживают однобитовую прозрачность в файлах PNG (тип прозрачности, предлагаемый форматом GIF). В IE6 отсутствует поддержка полной 8-битной прозрачности PNG, но это можно исправить в большинстве ситуаций с помощью небольшого количества магии CSS.
Если ваши файлы PNG выходят больше, чем эквивалентные файлы GIF, это почти наверняка, потому что ваше исходное изображение имеет более 256 цветов. GIF-файлы индексируются с максимальной палитрой из 256 цветов, тогда как PNG-файлы в большинстве графических программ по умолчанию сохраняются в 24-битном формате без потерь. Если размер файла важнее точных цветов, сохраните файл как 8-битный индексированный PNG, и он должен быть эквивалентен GIF или лучше.
Можно "взломать" файл GIF, чтобы иметь более 256 цветов, используя комбинацию кадров анимации с флагами "не заменить" и несколькими палитрами, но этот подход был практически забыт с момента появления PNG.
"Это могут быть только те инструменты, которые я использую, но файлы GIF обычно кажутся немного меньше, чем сопоставимые PNG, но их использование кажется просто 1987 годом".
Это, наверное, ваши инструменты. Из PNG FAQ:
"Это явление вызвано двумя основными причинами: сравнивать яблоки и апельсины (то есть не сравнивать одни и те же типы изображений) и использовать плохие инструменты". продолжение...
Но вы всегда можете попробовать сохранить как оба (используя одинаковую глубину цвета) и посмотреть, что получается меньше.
Конечно, если вы хотите стандартизировать один графический формат для вашего сайта, PNG, вероятно, будет лучшим для использования.
Основная проблема с GIF заключается в том, что это запатентованный формат (EDIT: это, очевидно, больше не соответствует действительности). Если вас это не волнует, не стесняйтесь использовать GIF-файлы. PNG имеют гораздо большую гибкость по сравнению с GIF, особенно в области цветового пространства, но эта гибкость часто означает, что вы захотите "оптимизировать" PNG перед их публикацией. Веб-поиск должен найти инструменты для вашей платформы для этого.
Конечно, если вам нужна анимация, GIF - единственный путь, так как MNG по какой-то причине был не начинающим.
GIF-файлы, как правило, будут немного меньше, поскольку они не поддерживают альфа-канал прозрачности (и, возможно, по некоторым другим причинам). Лично я не чувствую, что разница в размерах действительно стоит того, чтобы беспокоиться о ней почти так же, как раньше. Большинство людей сейчас используют Интернет с какой-то широкополосной связью, поэтому я сомневаюсь, что они заметят разницу.
Вероятно, более важно использовать тот тип изображений, с которым лучше всего работают ваши инструменты манипуляции.
Кроме того, мне нравится возможность наносить изображение на любой фон и работать с тенями, что больше указывает мне на формат png.
Лично я немного использую gif для своих изображений, так как они работают везде, очевидно, что ваше ограничение прозрачности является одним из ключевых элементов, который будет направлять кого-то к определенному формату.
Я не вижу никаких недостатков в использовании GIF-файлов.
Я обычно использую GIF из-за размера, но есть также PNG-8, который также 256 цветов.
Если вам нужны модные полупрозрачные вещи, используйте png-24.
Я обычно использую в фотошопе функцию "сохранить в Интернете", которая позволяет вам выбирать тип файла, количество цветов и т. Д. И видеть результат перед сохранением. Конечно, я бы использовал наименьшее возможное, которое все еще выглядит хорошо в моих глазах.
Если они становятся меньше, и вам нечего использовать функции, предлагаемые PNG (прозрачность альфа-канала и более 256 цветов), то я не вижу причин, по которым вам следует использовать PNG.
Я использую JPG для всех непрозрачных изображений. Вы можете контролировать компрессию, которая мне нравится. Я нашел этот веб-сайт, который сравнивает два. JPG меньше и выглядит лучше.