Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Экономия трафика для мобильных

Идея такая: экраны мобильных относительно небольшие. Самое здоровое, что я встречал — 5″ на моём предыдущем телефоне (HTC X7500). Это значит, что нет нужды показывать на этих дисплеях столь же большие картинки, как и на ноутах и десктопах.

Хочу со временем попробовать такую схему: картинка заливается ко мне на сайт и в «Яндекс.Фотки». С сайта показывается изображения моего обычного формата для компьютеров и ноутов, с «Яндекс.Фоток» (а там из каждой фотографии готовится семь превьюшек разного размера) — для сотовых в подходящем для экрана размере.

Единственное, что я пока не продумал — как автоматически подставлять разные изображения. Из CSS нельзя управлять атрибутом SRC картинки, а то можно было бы воспользовать media queries; можно было бы использовать background-image, но это сломает мои галереи картинок и изменит порядок загрузки фото.

Хотелось бы использовать SVG, но WebKit на «Андроидах» и iOS (в iOS поддерживается с 2.1) не понимает SVG (в SVG можно сунуть ссылки на несколько картинок и выбрать нужную через те же media queries).

Можно было бы сделать подмену со стороны сервера, но для этого нужно знать разрешение на экране пользователя. В этом мог бы помочь сервис «Яндекс.Детектор». Но мне неизвестно насколько быстро пополняется база новыми моделями, какой у неё охват старых и что делать, если сервис в какой-то момент не ответит.

Остаётся JavaScript, что грустно. Надо подумать ещё.

32 комментария
Orcinus Orca (orcinus.ru) 2011

А чем JS не устраивает? Посмотрел разрешение экрана и подставил нужный SRC. Работает топорно, за-то надежно.

Orcinus Orca (orcinus.ru) 2011

Кстати, как вариант на сервере оценить UA и отталкиваться от него при генерации ссылки на картинку.

mr-simm (mr-simm.livejournal.com) 2011

и что делать, если сервис в какой-то момент не ответит.

Поставить куку, при наличии которой к сервису не обращаться вовсе. Ну и заодно пользователю можно будет предоставить возможность выбора, если автоматический сработал неверно.

mr-simm (mr-simm.livejournal.com) 2011

Комментарий для orcinus.ru:

А чем JS не устраивает? Посмотрел разрешение экрана и подставил нужный SRC. Работает топорно, за-то надежно.

В тех же целях экономии трафика он запросто может быть и вовсе отключен.

praeivis (praeivis.lt) 2011

Владельци мобильних которие дорожат трафиком пользуится Opera Mini =)

Артём Сапегин (sapegin.ru) 2011

В вебките у меня заработал такой способ (в ФФ не заработал, на мобильниках нет возможности проверить):

<img src=«big.jpg»>

img {
width: 100%;
height: auto;
}

@media screen and (max-width: 480px){
img {
content: url(small.jpg);
}
}

Евгений Степанищев (bolknote.ru) 2011

Комментарий для orcinus.ru:

А чем JS не устраивает? Посмотрел разрешение экрана и подставил нужный SRC. Работает топорно, зато надежно.

Может быть вырублен, срабатывает поздно.

Кстати, как вариант на сервере оценить UA и отталкиваться от него при генерации ссылки на картинку.

Это описанный в моём посте способ с «Яндекс.Детектором»

Евгений Степанищев (bolknote.ru) 2011

Комментарий для mr-simm.livejournal.com:

Поставить куку, при наличии которой к сервису не обращаться вовсе. Ну и заодно пользователю можно будет предоставить возможность выбора, если автоматический сработал неверно.

В первый-то раз как-то надо пользователя детектить. Кука позволит не ходить в «Яндекс.Детектор» каждый раз.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для sapegin.ru:

В вебките у меня заработал такой способ

И правда работает. Причём в «Опере» — тоже. Одно «но» с интернета запрашиваются обе картинки. Никакой экономии.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для praeivis.lt:

Владельцы мобильных, которые дорожат трафиком пользуются «Оперой Мини» =)

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

Gray (gray7400.ya.ru) 2011

Комментарий для Евгения Степанищева:

Жень, дойди ногами до команды Детектора и спроси, насколько у них свежая база. Собственно, для таких вещей его и надо использовать. И она у них, ИМХО, очень свежая — на ней наш собственный мобильный портал зиждется.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для gray7400.ya.ru:

