Поскольку экран мобильного устройства и скорость интернета меньше, логичнее загружать пользователю изображения соответствующего размера. То есть, если ширина экрана 320 пикс, то и максимальна ширина изображения не должна превышать это число. Иначе это лишняя трата ресурсов и времени пользователя. Однако, есть исключения: в последнее время приобрели популярность дисплеи с высокой плотностью пикселей (кол-во пискелей на квадратный сантиметр или дюйм). Например, дисплей iPhone 3G имеет показатель 163 ppi (pixels per inch — пикселей на квадратный дюйм), а iPhone 4 уже 326 ppi (в два раза больше). Наглядное сравнение — http://cdn.osxdaily.com/wp-content/uploads/2009/09/iphone-4-screen-comparison.jpg  При этом, физический размер экрана не изменился, но плотность пикселей увеличилась в два раза. Если открыть изображение размером 320 x 320 пикселей на весь экран на iPhone 3G, то всё будет выглядеть как и ожидалось. Но если открыть это же изображение на весь экран на iPhone 4 (у которого по ширине в два раза больше пикселей), то изображение будет выглядеть размыто (Wiki). Чтобы изображение выглядело чётким, необходимо увеличить его размер в два раза. Но вместе с увеличением размера, возрастает и размер файла (в килобайтах). Таким образом, есть выбор:

  • Загружать юзерам чёткие и качественные изображения — дольше грузится

  • Загружать юзерам обычные изображения — быстрее, но размыто


На данный момент кол-во устройств с высокой плотностью дисплея больше, чем с обычной плотностью. Поэтому даже если на desktop-сайте оригинальное фото размещается размером 800 х 600, то на high-dpi дисплее оно будет выглядеть качественно. В то время, как для обычного экрана (iPhone 3G) такой размер — это перебор.


Вывод: учитывая широкое распространение high-dpi устройств, оригинальные фото с desktop-сайтов отлично подходят для отображения на этих дисплеях. Однако, время загрузки страниц увеличивается в несколько раз. Поэтому важно определить стратегию: сохранять исходные изображения (качественно, но долго) или оптимизировать все, не обращая внимания на high-dpi.

Оптимизация

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

  • Заказчик на своей стороне предоставляет отдельный URL для оптимизированных изображений, которые будут использоваться только на мобильной версии.

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


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