<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를 많이 사용합니다. 인라인 형태로는 로 구현할 수 있으나 모든 브라우저에서 호환되진 않습니다. 그래서 자바스크립트 코드를 활용해서 의도적으로 구현하기도 합니다.

큰 사이즈의 이미지를 캐싱 없이 빠르게 가져오는건 힘듭니다. 그래서 lazy load를 많이 사용합니다. 인라인 형태로는 로 구현할 수 있으나 모든 브라우저에서 호환되진 않습니다. 그래서 자바스크립트 코드를 활용해서 의도적으로 구현하기도 합니다.

[Lazy Loading Css to drastically Improve Page Speed

Loading big CSS file at the end of the document makes sense because some times CSS takes up a lot of time to load. Learn how to defer CSS loading which makes your website super-fast. PageSpeed is a tool by Google where you can find the website speed.

https://blog.webjeda.com/lazy-load-css/](https://blog.webjeda.com/lazy-load-css/) 

Lazy load를 사용하는것은 언제나 괜찮은 방법이지만, 개인적으로는 CDN을 사용해 이미지를 캐싱해서 사용하길 권하고 싶습니다. AWS 사용하시는 분들은 Cloud Front를 S3와 연결해서 쉽게 사용하실수도 있고, 그 밖에도 CDN을 직접 연결할 방법은 많으니 느리게 로딩하는 것 뿐 아니라 이미지를 준비시켜두는 것도 좋습니다.