Рекомендации по размеру, разрешению и качеству изображений

Question

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

Я работаю над веб-сайтом для клиента, и, будучи дипломированным специалистом по искусству и дизайну, клиент настаивает на том, что его изображений размером 7–10 МБ достаточно для ее веб-сайта общим объемом почти 400 МБ. Я пытался аргументировать ограничения пропускной способности и производительность, но они не держатся.

Стандарт для изображений с разрешением 72dpi, не больше стандартного разрешения экрана (1024x768) и размером более 1 МБ (что, на мой взгляд, уже слишком велико). Мой аргумент заключается в том, что загрузка файлов размером 7 Мб + в галерею при загрузке страницы серьезно затруднит работу пользователей, если им придется долго ждать, пока 7-10 изображений не попадут в кеш перед загрузкой страницы, и даже протестировать это. с ленивыми загрузочными плагинами (мы не хотим перепрошивать) и поздняя загрузка имеет потери производительности.

Есть ли у кого-нибудь здесь какие-либо рекомендации относительно размера, разрешения и качества изображения? Мы не хотим терять качество HD изображений, когда пользователи перемещаются по галерее (очевидно, нам сначала нужно будет сделать их миниатюру)?

Answer 1

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

Правда, конечно, в том, что изображение размером 8-10 МБ настолько велико, что большинству пользователей требуется много секунд, чтобы загрузить, создавая ужасный пользовательский опыт, который увеличит показатель отказов.

Покажите клиенту демонстрацию бок о бок ее веб-сайта, загружающего несколько оптимизированных для Интернета изображений, и покажите ей сайт, загружающий 8-10 МБ изображений, а затем дайте ей решить. В конечном счете, ваша профессиональная работа - помогать ей делать хорошие выборы, но она может делать плохие, если настаивает на этом (это ее бренд, деньги и право).

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

Удачи!

Answer 2

Некоторые общие рекомендации:

• Миниатюры (конечно)

• Предложите изображения нескольких размеров (маленький, средний, большой). Хотя я понимаю последствия гигантских изображений для UX, некоторые люди do имеют быстрые соединения и большие дисплеи и / или захотят дождаться версии с высоким разрешением. Но это не единственный вариант.

• Попробуйте разные уровни сжатия, чтобы увидеть, что лучше всего подходит для разных размеров. Использование одного уровня сжатия по всей плате не всегда работает. Опять же (в зависимости от исходного материала) может потребоваться сжатие практически без потерь на верхнем уровне. Например, изображения для печати, чертежи САПР с мелкими деталями и т. Д.

• Используйте методы последовательной загрузки, если применимо. Например, если у вас есть десять изображений для загрузки (оптимизировано или нет), убедитесь, что первое видимое изображение является первым, фактически запрашиваемым с сервера.

Answer 3

Я уже читал рекомендации (когда мы все еще использовали соединения 1 Мбит / с или менее) и следую им до сих пор:

• изображения с высоким разрешением не должны превышать 1,5 - 2 МБ.сделать его таким большим, как содержимое самой веб-страницы.попробуйте проверить http://deviantart.com, как они размещают большие фотографии на своем сайте, и проверьте свойства изображения с помощью EXIF, если каких-либо размеров
• должно быть достаточно для просмотра в браузере (и избежать прокрутки)
• сжатие должно быть проверено.это от случая к случаю, ни одна настройка не является одинаковой для всех.Высокое качество, высокое сжатие без видимой потери качества - практика в веб-дизайне.
• JPEG лучше всего подходит для изображений, PNG для макета и GIF для иконок.
• попробуйте загрузить изображения в фоновом режиме, когда браузер бездействует, используя javascript.таким образом, они находятся в кеше, пока пользователь не узнает об этом.
• Подробнее о дизайне веб-страницы, избегайте использования тяжелой графики на самом сайте, делая сайт быстрым, поэтому мы ждем только изображения.

Answer 4

Если вы действительно все испарите, у вас нет выбора.

Вы говорите об ОГРОМНЫХ размерах файлов, которые не являются реалистичными.

Вам необходимо скачать уменьшенную версию.После этого вы можете впоследствии загружать версии с повышенным качеством или предлагать полное изображение с помощью onmouseover или щелчком мыши.