고밀도 디스플레이에 유용한 이미지 크기를 선택하세요

800 CSS 픽셀 너비로 표시된 카드는 2x 예로 1600 이미지 픽셀 너비의 이미지 후보를 사용할 수 있습니다. 웹사이트가 반응형 이미지 마크업을 제공하는 경우 브라우저는 레이아웃, 장치 밀도 및 기타 조건을 기반으로 적절한 소스를 선택할 수 있습니다. 1600픽셀 파일은 카드가 페이지에서 1600 CSS 픽셀을 차지해야 한다는 의미는 아닙니다.

내보내기 전에 실제 레이아웃을 측정하세요. 기사 열, 전체 너비 배너 및 작은 제품 카드에는 동일한 소스 크기가 필요한 경우가 거의 없습니다. 또한 이미지가 다른 너비를 차지하거나 다른 자르기를 사용할 수 있는 휴대폰 레이아웃을 확인하세요. 모든 파일을 가장 큰 데스크톱 뷰포트 너비의 두 배로 만들면 바이트가 낭비될 수 있습니다. 모든 장치에서 다운로드해야 하는 단일 대형 파일이 아닌 실제 반응형 구현을 위한 후보로 고밀도 내보내기를 처리합니다.

이 페이지는 1600 x 1600 픽셀의 WebP 맞춤 상자로 시작됩니다. 예시적인 범위이므로 측정한 디스플레이 크기에 따른 값으로 대체하세요. 내부 맞춤은 비율을 유지하고 더 작은 소스를 확대하지 않습니다. 예를 들어, 넓은 원본의 가로 길이는 1600 픽셀에 도달하는 반면 인물 사진은 높이에 맞을 수 있습니다. 실제 출력 크기를 확인하세요.

소스의 너비가 700픽셀인 경우 1600픽셀 내보내기를 작성해도 더 큰 원본의 세부정보가 생성되지 않습니다. 더 나은 소스를 사용하거나 더 작은 후보를 수락하십시오. 크기를 조정한 후 라이트 샤프닝을 끄기와 비교하고 의도한 디스플레이 크기에서 미세한 텍스처를 검사합니다. 투명한 그래픽의 경우 현재 WebP 내보내기가 불투명하므로 대신 PNG을 사용하십시오. 나중에 다른 후보를 만들 수 있도록 원본 디자인이나 사진을 보관하세요.

변환기는 파일을 생성합니다. 귀하의 웹사이트는 여전히 올바르게 선택하고 제시해야 합니다. 구현 시 적절한 소스 후보, 정확한 크기 힌트 및 예약된 이미지 치수를 제공합니다. 전화는 존재한다고 해서 가장 큰 이미지를 수신해서는 안 됩니다. 콘텐츠 관리 시스템이 다시 변환할 수 있으므로 최종 페이지를 평가할 때 브라우저 개발자 도구에서 다운로드한 이미지를 확인하십시오.

일반 및 고밀도 화면 설정에서 페이지를 보고 전송 크기와 세부 사항을 비교합니다. 고해상도 이미지는 자동으로 작은 장식 카드에 대한 최상의 절충안이 아닙니다. 마찬가지로, 너무 작은 하나의 이미지는 큰 제품 보기에서 좋지 않은 것처럼 보일 수 있습니다. 흐릿한 배경만 판단하는 대신 얼굴 및 레이블과 같은 의미 있는 콘텐츠를 테스트합니다. 이미지의 위치에 맞는 로드 우선 순위를 유지하고 속도 또는 핵심 웹 바이탈의 개선을 주장하기 전에 실제 페이지를 측정하십시오.

가장 넓은 카드가 400css 픽셀이고 그림이 그 너비로 명확하게 유지된다고 가정합니다. 800픽셀 후보는 소스가 지원할 때 가능한 2배 내보내기 중 하나입니다. 전체 전화기 화면에 걸쳐 있는 이미지가 데스크탑 카드와 다른 디스플레이 너비를 가질 수 있으므로 더 좁은 레이아웃에서도 카드를 확인하십시오. 가장 작은 것을 확대하는 것이 아니라 각 필요한 후보에 대해 원본에서 내보내십시오. 실제 페이지에서 브라우저가 선택하는 파일을 확인합니다. 최종 선택 확인은 방문자가 이미지에 대해 실제로 받는 바이트에 로컬 차원 계산을 연결하는 것입니다.