다중 화면 배경 이미지 크기

Question

저는 스마트 폰, 태블릿 및 데스크톱과 같이 여러 화면에 대해 기본적으로 3 가지 디자인을 가진 이미지가 많은 웹 사이트에서 작업하고 있습니다.

이 사이트의 주요 기능은 배경/전체 화면 이미지입니다. 이러한 배경 이미지가 있어야하는 권장 크기와 관련하여 권장 사항이있는 사람이 있습니까?

그들은 모두 진보적 인 jpeg입니다 (most sensible path for resizing and optimisation).

다른 이미지 크기를 처리하는 것은 또 다른 테스트이지만, 기본적으로 폴 라이트 로더가 허용되므로 클라이언트 측에서 처리하는 것이 현명합니다.

Answer 1

나는 2880x1800에서 최대 2048x1536, 망막 맥 북 프로에서 1136x640에서 480x320을, 망막 아이폰 5에서와 같은 아이폰 3GS 같은 비 망막 전화 서식 망막 아이 패드를 추천 할 것입니다 . 그런 다음 미디어 쿼리를 설정하여 비 망막 ipad, 표준 데스크톱 (기본 이미지) 및 MBP 망막 (2560x1600) 근처에 디스플레이가있는 Google Nexus 10을 선택하십시오.

배경 이미지의 경우 미디어 쿼리를 사용하는 것이 좋습니다. 전체 화면 이미지의 경우 내가 응답 한 이미지 커뮤니티 그룹에서 제안한 picture element을 모방 할 수있는 자바 스크립트 모듈을 구현했습니다. 또는 원한다면 "srcset"경로를 사용할 수 있습니다.