HTML내에서 이미지를 반영할 때 <img src="" alt="" width="" height=""> 이렇게 처리하거나 css로 사이즈나 추가적인 스타일을 지정하는 것이 일반적이었는데요.

최근엔 참 많이도 늘었네요. 

그런데 과연?

이런 정성을 기울이는 사이트가 얼마나 있을지...

어쨌거나 필요하다면 조금씩 적용해 가겠지요?

<picture>
  <source 
    type="image/avif"
    srcset="/image.avif?width=100 100w, /image.avif?width=200 200w, /image.avif?width=400 400w, /image.avif?width=800 800w" />
  <source 
    type="image/webp"
    srcset="/image.webp?width=100 100w, /image.webp?width=200 200w, /image.webp?width=400 400w, /image.webp?width=800 800w" />
  <img 
    src="/image.png"
    srcset="/image.png?width=100 100w, /image.png?width=200 200w, /image.png?width=400 400w, /image.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 16/9"
    loading="lazy"
    decoding="async"
    alt="웹에 최적화된 이미지를 반영하는 방법"
  />
</picture>

 

 

그누보드강좌/영카트강좌 - 기초부터 적용까지 체계적인 영상강좌

프로그래밍 실력 확인하기

심심할 때 게임하자
PHP메뉴얼

By 웹학교