<img> 태그 이해하기
배우면 정말 쉬운 이미지 태그
1. 크기 다루기
이미지 태그는 기본적으로 불러오는 이미지의 크기(intrinsic size)를 기본으로 합니다. 그렇기 때문에 이미지 태그만 가지고 사용하기보다는 컨테이너를 만들어 크기를 정해주는게 좋습니다.
이처럼 컨테이너를 만들어 이미지 태그를 넣은 후에 CSS를 통해 사이즈를 관리합니다.
width: 100%만 넣게되면 이미지는 최대 크기를 가지지 못합니다. 우리는 컨테이너 크기에 맞추고 싶기 때문에 max-width: 100% 를 통해 사이즈를 원본 이미지 크기 이상으로 키울 수 있습니다.
2. 이미지 비율
이미지 태그는 일반적으로 폭을 기준으로 사이즈를 다룹니다. 이때 비율이 깨지는 경우가 발생할 수 있는데, height값을 의도적으로 넣어줄 때입니다. height: auto; 를 해주게 되면 폭에 따라 이미지의 높이가 조절되어 원본 비율을 유지할 수 있습니다.
3. 특별한 비율
가장 널리 알려진 UI 컴포넌트를 꼽자면 카드가 있을 겁니다. 유튜브, 페이스북, 인스타그램 등 모든 웹서비스에는 카드를 통해 컨텐츠를 표기하는 방법이 쓰이고 있습니다. 이때 카드는 항상 일정한 비율로 이미지를 보여줍니다. 인스타그램은 1:1, 유튜브는 1.78:1(16대 9) 비율을 사용합니다.
사용자가 업로드 하는 이미지나 내가 업로드한 이미지의 크기와 비율이 동일하지 않을 때 어떻게 비율을 똑같이 만들 수 있을까요?
마찬가지로 컨테이너로 이미지를 감싸줍니다. 그 다음 아래의 CSS를 사용해봅시다.
컨테이너의 기본 높이를 0으로 제한하고, padding-bottom만으로 높이를 조정합니다. 컨테이너 안에 있는 이미지 태그는 항상 컨테이너를 꽉 채우도록 CSS를 넣습니다. 이렇게 되면 컨테이너에서 설정한 padding-bottom에 따라 자신이 원하는 비율의 이미지를 만들 수 있습니다.
CSS를 읽을 줄 아신다면 모든 부분이 이해되겠지만 56.25%는 어떤 의미일까요? 이 값은 16:9 비율을 말하는 것인데요, width를 100%라 할 때 높이가 56.25%일 때 16:9비율이 나오게 됩니다. 계산 방법은 9/16을 하면 됩니다. 마찬가지로 4:3 비율, 1:1 비율은 어떻게 할 수 있을까요? 각각 75%, 100%의 padding-bottom 값을 주면 만들 수 있습니다.
4. 이미지 최적화
CSS 뿐 아니라 프론트엔드 코딩까지 하실 수 있다면 상황에 따라 다른 이미지를 불러오는 것도 로딩 속도 개선에 큰 도움을 줍니다. 첫번째 방법은 프론트엔드 코딩을 필요로 합니다. 이미지 에셋을 x2, x3 와 같이 여러 사이즈로 저장해두고 디바이스의 폭에 따라 가장 최적화된 이미지를 불러옵니다. 두번째 방법은 웹에 최적화된 이미지 파일을 가져오는 것입니다. source 태그 등은 webp와 같은 웹 최적화 이미지를 불러올 때 사용합니다. 그래서 최적화가 잘된 사이트의 경우 picture 태그와 source, img 태그가 함께 묶여 상황에 따라 적절한 이미지를 가져오는 것을 확인할 수 있습니다.
5. 텍스트를 병기해야할 때
어떤 경우 이미지 위에 텍스트가 올라가야할 수 있습니다. 이때는 이미지 태그를 쓰는 것보단 div와 같은 태그에 background-image 속성을 넣어 이미지를 다루는게 더 나을 수 있습니다. 만약 이미지 태그를 사용하면서 그 위에 텍스트를 올린다면 해당 텍스트를 구성하는 엘리먼트는 position: absolute 또는 relative 등을 통해 위치를 정해줄텐데, absolute의 경우 좌우 폭이 바뀌는 등의 환경에 다루기 까다롭고, relative는 다른 엘리먼트에 영향을 받아 이상한 위치로 갈 수도 있습니다.
6. 미디어 쿼리
이미지 태그가 미디어 쿼리에 영향을 받게 짜는건 현명하지 않습니다. 이미지 태그는 컨테이너에 반응하도록 CSS를 짜고, 컨테이너가 미디어 쿼리에 반응하는게 좋습니다.
7. lazy load와 CDN
큰 사이즈의 이미지를 캐싱 없이 빠르게 가져오는건 힘듭니다. 그래서 lazy load를 많이 사용합니다. 인라인 형태로는 <img loading="lazy" />로 구현할 수 있으나 모든 브라우저에서 호환되진 않습니다. 그래서 자바스크립트 코드를 활용해서 의도적으로 구현하기도 합니다.
큰 사이즈의 이미지를 캐싱 없이 빠르게 가져오는건 힘듭니다. 그래서 lazy load를 많이 사용합니다. 인라인 형태로는 <img loading="lazy" />로 구현할 수 있으나 모든 브라우저에서 호환되진 않습니다. 그래서 자바스크립트 코드를 활용해서 의도적으로 구현하기도 합니다.
Lazy load를 사용하는것은 언제나 괜찮은 방법이지만, 개인적으로는 CDN을 사용해 이미지를 캐싱해서 사용하길 권하고 싶습니다. AWS 사용하시는 분들은 Cloud Front를 S3와 연결해서 쉽게 사용하실수도 있고, 그 밖에도 CDN을 직접 연결할 방법은 많으니 느리게 로딩하는 것 뿐 아니라 이미지를 준비시켜두는 것도 좋습니다.
