Как сохранить изображения для веб-страниц?(Формат / размер)

Question

Как лучше всего хранить изображения для сайтов?Какой размер я не должен превышать?

Теперь я сохраняю все интерфейсные файлы в png (в основном в спрайтах) и обычные изображения в jpg.Некоторые изображения около 100-150Кб.

Какое качество и степень сжатия выбрать при сохранении изображений?

Answer 1

Подготовка изображений

Чтобы подготовить изображения для представления в Интернете, выполните следующие действия:

• Начните новый файл.Если это фотография или оригинал, используйте разрешение 300 dpi.Если вы создаете что-то простое, установите разрешение 72 dpi.
• Используйте инструменты для рисования, текста, фигур и других инструментов, предоставленные в графической программе, для создания изображения.
• Сохраните файл вродной формат файла (тип файла, предназначенный для редактирования, характерный для программы редактирования изображений) используемой вами программы.Например, документ Photoshop создает файлы с расширением «.psd».Если вам нужно внести изменения или отредактировать позже, сделайте это в этом файле, а не в Интернете.
• При необходимости уменьшите разрешение изображения до 72 dpi.
• При необходимости,измените размер изображения до желаемой спецификации высоты и ширины в пикселях.
• Сохраните файл в готовом для Интернета формате, обычно в формате GIF (большинство программ предоставляют несколько вариантов для типов файлов), находя баланс междукак выглядит файл и соответствующий размер файла.Некоторые графические программы позволяют вам предварительно просмотреть окончательный вывод файла, тогда как в других вы должны сохранить его и загрузить в браузер, чтобы увидеть конечный эффект.

---

Подготовка фотографий

Чтобы подготовить фотографии для представления в Интернете, выполните следующие действия:

• Загрузитефотография с вашей цифровой камеры или сканирование на фотографии.Процесс для этого зависит от программного обеспечения, прилагаемого к вашему сканеру или камере.Изображение, вероятно, окажется в папке «Ваши фотографии» в Windows или в папке «Фотографии» на Mac, если вы не выбрали другую папку в качестве места назначения по умолчанию.
• Используйте цветокоррекцию, рисунок, текст,форма и другие инструменты, предоставляемые в графической программе для изменения и улучшения вашего изображения.
• Сохраните копию вашего файла в собственном формате файла программы, которую вы используете.Вносите более поздние изменения или правки в этот файл, а не в Интернет.С фотографиями сохраните нетронутую версию фотографии на случай, если вы захотите использовать ее снова для других целей.
• При необходимости уменьшите разрешение изображения до 72 точек на дюйм.
• При необходимости измените размернеобходимое для изображения значение высоты и ширины в пикселях.
• Сохраните файл в готовом веб-формате, обычно в формате JPEG, чтобы найти баланс между внешним видом и подходящим размером файла.

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

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

( Источник )

Answer 2

Для ваших изображений вот совет:

Не масштабируйте изображения в HTML

Дизайнеры веб-страниц иногда задают размеры изображения с помощью атрибутов HTML ширины и высотыэлемент изображения.Избегайте этого, так как это может привести к тому, что изображения будут больше, чем нужно.Например, если вашей странице требуется изображение myimg.jpg, которое имеет размеры 240x720, но отображает его с размерами 120x360 с использованием атрибутов ширины и высоты, браузер загрузит изображение, которое больше необходимого.

( Источник , см. Другой Совет )

Answer 3

Это зависит от того, какое у вас изображение и какое качество должно быть, выбираете ли вы качество вместо загрузки страницы и т. Д.

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

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

Answer 4

Я обычно использую режим сохранения для веб, который существует в фотошопе. очевидно, меньший размер лучше. Размеры, о которых вы говорите (100-150), хороши или нет по отношению к размеру изображения. В любом случае, я советую вам использовать спрайты и, если возможно, в формате JPEG.

что-то вроде качества 75-80% хорошо для хорошего качества изображения

И обратите внимание на режим cmyk, который вызывает проблемы в некоторых браузерах

Answer 5

Все зависит от того, для чего изображение.Если вы, как правило, придерживаетесь веб-безопасной палитры, GIF-файлы будут меньше и чище, чем JPEG.JPEG для фотографий.Чтобы jpegs хорошо обрабатывал веб-безопасные цвета, вам нужно сэкономить на 88% + качество, что увеличивает размер файла.Как правило, Png имеют лучшее качество, и в некоторых случаях (когда вам не нужна прозрачность) могут быть меньше, чем jpgs, и сопоставимы с gif.Таким образом, для фотографий в формате JPEG качество 80 (иногда даже 75 для небольших изображений) даст вам приличные результаты и небольшой размер файла.Используйте изображения GIF / PNG для изображений сайта в целом.Что касается изображений на странице, я стараюсь не превышать 30 КБ, предполагая, что страница не ориентирована на фотографии / изображения.Надеюсь это поможет.