В 2D HTML5-игре, какой формат изображения лучше всего использовать и почему? Должен ли я использовать разные форматы в разных ситуациях? Например, .png для фонового изображения, .jpeg для кадров анимации и так далее ...
Часть «почему» важна для меня. Он не должен быть локализован на HTML5, это может быть и общий совет.
Формат изображения - это только способ сохранения необработанных данных пикселей, поэтому, пока вы используете растровые изображения, формат обычно не имеет значения в выполнении после этапа загрузки. Важны пиксельные данные, передаваемые в графический API. В Интернете обычно используются три формата:
.gif Формат GIF (теперь обычно не рекомендуется) используется для изображений с 256 цветами или менее, что приводит к очень маленькому размеру. GIF также часто используется для анимации. При использовании только 256 или менее цветов это формат без потерь, что означает, что при сжатии качество не теряется. В противном случае цветовая гамма должна быть уменьшена до 256, что приведет к снижению качества.
.png Формат Portable Network Graphics, как мне кажется, является наиболее используемым форматом изображений вообще, поскольку он имеет хорошую степень сжатия и позволяет сохранять больше цветов, чем GIF. PNG также способен к прозрачности (или обычно называется прозрачностью, что является неправильным названием, поскольку пиксель должен быть на 100% прозрачным, чтобы называться прозрачным). Это также формат без потерь, направленный на улучшение и замену GIF в 2006 году ( источник , первый абзац). Я лично использую это как тип изображения на сайтах и в играх.
.jpeg Формат JPEG обычно используется для фотографий и тому подобного. Он не способен к прозрачности и не гарантирует сжатие без потерь. Обычно при сжатии указывается качество, что приводит к компромиссу между пространством и качеством.
Давайте рассмотрим некоторые варианты использования:
Имейте в виду, что потребление памяти и производительность графического API обычно одинаковы между этими форматами. Важен размер и скорость загрузки (вы можете погрузиться в алгоритмы этих форматов, если хотите оценить стоимость загрузки). Потребление памяти любым изображением в необработанном состоянии обычно определяется width*height*4байтом общего правила для формата пикселей RGBA, который является наиболее распространенным.
Еще пара вещей, которые можно добавить к ответу @ Marco:
.gif сильно устарел. Я бы полностью избегал использования файлов .gif в максимально возможной степени. Я думаю, что люди используют их в наши дни только из-за анимации в браузере, и анимированные PNG не очень хорошо поддерживаются в настоящее время.
Так что все, что у вас есть, это JPG и PNG.
PNG: без потерь . Единственное, что вы рассматриваете здесь, это скорость сжатия, которую вы получаете. Обычно хорошо сжимает блоки сплошного цвета , но плохо сжимает сцены с большим количеством вариаций.
JPG: выполняет ужасную работу с однотонными блоками (оба теряют детализацию и занимают больше места, чем png), но отлично работают с изображениями с большим количеством вариаций (хорошее сжатие, почти незаметная потеря качества изображения).
Например
4Kb Megaman, в формате PNG:
Это же изображение 36Kb в JPG
И потеря детализации (это БЕСПЛАТНО! Со сжатием JPG)
Так что здесь, со сплошными блоками цветного изображения, мы теряем детали и получаем дополнительный размер, используя JPG . Вывод: не используйте jPG для изображений с большими блоками сплошного цвета.
Теперь подумайте о сцене высокого цвета:
1,63 МБ PNG:
277 к JPG:
приблизительные потери (я использовал JPG, чтобы загрузить это! но он показывает вам потери
Итак, в сумме
источник
Давайте дополнительно абстрагируем вопрос, а затем:
В игре, работающей на назначенной платформе, каковы соображения относительно средств массовой информации, которые она использует?
Замечание № 1: размер, он же скорость загрузки
Независимо от платформы, от игры и от типа носителя, факт заключается в том, что он должен быть представлен в контексте для рендеринга. На веб-платформе это означает загрузку. В среде рабочего стола или консоли это означает загрузку с локального носителя. Загрузка ваших медиа требует времени. Веб-платформы могут быть особенно повреждены, если по медленному соединению нужно загружать много медиа.
Вопрос № 2: потребление памяти
Связанный, но не такой же, как размер. Куски мультимедиа могут быть сжаты в то время как на диске или в пакете или чем-то еще, но как только это загружено как буфер текстуры или звука для чего-то, это может быть немного больше. Устройство, на котором выполняется ваша игра, не имеет бесконечного количества памяти.
Соображение № 3: качество и стиль
Являются ли СМИ достаточно качественными? Это может иметь решающее значение для вашей игры, и часто противоречит размеру. Очень часто требуется баланс между двумя. Некоторые игры имеют невероятно простую графику (майнкрафт) и все же очень успешны. У других действительно потрясающая графика, которая поглощает большие объемы памяти, но дает захватывающее качество с потрясающим фоном. Некоторые игры обходятся без бликов и пятен для звуковых эффектов, в то время как другие должны иметь стереофоническую музыку 41k.
Итак, исходя из того, что является наиболее важным, вы принимаете правильное решение для своей игры. Решение принимается за игру, а не для всех.
источник
Как правило, вы выбираете самый маленький размер файла, который по-прежнему обеспечивает приемлемое качество изображения. Кроме того, png поддерживает альфа, поэтому вам не нужно иметь дело с дополнительными изображениями для обработки альфа-слоя.
Что / когда использовать png для ( вообще говоря ):
PNG без потерь, но глубина цвета может быть изменена.
Используйте jpg для остальных случаев - фотографические изображения, картины, картинки с множеством мелких деталей, цветов и градиентов. Если вы попытаетесь использовать PNG для хранения этих изображений, вы заметите, что размер файла намного больше, чем в JPG.
Такие инструменты, как готовое изображение Adobe, дадут вам предварительный просмотр вашего изображения вместе с размером файла в различных форматах и настройках качества.
источник