У меня есть мобильный веб-сайт, использующий преимущества 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 и т. Д.).
Спасибо!
[1] http://aralbalkan.com/3331