# picture
[TIL] 웹 화면 최적화 방법
📍 Image Lazy Loading 웹 페이지 성능을 향상시키기 위해 사용되는 기술 중 하나로, 웹 페이지에서 이미지를 불러올 때 페이지가 처음 로드될 때 모든 이미지를 동시에 불러오지 않고 필요한 이미지를 필요한 시점에 불러오는 방식임. 즉, 페이지 안에 있는 이미지들이 실제로 화면에 보여져야 할 때 로드되도록 하는 방식으로, 웹 페이지 내에서 바로 불러오지 않고 그 시점을 뒤로 미루는 것임. 이렇게 하면 페이지의 초기 로딩 시간을 단축하고, 사용자 경험을 향상시킬 수 있음. (웹 성능 및 디바이스 내 리소스 활용도 및 이와 연관된 비용을 줄일 수 있음) 🌸 [추가] Lazy Loading이란? 페이지 내에서 사용되는 리소스가 실제로 필요할 때까지 불러오는 그 시점을 미루는 것으로, Image Lazy Loading은 이 방식의 한 종류임. 페이지를 로드하자마자 리소스를 불러오는 기존 방식 대신, 실제로 사용자 화면에 보여질 필요가 있을 때
[번역] HTML에서 이미지 최적화하기
Optimal Images in HTML를 번역한 글입니다. 피드백은 댓글로 부탁드립니다. 자 여러분은 멋진 페이지를 만들었고, 이제 배경 이미지를 넣으려 하는데... 잠깐! 이러면 여러가지 이유로 성능 최적화가 안된다는 걸 아셨나요? CSS에서 (보통) background-image를 피해야하는 이유 최적의 이미지 크기 정하기 SVG를 사용하는 경우를 제외하고, 요즘 기기들의 다양한 화면 크기와 해상도를 생각해 보면, 사이트의 방문자 모두가 동일한 이미지 파일을 받아야 하는 경우는 사실상 없습니다. 여러분 사이트는 스마트 워치에서도 작동하죠? (농담입니다… 제 생각에는요) 여러분은 "
[220720] 오늘의 배움(TIL) - HTML / CSS / CLI
🔸 HTML > - address 태그 사용시 주의할 점은 무엇인가? > > : 나타내는 값이 주소여도 main과 같은 본문 영역에 사용하면 안 됨, footer에 부가 정보를 제공하는 목적으로 사용 > - small 태그는 어떤 경우에 사용하는가? > > : 원래는 크기가 작은 글자의 마크업시 사용했지만, 요즘은 footer의 저작권 정보와 같이 부가적인 정보 마크업시 사용 > - footer에 헤딩 태그를 사용하는 것은 적절한가? > > : 보편적으로 footer는 사이트를 마무리하면서 부가적인 정보를 제공하는 역할을 하기 때문에, 헤딩 태그를 사용하지 않는 편임 : 그러나 footer에도 의미 있는 제목을 설정해야 하는 경우 사용해도 무방함 > - a 태그의 href 값으로 이메일 주소를 연결한 경우, 클릭하면 메일 소프트웨어를 실행시키는 방법은 무엇인가? > > : href 값 앞에
이미지 마크업 최적화
패스트캠퍼스 강의를 정리한 내용입니다. "The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명" 이미지 포맷 jpg/png : (과거의 유산) 모든 브라우저에서 지원하는 폴백 이미지 webp : (알파 채널, IE 미지원) jpg/png 대비 30-70% 수준의 용량 avif : (알파 채널, 크롬/삼성인터넷 지원) 저용량+고품질 _폴백(fallbacks)이란? 브라우저별로 지원 사양이 다르기 때문에, 의도한 기능이 지원되지 않을 경우를 대비하여 이와 유사하게 동작하도록 만드는 방법 _ picture, source, img 요소 사용자 환경에 알맞는 최적의 이미지를 화면에 노출하기 위해 사용 사용 시, 이미지 전송 비용 및 사용자 데이터 요금을 절약하고 빠른 로딩 속도를 통해 UX 개선 가능 이미지 제공 로직 picture 요소 [type] 분기 type은 조건절 웹브라우저는 picture 내 여러 이미
211012 TIL picture 태그 이해하기(학습 82일차)
Must Remember picture 요소는 0개 이상의 source요소와 하나의 img요소로 구성된다. 브라우저는 source 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 source요소를 사용하고, 나머지는 무시한다. 이 때 브라우저를 위한 하위 호환성을 위해 img는 가장 마지막에 위치해야 한다. 아래의 예제를 참고하자. > IE에서는 지원하지 않으니 주의할 것.
반응형 웹에서 요소 리사이징하기
반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 위키피디아, 반응형 웹 디자인 요즘 반응형 웹(이하 RWD)을 적용하지 않은 서비스가 있을까? RWD를 적용하는 게 아무짝에도 쓸모가 없는 경우가 아니면 아마 대부분의 서비스가 RWD를 적용해 사용자의 원활한 웹 접근을 지원하고 있을 것이다. RWD를 적용하는 방법에는 여러가지가 있지만 여기서는 그중에서도 가장 기본적인 것, 이미지를 적절하게 리사이징하는 방법에 대해 알아볼 것이다. ![RWD 예시](https://images.velog.io/images/yijaee/post/9