Экономия трафика для мобильных
Идея такая: экраны мобильных относительно небольшие. Самое здоровое, что я встречал — 5″ на моём предыдущем телефоне (HTC X7500). Это значит, что нет нужды показывать на этих дисплеях столь же большие картинки, как и на ноутах и десктопах.
Хочу со временем попробовать такую схему: картинка заливается ко мне на сайт и в «Яндекс.Фотки». С сайта показывается изображения моего обычного формата для компьютеров и ноутов, с «Яндекс.Фоток» (а там из каждой фотографии готовится семь превьюшек разного размера) — для сотовых в подходящем для экрана размере.
Единственное, что я пока не продумал — как автоматически подставлять разные изображения. Из CSS нельзя управлять атрибутом SRC картинки, а то можно было бы воспользовать media queries; можно было бы использовать
Хотелось бы использовать SVG, но WebKit на «Андроидах» и iOS (в iOS поддерживается с 2.1) не понимает SVG (в SVG можно сунуть ссылки на несколько картинок и выбрать нужную через те же media queries).
Можно было бы сделать подмену со стороны сервера, но для этого нужно знать разрешение на экране пользователя. В этом мог бы помочь сервис «Яндекс.Детектор». Но мне неизвестно насколько быстро пополняется база новыми моделями, какой у неё охват старых и что делать, если сервис
Остаётся JavaScript, что грустно. Надо подумать ещё.
Комментарии 32
Поставить куку, при наличии которой к сервису не обращаться вовсе. Ну и заодно пользователю можно будет предоставить возможность выбора, если автоматический сработал неверно.
Комментарий для orcinus.ru:
В тех же целях экономии трафика он запросто может быть и вовсе отключен.
Дело не столько в экономии денег пользователя, сколько в быстрой загрузке. Мобильный интернет в России дохлый.
img {
width: 100%;
height: auto;
}
@media screen and
img {
content: url(small.jpg);
}
}
И правда работает. Причём в «Опере» — тоже. Одно «но» с интернета запрашиваются обе картинки. Никакой экономии.
Комментарий для orcinus.ru:
Может быть вырублен, срабатывает поздно.
Это описанный в моём посте способ с «Яндекс.Детектором»
Комментарий дляmr-simm.livejournal.com:
Впервый-то раз как-то надо пользователя детектить. Кука позволит не ходить в «Яндекс.Детектор» каждый раз.
Жень, дойди ногами до команды Детектора и спроси, насколько у них свежая база. Собственно, для таких вещей его и надо использовать. И она у них, ИМХО, очень свежая — на ней наш собственный мобильный портал зиждется.
В общем, Детектор — как один из вариантов, но мне бы хотелось
Детектор ограничивает
Я в документации не нашёл ограничения на количества запросов. А сколько там?
А попробуй через media queries делать запрос на сервер, который просто поставит куку, какое резрешение у пользователя, а потом уже сервер по ней будет определять, что показывать. Типа вот так: http://chikuyonok.ru/2010/10/browser-sniffing/
Думаю, что я попробую совместить Яндекс.Детектор с этой идеей.
Развивая идею Артёма Сапегина, можно сделать так:
Я думал туда about:blank подставлять. Но это не во всех браузерах работает и не понятно с какой версии это работает там, где работает. Кстати, зачем там base64? :)
Ну так, первое, что в голову пришло :) Насколько я понял, ты ориентируешься только на мобильные барузеры и только на Safari/Webkit/Opera. В приведённом примере используется CSS2 + CSS3 Media Queries, что должно поддерживаться всеми (в iOS,
Я
1) смотрим куку, если установлена, то ориентируемся по ней
2) если не установлена, идём в Детектор, по результатам ставим куку и выдаём картинки, если Детектор не отвечает, то идём дальше
3) если куки до сих пор нет, отдаём полные картинки и через JS выставляем куку
Остаются ещё клиенты без JS, но они просто будут считаться десктопными.
http://img-fotki.yandex.ru/get/5810/354194 … D0#500x202