Есть ли готовое решение просто отправить часть чересстрочного JPEG в зависимости от разрешения браузера?

Question

Я спрашиваю, знаете ли вы, есть ли готовое решение, но не совсем, как это сделать.

Я совершенно уверен, что смогу справиться с этим сам, даже если я никогда не прикасалсябайты JPEG вручную.Если вы хотите получить трещину, вам предлагается сделать это;)

Основная идея заключается в том, что у вас есть сайт с несколькими изображениями в формате JPEG, но вы хотите максимально снизить нагрузку.для мобильных пользователей.

Таким образом, вы гарантируете, что все ваши JPEG-файлы являются прогрессивными и сначала отправляют только их низкочастотные биты, отключают TCP-соединение и ждут, когда клиент сообщит, какБольшое доступное пространство находится в окне браузера.

Или, в качестве альтернативы, у вас есть что-то вроде browsercaps.ini или аналогичное, и вы полагаетесь на это, чтобы получить исходное разрешение - и затем репортер сообщает об исправлении, еслинеобходимо.

Мне действительно нужно это для двух совершенно разных сред: одна использует PHP, а другая использует node.js (последняя имеет большее значение).

Я вполнеуверен, что Picasaweb уже делает это, или, по крайней мере, сделал.Вы могли просматривать изображение, и оно загружалось постепенно - тогда вы могли увеличивать его, оно становилось блочным, но продолжало загружаться постепенно, я помню, что это меня очень впечатлило!

(И несправедливо, что Googleоставь себе классные вещи, помни их девиз {° «°])

Answer 1

Почему бы не отправить клиенту список изображений, которые можно использовать для определенного тега img, а затем попросить клиента определить, какое из них следует использовать?

Можно определить размер экрана устройства document.write(screen.width+'x'+screen.height); или размер браузера . И вместо добавления атрибута src для каждого изображения добавление возможных источников в атрибут html5 data-, например, так:

<img data-img="mobile:some-img.jpg,desktop:other-img.jpg" />

JavaScript (с jQuery):

$('img').each(function(){
    $(this).attr('src', $(this).attr('data-img').split(',')[0].split(':')[1]);
});