다음은 필요한 이미지 파일을 세팅하는 과정에서 고려한 사항이다.
이미지 포맷
아이콘은 svg, png, jpg, ... 어떤 포맷으로 할까?
간단한 아이콘은 svg가 용량이 작지 않을까?
모든 이미지를 svg와 png(2배 사이즈)로 다운받아서 각각 테스트했다.
크롬 개발자 도구-네트워크 툴을 보니, png가 대부분 용량이 작았다.
놀라운 점은 svg 용량이 적은 경우도, png time이 빨랐다.
png파일 1.4kB
svg파일 886 B
용량과 time이 비례하지 않는 이유는 아직 조사하지 못했다.
- webp, avif는 호환성이 떨어지므로, 단독으로 사용하지 않기로 한다.
- 투명 배경이 지원되지 않는 jpg를 사용해도 괜찮은 이미지를 선별하는 건, 우선순위에서 떨어졌기에 일단 패스했다.
- png로 다운받기로 정했다.
jpeg, png 장점 모두 가진 webp 사용하고 싶다면?
- webp보다 avif가 더 좋음
- 프로젝트 리팩토링/디벨롭 단계에서 적용하고 싶다.
- 크로스 브라우징을 위해 다음과 같이 사용.
- 레거시 브라우저에선 picture을 span으로 변경(모르는 태그 나오면)
<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.avif" type="image/avif">
<img src="img.jpeg" alt="img">
</picture>점진적 향상기법
예전 디바이스, 브라우저에서 동작할 수 있는 기능 구현,
최신 브라우저에선 최신 기술 제공
이미지 사이즈
요즘은 레티나 디스플레이가 많다.
레티나 디스플레이란, 화소 밀도가 높은 화면을 말한다.
각 기기의 화소 밀도가 제각각이라면, 어느 기기에 맞춰야 좋을까?
크게 두 가지 방법이 있다.
1. 레티나를 고려해서 큰 사이즈 사용
- 보통 2x까지 고려하여 두 배 사이즈의 이미지 사용(2x까지 깨지지 않음)
사실 설명할 필요도 없이 단순하다.
두 배 사이즈 이미지를 사용하고, 화면에 보이는 사이즈는 CSS로 조절하면 된다.
이때 height 속성은 되도록 사용하지 않는 게 좋다.
본인은 보통 width 속성과, 가로세로 비율을 정하는 aspect-ratio 속성을 사용한다.
width도 px 고정값을 주기 보단, 되도록 100%를 주고 부모 컨테이너 사이즈로 조절되게 하며, 필요에 따라 max-width / min-width를 설정한다.
aspect-ratio는 지원하지 않는 브라우저 버전이 있기 때문에, 해당 버전을 지원해야 할 경우 padding-top 속성을 사용하면 된다. 많이 사용하는 방법이다.
.lion {
position: relative;
height: 0;
padding-top: 50%; /* 세로/가로 비율 */
}
.lion img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}2. 기기에 따라 적절한 이미지 로딩
- 이 또한 리팩토링/디벨롭 단계에서 적용하고 싶다.
1. 화소 밀도에 따른 이미지 로딩
<img
srcset="img-2.png 2x,
img-3.png 3x"
src="img-1.png"
alt="img"
>2. 여러 이미지 중 브라우저가 선택해서 로딩
<img
srcset="img-3.png 900w, <-- 너비. 1w = 1px -->
img-2.png 600w,
img-1.png 300w"
src="img-1.png" <-- srcset 사용 불가한 브라우저 대비 -->
alt="test"
>