2009-11-08 1 views
58

Я уже давно являюсь веб-разработчиком, и я привык преобразовывать все свои проекты в формат файла png, чтобы создавать свои веб-страницы. Несмотря на то, что png, в отличие от jpg, позволяет прозрачность изображений, это лучшее решение?webdesign - jpg или png, который является лучшим для веб-сайта

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

Как вы думаете, а лучше всего использовать?

+12

Ваш английский отлично. Не нужно извиняться. – Andrew

ответ

86

Это зависит.

PNG лучше четкие изображения с небольшим количеством цветов,

JPG лучше для изображения с низкой пропускной способностью - однако это не так хрустящие и поэтому не очень хорошо для GUI.

Как правило, JPG предназначен для фотографий и изображений, тогда как PNG (или GIF) предназначен для компоновки.

Вы можете найти this page интересный, поскольку он охватывает основы PNG и GIF.

+3

Это отвечает на вопрос лучше. Я не знаю почему, но я понял это лучше, чем выбранный ответ. –

+2

Это отвечает на вопрос лучше, Ссылка на ответ была действительно полезна. –

5

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

Это мое эмпирическое правило.

23

Учитывая постоянно растущую скорость среднего сетевого соединения, я не склонен думать, что время загрузки страницы больше беспокоит вас [утки!]; На самом деле гораздо более полезно подумать о том, чего вы пытаетесь достичь, используя ресурсы, которые у вас есть в конце: например, ограниченная пропускная способность? Тогда стремление к более тяжелой компрессии не вызывает затруднений. Разве графический контент сайта будет расширяться, гарантируя, что стоимость пространства на сервере будет увеличиваться с течением времени? Тогда стремление к более тяжелой компрессии задержит эту стоимость. Это арт-портфолио? Тогда - ага! - Артефакты сжатия в работе с пробником могут быть действительно желательными! Вы пытаетесь выпороть игру? Тогда скриншоты, вероятно, должны быть ультра-четкими.

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

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

+2

, если вы нацеливаете свой сайт на людей, у которых обычно есть плохие интернет-соединения, вы должны беспокоиться о загрузке страницы. Но вы правы, когда говорите, что цвета в файлах png не отображаются всегда, как должны, что является проблемой. – yoda

+1

Если на вашем сайте изображение тяжелое, то, по большому счету, вы не нацеливаете его на тех, у кого действительно плохие интернет-соединения. На самом деле то, что вы делаете, когда вы разрабатываете широкополосную скорость доставки, ободряет спрос на гораздо более предпочтительный базовый стандарт, чем 56k dial-up - и это хорошо. – Sledge

2

Я стартер и в основном то, что я делаю, если изображение слишком велико, я делаю небольшой, если это не фоновое изображение. И если это для макета, я выбираю PNG и JPG для фотографий.

8

«Учитывая постоянно растет скорость среднего сетевого соединения я не склонен думать, что время загрузки страницы является большим проблемой больше»

По оптимизации сайта SEO, Google ранжировать ваш сайт хуже, если время загрузки страницы превышает 2 секунды, поэтому необходимо сжатие, особенно на новых веб-сайтах, сильно нагруженных графикой.

26

Компания Google написала об этом очень хорошо. Из Selecting the right image format, вы можете найти блок-схему, чтобы принять решение:

Selecting the right image format

+0

ИМХО это, безусловно, лучший ответ. Не пропустите статью «Оптимизация изображения», связанную с ответом. – MarcM

 Смежные вопросы

  • Нет связанных вопросов^_^