мобильный веб-сайт, какой тип изображения лучше - PullRequest
Новая
       24

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

0 голосов
/ 04 сентября 2010

Лот пользователя, открывающего мой сайт в мобильном телефоне,

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

JPG, GIF, PNG,

Какой из них лучше?

Ответы [ 3 ]

2 голосов
/ 04 сентября 2010

Не существует единого «лучшего» типа изображения.Изображение, которое загружается быстрее всего, является самым маленьким.Но быстрая загрузка не приносит пользы, если ваше изображение искажено и не может быть идентифицировано.

Выберите формат изображения в зависимости от типа изображения, которое вы пытаетесь визуализировать:

  • JPEG - это руки внизлучше всего подходит для фотографий в 99% случаев, когда вы учитываете воспринимаемое качество изображения относительно размера файла;но алгоритм сжатия с потерями в JPEG основан на наличии шума (много мягких / тонких цветовых переходов) и отсутствии четких линий / краев в исходном изображении для достижения наилучшего эффекта. Никогда не используйте JPEG для растеризованного текста!
  • PNG - лучший вариант для растеризованных изображений, состоящих из острых краев и блоков гладких / сплошных цветов.По сути, в любое время, когда вам нужны чистые / без потерь изображения (логотипы, значки, элементы пользовательского интерфейса, текст и т. Д. - все, кроме фотографий / картин в основном), вы должны использовать PNG.Это также единственный реальный вариант, когда вам нужен альфа-канал / частичная прозрачность.
  • GIF - единственный универсально поддерживаемый формат анимированных изображений, но помимо этого я бы просто использовал PNG в большинстве случаев.
  • SVG для векторных изображений, но я не уверен, сколько мобильных браузеров его поддерживают.
2 голосов
/ 04 сентября 2010

По возможности используйте PNG8 и ограничьте цветовую палитру.Старайтесь использовать только столько цветов, сколько строго необходимо, не больше.

Существуют инструменты настройки PNG, которые позволяют избавиться от ненужных фрагментов этого PNG.Для получения дополнительной информации о фрагментах PNG здесь есть спецификация фрагментов PNG.

http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html

Инструмент настройки, о котором я говорил, можно найти здесь.Насколько я тестировал, он работает на Linux с использованием Wine.

http://entropymine.com/jason/tweakpng/

Кроме того, TinySVG - довольно интересный формат.Графика SVG позволяет изменять масштаб без потерь, и, поскольку это файл XML, вы можете изменить его программным способом.

РЕДАКТИРОВАТЬ: одна заметка на графике JPEG.Если размер файла превышает 10 КБ, сохраните его в прогрессивном режиме, если он меньше 10 КБ, сохраните его базовый уровень.Это небольшая оптимизация для JPEG.

1 голос
/ 04 сентября 2010

Из краткого прочтения кажется, что jpeg будет лучшим вариантом.Однако это зависит от конкретных потребностей, которые могут возникнуть у вас для некоторых изображений (т. Е. Jpeg не выполняет прозрачный фон и т. Д.)

Кроме того, особенно для мобильного сайта, если изображения часто используются как частиХорошая практика - это макет веб-сайта (т. е. кнопки и т. д.) с последующим использованием CSS-спрайтов , поскольку оно уменьшает количество элементов, загружаемых пользователю (конечно, за счет компромисса с изображениямискачано больше).

...