마스터를 유지하고 웹 배달 복사본을 만들기
그것의 이미지 설명과 승인 기록으로 원본 이미지를 저장합니다. 페이지의 실제 이미지 영역에 대한 별도의 배달 파일을 만듭니다. 이것은 나중에 이미지 프레임이나 압축을 변경할 수 있으며, 유일한 출처 파일을 반복적으로 편집하지 않습니다.
THE RENDER OFFICE는 현재 평방, 풍경 또는 초상화 차원에서 PNG 이미지를 반환합니다. 큰 출처가 완료에 도움이 될 수 있지만, 작은 카드는 더 적은 픽셀을 필요로 할 수 있습니다. 이미지 창조 품질 설정은 적절한 웹 수출을 준비하는 대체가 아닙니다.
레이아웃에 픽셀을 배달하는 경기
지원하는 실제 배열 및 장치 밀도에 따라 이미지의 표시 크기를 확인합니다. 사이트가 응답적으로 서비스를 제공 할 수있는 적절한 이미지 변형을 준비하십시오. CSS 폭을 줄이는 것은 다운로드되는 파일의 바이트를 줄이지 않습니다.
MDN은 이미지 출처 후보자와 크기 정보가 브라우저가 적절한 리소스를 선택하는 데 도움이되는 방법을 문서화합니다. 선언된 레이아웃은 실제 페이지와 일치해야 합니다; 잘못된 크기 정보는 브라우저가 적절하지 않은 후보자를 선택할 수 있습니다.
최종 시청 크기에서 압축을 비교합니다.
출판 작업 흐름에 의해 지원되는 적절한 형식을 수출 한 다음 파일 크기와 모양을 비교합니다. 그라디언트, 얇은 구조, 가장자리 및 압축 후 정확한 제품 세부 사항을 검사합니다. 레이아웃이 실제로 필요할 때만 투명성을 유지하십시오.
배치에 필요한 품질을 유지하는 가장 작은 적합한 파일을 선택합니다. 이미지가 최적화되었음을 증명하는 일반적인 파일 크기 목표는 없습니다. 작은 장식 카드와 상세한 제품 이미지는 다른 작업을 가지고 있으며 그에 따라 검토되어야합니다.
| 필드 | 기록 내용 | 리뷰 질문 |
|---|---|---|
| 위치 | 현재 페이지 및 이미지 영역 | 그림 프레임이 이 레이아웃을 제공합니까? |
| 출처 및 수출 | 마스터 파일 이름 및 배달 변형 | 수출이 재현될 수 있습니까? |
| 크기와 바이트 | 현재 픽셀 크기 및 파일 크기 | 제공된 자원이 적절한가? |
| 시각적 검토 | 원하는 크기에 맞는 품질 | 압축은 중요한 정보를 제거했습니까? |
중요성에 따라 레이아웃 공간 및 로드 예약
내면의 폭과 높이 정보를 제공하여 브라우저가 도착하기 전에 이미지의 측면 비율을 예약할 수 있습니다. MDN은 이것이 어떻게 레이아웃 움직임을 줄이는지 설명합니다. 최종 이미지 프레임과 CSS 행동이 예약된 공간과 일치한다는 것을 확인합니다.
초기 시각에 필요하지 않은 적절한 이미지에 대한 가벼운 충전을 사용하십시오. 방문자가 즉시 볼 수있는 주요 이미지에 차별없이 적용하지 마십시오. 실제 페이지 행동을 확인하는 대신 하나의 충전 속성을 보편적 인 성능 수정으로 취급합니다.
이미지에 유용한 검색 및 리더 컨텍스트를 제공합니다.
관련 텍스트 옆에 그림을 넣고 짧고 설명적인 파일 이름을 선택합니다. 그 페이지에서 이미지의 목적을 위해 alt 텍스트를 작성하여 키워드 목록을 피하십시오. Google은 파일 이름을 가벼운 힌트로 묘사하고 주변 페이지 맥락을 사용하여 주제를 이해합니다; 단 하나의 파일 이름만이 관련성이나 순위를 설정하지 않습니다.
게시된 페이지의 실제 이미지 요청, 배열, 접근성 및 성능을 적절한 도구로 확인합니다. 버전을 비교하기 전에 조건과 결과를 기록합니다. 빠른 배달은 경험을 향상시킬 수 있지만 수입은 여전히 제안, 관객 및 완전한 전환 경로에 달려 있습니다.
수출 전에 출처를 계획하십시오.
캠페인 작업 흐름 가이드를 사용하여 어떤 이미지가 필요한지, 어떻게 검토 될 것인지, 그리고 완성 된 자산이 어떻게 배달될 것인지 결정합니다.
캠페인 이미지 작업 흐름을 따르십시오