Как правильно обрабатывать веб-изображения высокого разрешения для дисплеев высокого разрешения (в основном дисплеев iOS Retina)?
У меня есть мобильный веб-сайт, использующий преимущества jQuery Mobile, однако изображения, честно говоря, выглядят как дерьмо на iPhone 4/4S. . Я предполагаю, что то же самое произойдет с «новым iPad», когда он появится в продаже на этой неделе.
Я знаю, что это как-то связано с соотношением пикселей и/или DPI изображения (или PPI, или как бы вы это ни называли... давайте не будем вдаваться в дискуссию об этом). Я просто хочу знать, как лучше всего показывать веб-изображения с высоким разрешением для этих дисплеев iOS Retina.
Сначала я думал, что изменение DPI изображения (в Photoshop) решит проблему. Я взял несколько образцов изображений и уменьшил их до ширины 190 пикселей. Я сохранил одно изображение с разрешением 72 DPI, а другое — с разрешением 200 DPI. Это не имело никакого эффекта. Убедитесь сами (на iPhone 4/4S): http://haxway.com/restest/1.htmlНижнее изображение каждого из них имеет разрешение 200 DPI.
Затем, вместо сохранения изображения высокого разрешения с разрешением 200 точек на дюйм, я снова сохранил его с разрешением 72 точки на дюйм, но на этот раз я увеличил ширину (до 528 пикселей), чтобы при уменьшении до ширины 190 пикселей оно было равно ~ 200 точек на дюйм. Похоже, это сработало: http://haxway.com/restest/2.htmlЕсли вы посмотрите исходный код, вы увидите, что я задаю ширину/высоту тегам изображения ( 
Однако я не уверен, что это лучшее решение. Разве использование атрибутов ширины/высоты для масштабирования изображения не влияет на производительность рендеринга, поскольку устройство должно масштабировать изображение, а не просто загружать его (и больше не трогать его)?
После некоторых исследований выяснилось, что есть некоторые медиа-запросы CSS, такие как -webkit-min-device-pixel-ratio [1] , где вы можете использовать разные CSS для дисплеев с высоким разрешением и, следовательно, загружать изображения с более высоким разрешением. изображения в CSS. Но мне нужно ориентироваться на теги HTML
Есть ли лучший способ сделать это? Я понимаю, что мнения могут отличаться о том, какой способ является «лучшим». Если бы можно было объяснить плюсы/минусы каждого метода, было бы здорово! Моя цель - использовать любой метод, который быстрее всего обрабатывается (надеюсь, без использования какого-то хакерского Javascript и т. д.).
Спасибо!