모바일 사이트의 이미지 크기를 조정해야합니까?

Question

나는 내가하는 것보다 훨씬 더 나은 지식을 가진 사람들에게 물어보고 싶은 매우 간단한 질문을 가지고 있습니다.

질문의 근거는 다음과 같습니다. 모바일 웹 사이트를 개발할 때. 외부 소스에서 얻은 이미지의 크기를 동적으로 조정해야합니까? 아니면 큰 이미지로 남겨두고 CSS로 처리해야합니까?

내가 만들고있는 모바일 웹 사이트는 웹 서비스에서 이미지 64 개를 가져옵니다. 지금 내 생각의 기차가 이것입니다. 가능한 한 작게 내 웹 사이트의 크기를 유지하고 싶으므로 이미지를 더 작게 조정하면 좋은 생각 인 것 같습니다.

반면에. javascript로 이미지 크기를 조정하면 (개발자는 모든 것을 클라이언트 쪽에서 만 수행하기를 원하기 때문에), 사용자의 모바일 장치에 오버 헤드가 발생할 수 있습니다.

이 문제에 대한 귀하의 의견은 무엇입니까? 이미지의 크기를 조정해야할까요?

미리 답변 해 주셔서 감사합니다.

Answer 1

모바일 사용자의 연결에 항상 유의하십시오. 대기 시간은 종종 모바일 연결에서 훨씬 높기 때문에 (크기에 관계없이 요청의 전체 수를 제한하려고 시도 함) 전송 속도가 느려지고 초과 요금은 비싼 경향이 있습니다.

대부분의 경우 최상의 해결책은 브라우저에서 필요한 크기의 이미지를 제공하는 것입니다. 브라우저의 크기 "비틀기"가 좋습니다. 높은 품질의 확대를 허용하는 다소 큰 이미지를 제공,하지만 당신은 신중하게 이것을 사용한다 (실제로 이미지 확대하면 자세한 내용을 보여줄 필요가? 않음) 또한

크기 조정의 서버 측 비용 염두 이미지가 요청 될 때마다 한 번 크기를 결정한 다음 캐시 또는 데이터베이스에 결과를 저장하는 것이 좋습니다.

Facebook takes this approach. 2009 년 현재 그들은 각 이미지의 4 가지 버전을 생성하고 저장하고있었습니다.

모바일 브라우저에서 전체 크기 이미지를 소비해야하는 경우 최소한 필요할 때만 다운로드되도록 (예 : 처음으로 스크롤 할 때) 게으르게로드하십시오.

Answer 2

내가 아는 가장 좋은 방법은 기존의 반응 형 이미지 솔루션을 사용하는 것입니다. 백엔드 측

즉 :

• -http://adaptive-images.com/
• 프런트 엔드 - https://github.com/scottjehl/picturefill

당신의 당신을위한 더 나은 하나를 선택할 수 있습니다. 그것은 프로젝트에 달려 있습니다.

모바일 웹 사이트 만있는 경우 작은 이미지를 제공하고 사용자의 시간과 트래픽을 절약하십시오. 당신이 할 수 없다면 - 단지 CSS로 확장하십시오.