Дойду сегодня, я ж ночью рассуждал. Но у детектора должны быть чисто технические сложности. Я как-то разбирался с этим вопросом и знаю насколько не информативные User-Agent и прочие поля могут быть у некоторых мобильных браузеров. Тут уж выше головы не прыгнешь.

В общем, Детектор — как один из вариантов, но мне бы хотелось как-то обмануть природу и сделать через CSS :)

nikolay-smeh (nikolay-smeh.livejournal.com) 2011

JS на телефонах определённой давности может и не быть.
Детектор ограничивает кол-во запросов в сутки, да и база у него тоже не всегда айс.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для nikolay-smeh.livejournal.com:

Детектор ограничивает кол-во запросов в сутки

Я в документации не нашёл ограничения на количества запросов. А сколько там?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для nikolay-smeh.livejournal.com:

Да там 500 тысяч обращений в сутки ( http://api.yandex.ru/detector/eula.xml ). Мне должно хватить. А если база не айс, то это уже хуже…

Дмитрий 2011

Webkit в iOS, кстати, поддерживает SVG.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Дмитрий:

Точно, с версии 2.1

Сергей Чикуёнок (chikuyonok.ru) 2011

Комментарий для Евгения Степанищева:

А попробуй через media queries делать запрос на сервер, который просто поставит куку, какое резрешение у пользователя, а потом уже сервер по ней будет определять, что показывать. Типа вот так: http://chikuyonok.ru/2010/10/browser-sniffing/

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Я думал что-то такое, но через JS — определяешь разрешение экрана и ставишь его в куку. На следующем заходе всё оптимизировано как надо. С media queries идея мне нравится, спасибо.

Думаю, что я попробую совместить Яндекс.Детектор с этой идеей.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Прочитал про твою идею подробнее. Вблизи она оказалась интереснее, чем я думал. Спасибо! А самое главное, я ведь уже читал про неё в твоём блоге и забыл напрочь.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Ну и моё возражение про прокси в комментариях к твоей заметке остаётся в силе — прокси. Так что лучше ставить куку и в следующий раз показывать пользователю что надо.

Сергей Чикуёнок (chikuyonok.ru) 2011

Комментарий для Евгения Степанищева:

Развивая идею Артёма Сапегина, можно сделать так:

<style type=«text/css»>
img { content: url(image.jpg); }
</style>
<img src=«data:image/png;base64,0»/>

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Я думал туда about:blank подставлять. Но это не во всех браузерах работает и не понятно с какой версии это работает там, где работает. Кстати, зачем там base64? :)

Сергей Чикуёнок (chikuyonok.ru) 2011

Комментарий для Евгения Степанищева:

Ну так, первое, что в голову пришло :) Насколько я понял, ты ориентируешься только на мобильные барузеры и только на Safari/Webkit/Opera. В приведённом примере используется CSS2 + CSS3 Media Queries, что должно поддерживаться всеми (в iOS, по-моему, с первых версий MQ доступны, так как они изначально предлагали писать программы как веб-приложения).

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Я как-то не догадывался, что можно сделать content: url(…). FF4, видимо, тоже не догадывается. Интересно, как дела у Fennec.

Евгений Степанищев (bolknote.ru) 2011

Кажется, нормальный вариант такой:

1) смотрим куку, если установлена, то ориентируемся по ней
2) если не установлена, идём в Детектор, по результатам ставим куку и выдаём картинки, если Детектор не отвечает, то идём дальше
3) если куки до сих пор нет, отдаём полные картинки и через JS выставляем куку

Остаются ещё клиенты без JS, но они просто будут считаться десктопными.

Валерий 2011

Евгений, а если отталкиваться от размеров экрана и он повернут на 90 градусов? Тогда что? Ширина с высотой поменяются? Не пробовал)).

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Валерий:

У меня есть ширина и высота, я буду всегда брать бо́льшую сторону как ширину. Ведь, если человек поворачивает устройство на 90˚, нет смысла перезагружать страницу.

Аноним 2011

По поводу ориентации,
http://ejohn.org/blog/iphone-tech-talk/

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Аноним:

Спасибо (знания лишними не бывают), но в данном случае мне не пригодится. Я не могу перегружать графику в зависимости от ориентации, иначе никакой экономии трафика не будет.

Целеустремлённый молодой человек с мечтой (del-ka.livejournal.com) 2011

Вот решение: http://jsfiddle.net/kizu/kNAgT/4/

Евгений Степанищев (bolknote.ru) 2011