[CSS] 반응형 이미지 처리 후기

출처: https://velog.io/@yijaee/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%97%90%EC%84%9C-%EC%9A%94%EC%86%8C-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95%ED%95%98%EA%B8%B0

<img/> 태그는 제외하고 작성

picture & source

---

<picture>
	<source 
    	className='banner__img'
        srcSet={`${MobileAvif} 767w, ${TabletAvif} 1199w, ${DesktopAvif} 1920w`}
        src={DesktopAvif}
        sizes="(max-width: 768px) 767px, (max-width: 1199px) 1199px, (max-width: 1920px) 1920px"
        type="image/avif"
    />
</picture>

최초 처리

가장 큰 이미지를 가져 온 이후에 작은 이미지를 가져오지 않는걸 감안해도
제대로 동작 되지않음

<picture>
	<source 
		className='banner__img'
    	media='(max-width: 768px)'
    	srcSet={MobileAvif}
    	src={MobileAvif}
    	type="image/avif"
    />

	<source 
    	className='banner__img'
        media='(max-width: 1199px)'
        srcSet={TabletAvif}
        src={TabletAvif}
        type="image/avif"
    />

	<source 
    	className='banner__img'
        media='(max-width: 1920px)'
        srcSet={DesktopAvif}
        src={DesktopAvif}
        type="image/avif"
    />
</picture>

위 코드로 사용 시 정상동작함 브라우저 변화에 맞게 이미지가 바뀜
다만, 이미지 캐시가 되지않고 리사이징 될떄마다 이미지를 다시 불러오고있음

최적화에 좋지않음

media & background-image

---

.banner {

    background-repeat: no-repeat;
    background-size: contain;

    @include desktop {
        width: 1920px;
        height: 762px;
        background-image: url('../../../assets/images/bg/PC.png');

        @supports (background-image: url('../../../assets/images/bg/PC.webp')) {
            background-image: url('../../../assets/images/bg/PC.webp')
        }

        @supports (background-image: url('../../../assets/images/bg/PC.avif')) {
            background-image: url('../../../assets/images/bg/PC.avif')
        }
        
    }

    @include tablet {
        width: 1199px;
        height: 678px;
        background-image: url('../../../assets/images/bg/Tablet.png');

        @supports (background-image: url('../../../assets/images/bg/Tablet.webp')) {
            background-image: url('../../../assets/images/bg/Tablet.webp')
        }

        @supports (background-image: url('../../../assets/images/bg/Tablet.avif')) {
            background-image: url('../../../assets/images/bg/Tablet.avif')
        }
    }

    @include mobile {
        width: 767px;
        height: 655px;
        background-image: url('../../../assets/images/bg/Mobile.png');

        @supports (background-image: url('../../../assets/images/bg/Mobile.webp')) {
            background-image: url('../../../assets/images/bg/Mobile.webp')
        }

        @supports (background-image: url('../../../assets/images/bg/Mobile.avif')) {
            background-image: url('../../../assets/images/bg/Mobile.avif')
        }
    }

}

css에서 media, background 로 처리
picture 을 사용했을때의 리사이징 마다 이미지를 불러오지않아

최종 위 코드를 사용