Как правильно обрабатывать веб-изображения с высоким разрешением для дисплеев с высоким разрешением (в основном для дисплеев на сетчатке iOS)?
У меня есть мобильный веб-сайт, использующий преимущества jQuery Mobile, однако изображения, откровенно говоря, выглядят как дерьмо на iPhone 4/4S. Я предполагаю, что то же самое пойдет и для "нового iPad", когда он появится позже на этой неделе.
Я знаю, что это как-то связано с соотношением пикселей и / или DPI (или PPI или как вы хотите это назвать... давайте не будем обсуждать это). Я просто хочу знать, каков наилучший способ подачи веб-изображений с высоким разрешением для этих дисплеев сетчатки iOS.
Сначала я думал, что изменение DPI изображения (в Photoshop) решит проблему. Я взял несколько образцов изображений и масштабировал их до ширины 190 пикселей. Я сохранил одно изображение с разрешением 72 DPI, а другое с разрешением 200 DPI. Это не имело никакого эффекта. Убедитесь сами (на iPhone 4 / 4S): http://haxway.com/restest/1.html Нижнее изображение каждого изображения имеет разрешение 200 DPI.
Затем, вместо сохранения изображения с высоким разрешением с разрешением 200 DPI, я снова сохранил его с разрешением 72 DPI, но на этот раз я увеличил ширину (до 528 пикселей), чтобы при уменьшении до 190 пикселей он был равен ~200 DPI. Похоже, это сработало: http://haxway.com/restest/2.html Если вы просматриваете источник, вы можете видеть, что я навязываю ширину / высоту тегам изображения (<img src="w4.jpg" alt="" width="190" height="143">).
Однако я не уверен, что это лучшее решение. Разве использование атрибутов width/height для масштабирования изображения не влияет на производительность рендеринга, поскольку устройство должно масштабировать изображение, а не просто загружать его (и не трогать его дальше)?
После некоторых исследований, похоже, что есть некоторые медиа-запросы CSS, такие как -webkit-min-device-pixel-ratio [1] где вы можете использовать различные CSS для отображения высокого разрешения и, следовательно, загружать изображения с высоким разрешением в CSS. Но мне нужно нацелить HTML <img> теги. В другой статье, которую я прочитал (извините, потерял ссылку), предлагалось использовать Javascript для замены "обычных" изображений на изображения высокого разрешения. Это просто звучит безумно!
Есть ли лучший способ сделать это? Я понимаю, что мнения могут отличаться от того, какой "лучший" путь. Если бы плюсы / минусы каждого метода можно было объяснить, это было бы здорово! Моя цель - использовать любой метод, который рендерит быстрее всего (надеюсь, без использования хакерского Javascript и т. Д.).
Спасибо!
2 ответа
Вам нужно будет запустить некоторую форму JS в качестве решения. Тот, который выбирают для использования в настоящее время, один на коврик Уилкокс. Он будет отображать правильное изображение на экране. Большим плюсом этого решения является кэширование изображений для снижения нагрузки на пользователей.
Существует толчок для введения нового HTML-элемента изображения, который может занять несколько источников, чтобы преодолеть эту проблему, но это еще далеко.
Для тегов изображений, я думаю, вы уже дали свое собственное решение. Большим преимуществом является отправка одного и того же изображения для всех клиентов.
Для изображений CSS, вы не можете сделать то же самое? Забудьте о неуклюжих -webkit-min-device-pixel-ratio который будет требовать другое изображение каждый раз, когда они готовят новое устройство. Просто отправьте самое большое изображение и используйте CSS3 background-size чтобы уменьшить его. Я не проверял это. IE<9 доставит вам проблемы.
Я, наверное, как и вы, ошеломленный html/css, пока не предоставляет должного способа сделать это, только такие хакерские обходные пути. Я также, как и вы, смущен тем, почему браузеры не просто придерживаются информации о DPI изображений. Если кто-то знает, комментарии приветствуются.
Есть ли лучший способ сделать это?
Да, избегайте использования растровых изображений. Используйте SVG.