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

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

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

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

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

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

Остаётся JavaScript, что грустно. Надо подумать ещё.
3 июня 2011 01:40

Orcinus Orca (orcinus.ru)
3 июня 2011, 04:37

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

Orcinus Orca (orcinus.ru)
3 июня 2011, 04:39

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

mr-simm (mr-simm.livejournal.com)
3 июня 2011, 07:35

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

mr-simm (mr-simm.livejournal.com)
3 июня 2011, 07:36, ответ предназначен Orcinus Orca (orcinus.ru):

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

praeivis (praeivis.lt)
3 июня 2011, 09:28

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

Артём Сапегин (sapegin.ru)
3 июня 2011, 09:32

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

<img src="big.jpg">

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

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

bolk (bolknote.ru)
3 июня 2011, 09:45, ответ предназначен Orcinus Orca (orcinus.ru):

А чем JS не устраивает? Посмотрел разрешение экрана и подставил нужный SRC. Работает топорно, зато надежно.
Может быть вырублен, срабатывает поздно.
Кстати, как вариант на сервере оценить UA и отталкиваться от него при генерации ссылки на картинку.
Это описанный в моём посте способ с «Яндекс.Детектором»

bolk (bolknote.ru)
3 июня 2011, 09:46, ответ предназначен mr-simm (mr-simm.livejournal.com):

Поставить куку, при наличии которой к сервису не обращаться вовсе. Ну и заодно пользователю можно будет предоставить возможность выбора, если автоматический сработал неверно.
В первый-то раз как-то надо пользователя детектить. Кука позволит не ходить в «Яндекс.Детектор» каждый раз.

bolk (bolknote.ru)
3 июня 2011, 09:56, ответ предназначен Артём Сапегин (sapegin.ru):

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

bolk (bolknote.ru)
3 июня 2011, 09:57, ответ предназначен praeivis (praeivis.lt):

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

Gray (gray7400.ya.ru)
3 июня 2011, 09:57, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
3 июня 2011, 10:10, ответ предназначен Gray (gray7400.ya.ru):

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

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

nikolay-smeh (nikolay-smeh.livejournal.com)
3 июня 2011, 10:22

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

bolk (bolknote.ru)
3 июня 2011, 10:28, ответ предназначен nikolay-smeh (nikolay-smeh.livejournal.com):

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

bolk (bolknote.ru)
3 июня 2011, 10:30, ответ предназначен nikolay-smeh (nikolay-smeh.livejournal.com):

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

Дмитрий (инкогнито)
3 июня 2011, 10:37

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

bolk (bolknote.ru)
3 июня 2011, 10:55, ответ предназначен Дмитрию

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

Сергей Чикуёнок (chikuyonok.ru)
3 июня 2011, 12:38, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
3 июня 2011, 12:42, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

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

bolk (bolknote.ru)
3 июня 2011, 12:44, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

bolk (bolknote.ru)
3 июня 2011, 12:45, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

Сергей Чикуёнок (chikuyonok.ru)
3 июня 2011, 12:59, ответ предназначен bolk (bolknote.ru):

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

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

bolk (bolknote.ru)
3 июня 2011, 13:48, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

Сергей Чикуёнок (chikuyonok.ru)
3 июня 2011, 14:06, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
3 июня 2011, 15:22, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

bolk (bolknote.ru)
3 июня 2011, 18:15

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

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

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

Валерий (инкогнито)
4 июня 2011, 00:05

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

bolk (bolknote.ru)
4 июня 2011, 14:32, ответ предназначен Валерию

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

Аноним (инкогнито)
6 июня 2011, 16:54

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

bolk (bolknote.ru)
6 июня 2011, 18:21, ответ предназначен Анониму

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

Целеустремлённый молодой человек с мечтой (del-ka.livejournal.com)
3 сентября 2011, 10:56

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

bolk (bolknote.ru)
3 сентября 2011, 12:55, ответ предназначен del-ka.livejournal.com:

А что должно быть-то? Так должно быть?

js фокус.pnghttp://fotki.yandex.ru/users/bolknote/view/346008/?page=0

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)