Как изменить размер изображения для веб-дисплея?

Question

Я создаю несколько сайтов для моего друга и размещаю их на своем домашний веб-сервер. Этот сервер довольно прост, и мое сетевое соединение не так хорошо, поэтому изображения загружаются довольно долго.

Пока я просто изменяю размеры изображений (которые обычно составляют около 2000 х 1000 пикселей), используя всего лишь Изменение размера HTML (до 750x375). Конечно, это не оптимально, так как изображения довольно большие.

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

Я бы хотел использовать imagemagick, потому что это позволяет провести хорошую автоматизацию (я выродок, но мои друзья нет, поэтому я хочу, чтобы все было просто) Я пытался использовать:

convert -resize 750x -density 72 in.tif out.tif

для преобразования изображений в ширину 750 пикселей при сохранении соотношения сторон и уменьшения их плотности до 72 точек на дюйм. Это только уменьшает размер файла с 3,4 МБ до 1,2 МБ.

Каков правильный метод сжатия (filtype), лучшее разрешение, плотность, ...?

Answer 1

Я обычно делаю что-то вроде следующего (в bash):

original=something.tif
reduced=${original%.tif}.jpg
options="-resize 720 -auto-orient -strip -unsharp 3x1+0.5 -quality 85"
convert $original $options $reduced

-автоориентация получит правильную ориентацию, если камера имеет датчик силы тяжести, -полоска удалит метаданные и миниатюру (обычно бесполезный в Интернете), -unsharp будет применять некоторую резкость после сокращение, а -качество является фактором качества JPEG.

Answer 2

Когда вы обслуживаете изображения из Интернета, вы обычно используете:

• JPEG для оригиналов с непрерывным тоном, таких как фотографии
• PNG для хорошего сжатия изображений, которые можно легко сжать с помощью индексной таблицы поиска. 24-битный PNG подходит для фотографий, но может быть более громоздким, чем JPEG
• GIF для изображений, которые не являются непрерывным тоном. На данный момент PNG хорошо поддерживается во всех браузерах, поэтому нет никаких оснований использовать этот индексированный формат сжатия

Несколько замечаний: JPEG - это сжатие с потерями, поэтому изображение будет немного ухудшено. Часто, если вы уменьшаете размеры, это ухудшение не будет заметным, если только нет контрастных краев правильной формы с контрастными цветами (подумайте, вертикальная сторона здания на фоне ясного неба). PNG и GIF без потерь, если только вы не разрешите дизеринг. Если вы разрешите дизеринг, размер получаемого вами файла будет меньше, но, на мой взгляд, результат будет хуже.

Я бы посоветовал вам прочитать обсуждение на сайте ImageMagick , если вы этого еще не сделали.

На собственном сайте ImageMagick приведен пример команды, сжимающей в jpeg:

convert jpg_lossy.gif   -quality  50%  jpg_lossy_50.jpg

Вы, очевидно, добавили бы -resize 750px, чтобы получить как ваш размер, так и сжатие за один выстрел. Если 50% - это слишком сильное сжатие, проверяйте число до тех пор, пока не получите приемлемые результаты.

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

Answer 3

1. Плотность на экране бесполезна. Изображение 1000px x 1000px с разрешением 10 точек на дюйм или 1000 точек на дюйм будет выглядеть так же. Окончательное разрешение в пикселях - это все, что вам нужно. 72ppi - это традиционное разрешение экрана ... но опять же, это не имеет значения.

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

3. JPEG даст лучшее сжатие с потерями, а PNG24 даст лучшее сжатие без потерь.

4. Я не люблю imagemagick. Это создает низкое качество изображения при большем размере файла. Для некоторых целей это нормально. Но он не может обеспечить высокое качество без слишком большого размера файла. Я предпочитаю использовать Photoshop, Save for Web ... Затем я использую такой инструмент, как jQuery для обработки изменения размера браузера. Таким образом, качество изображения не сильно ухудшается, а размер файла не слишком велик.