브라우저 해상도에 따라 인터레이스 JPEG 부분을 보낼 준비가 되었습니까?

Question

기성품 해결책이 있는지를 아는 것이 아니라 실제로 어떻게해야 하는지를 묻고 있습니다.

JPEG의 바이트를 직접 수동으로 건드리지 않아도 스스로 풀어 낼 수 있다고 확신합니다. 당신이 그것에 균열을 원한다면, 그렇게하도록 초대되었습니다;)

기본 아이디어는 JPEG 이미지가 적은 사이트를 가지고 있지만 모바일에 가능한 한 많은 부하를 줄이고 싶다는 것입니다 사용자.

모든 JPEG가 프로그레시브이고 저주파수 비트 만 전송하고 TCP 연결을 유휴 상태로 유지 한 다음 클라이언트가 사용 가능한 공간의 크기를보고 할 때까지 대기합니다 브라우저 창

다른 방법으로는 browsercaps.ini 또는 그와 비슷한 종류가 있으며 초기 해상도를 얻는 데 의존하고 필요한 경우 리포터가 수정을보고하도록합니다.

실제로 두 개의 완전히 다른 환경에서 PHP를 사용하고 있고 node.js를 사용하고 있습니다 (후자는 더 중요합니다).

저는 이미 picasaweb이이 작업을하고 있거나 적어도 그렇게했는지 확신합니다. 이미지를 볼 수 있고 점진적으로로드됩니다. 그런 다음 이미지를 확대 할 수 있습니다. 블록 형이지만 점진적으로로드가 계속되면서, 나는 그 점에 상당히 감동했습니다.

(구글이 {, 그 자아의 멋진 물건을 계속 자신의 모토를 기억해하고 불공정 °«°]) 클라이언트에게 특정 img 태그에 사용할 수있는 이미지 목록을 전송하지 왜

Answer 1

, 그런 다음 클라이언트가 사용해야하는 것이 무엇인지 결정하게합니다.

document.write(screen.width+'x'+screen.height); 또는 size of the browser의 화면 크기를 결정할 수 있습니다. 대신, 각 이미지에 대한 src 속성을 추가 data- 속성 때문에 같은 HTML5에 사용할 수있는 소스를 추가 : (jQuery로)

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

자바 스크립트 :

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