# srcset

dev_seongjoo

이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? srcset 속성은 `` 태그에서 사용되는 속성으로, 웹 페이지에서 다양한 디바이스와 화면 크기에 맞는 이미지를 제공하는 데 사용됩니다. 이 속성을 사용하는 주된 이유는 다음과 같습니다: 1. 반응형 이미지 제공: 다양한 장치와 화면 크기에서 최적화된 이미지를 제공하기 위해 srcset 속성을 활용할 수 있습니다. srcset은 웹 개발자가 여러 이미지를 지정하고 각 이미지에 대한 크기 및 해상도를 지정할 수 있는 기능을 제공합니다. 이를 통해 디바이스의 화면 크기에 따라 적절한 이미지를 선택하여 다운로드할 수 있으며, 이는 대역폭 절약과 페이지 로딩 속도 향상에 도움이 됩니다. 2. 고해상도 디스플레이 지원: 일부 디바이스는 고해상도(Retina 디스플레이 등)를 지원합니다. 이러한 디바이스에서는 고해상도 이미지를 사용하여 선명하고 고품질의 이미지를 제공하는 것이

yhko1992

html img attribute를 통해 이미지 최적화를 할 수 있다. viewport 크기에 따라 다른 크기의 이미지를 서버에서 다운받게 가능! next js image도 이걸 바탕으로 최적화 한다. 더 자세한 내용은 아래 링크로 https://web.dev/learn/design/responsive-images/#sizes

cnsrn1874

Optimal Images in HTML를 번역한 글입니다. 피드백은 댓글로 부탁드립니다. 자 여러분은 멋진 페이지를 만들었고, 이제 배경 이미지를 넣으려 하는데... 잠깐! 이러면 여러가지 이유로 성능 최적화가 안된다는 걸 아셨나요? CSS에서 (보통) background-image를 피해야하는 이유 최적의 이미지 크기 정하기 SVG를 사용하는 경우를 제외하고, 요즘 기기들의 다양한 화면 크기와 해상도를 생각해 보면, 사이트의 방문자 모두가 동일한 이미지 파일을 받아야 하는 경우는 사실상 없습니다. 여러분 사이트는 스마트 워치에서도 작동하죠? (농담입니다… 제 생각에는요) 여러분은 "

parkcy92

반응형 이미지란? 웹브라우저, 모바일 화면에서 viewport의 크기, 해상도 등에 반응하여 이미지의 사이즈를 다르게 보여주는 것을 말함. 예를 들어 모바일 화면의 이미지를 그대로 노트북에 가져오면 저화질의 이미지를 보게되는데, 이런 현상을 방지하기 위해 노트북에서는 큰 이미지로 변환해 보여주는 것. 반응형 이미지를 사용하기 위한 방법 = srcset 이미지 태그에 srcset 속성을 넣어서 구현할 수 있다. srcset 내부에는 다양한 사이즈의 이미지를 생성할 수 있도록 width(픽셀 단위)을 작성하고 이름을 부여해 입력한다. 위의 예시의 경우 width가 1000px, 2000px, 30

yijaee

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 위키피디아, 반응형 웹 디자인 요즘 반응형 웹(이하 RWD)을 적용하지 않은 서비스가 있을까? RWD를 적용하는 게 아무짝에도 쓸모가 없는 경우가 아니면 아마 대부분의 서비스가 RWD를 적용해 사용자의 원활한 웹 접근을 지원하고 있을 것이다. RWD를 적용하는 방법에는 여러가지가 있지만 여기서는 그중에서도 가장 기본적인 것, 이미지를 적절하게 리사이징하는 방법에 대해 알아볼 것이다. ![RWD 예시](https://images.velog.io/images/yijaee/post/9