Lighthouse 대응으로 image 태그 이용시의 주의점

전제

반응형 대응하는 사이트

최근 사이트의 Lighthouse 대응으로, 화상 주위에 몇개의 주의점이 있어, 그쪽을 정리해 보았습니다.

alt 없음

<%= image_tag "sample.png", alt: 'sample image' %>

Defer offscreen images

첫 번째 뷰가 아닌 이미지는 로딩 레이지로 스크롤하여 이미지를 로드합니다.

<%= image_tag "sample.png", alt: 'sample image', loading: 'lazy' %>

Image elements do not have explicit width and height

이미지의 width와 height는 설정하고 이미지가 로드될 때까지 영역을 취합니다.

<%= image_tag "sample.png", alt: 'sample image', loading: 'lazy', width: 100, height: 100 %>

Properly size images

실제의 화상 사이즈는 표시하고 있는 테두리의 화상 사이즈보다 4KB 이상 큰 경우는 경고된다

예를 들어, 표시 폭 30px의 테두리로 300x200의 화상을 표시하면 에러가 된다



이 경우에는 표시하고있는 프레임과 함께 30px 너비의 이미지를 준비하는 것이 좋습니다.

Retina 대응

해상도가 높은 디바이스 증가하고 있어, 2x의 화상을 준비해, srcset나 picture tag로 대응

<%= image_tag "sample.png", alt: 'sample image', loading: 'lazy', width: 100, height: 100, srcset: 'sample.png 1x, [email protected] 2x' %>

최근 3x의 스마트폰도 나오고, 향후 3x의 이미지도 대응하는 것이 좋을지도 모릅니다

PC와 스마트폰으로 표시하는 이미지의 종횡비가 다른 경우

picture 태그는 종횡비가 다른 경우는 CLS의 문제가 있어, 현상은 사용할 수 없는 것 같습니다.


이미지 이름 
폭
높이


sample_pc.png
1200년
300

sample_sp.png
300
300


이 경우는 picture로 하면 PC의 표시가 이상해질 가능성이 있다

<picture>
  <%= tag :source, { media: '(min-width: 769px)', srcset: image_url('sample_pc.png') } %>
  <%= image_tag 'sample_sp.png', width: 300, height: 300 %>
</picture>

너무 좋은 방법을 찾을 수 없으며 CSS media query로 전환

<%= image_tag 'sample_pc.png', class: 'pc-image', width: 1200, height: 300 %>
<%= image_tag 'sample_sp.png', class: 'sp-image', width: 300, height: 300 %>