조아마시

쓸모 있는 상세페이지 만들기

웹개발/html 3

[HTML] <picture>, <source> 태그 사용 가이드

picture 소스 태그란?picture 태그는 HTML5에서 도입된 요소로, 다양한 화면 크기와 해상도에 맞춰 최적의 이미지를 제공하기 위해 사용됩니다. 즉, 사용자의 기기 환경에 따라 가장 적합한 이미지를 자동으로 선택하여 보여주는 역할을 합니다.왜 picture 태그를 사용해야 할까요?반응형 웹 디자인: 다양한 기기에서 웹사이트를 최적화하기 위해 필수적인 요소입니다.이미지 로딩 속도 향상: 불필요한 이미지를 로딩하지 않아 페이지 로딩 속도를 개선할 수 있습니다.이미지 품질 유지: 각 기기에 맞는 최적의 이미지를 제공하여 이미지 품질을 유지할 수 있습니다.picture 태그의 기본 구조 : picture 요소의 시작과 끝을 나타냅니다.: 다양한 이미지 소스를 정의합니다.media: 해당 소스..

웹개발/html 2024.08.07

avif 이미지 형식

AVIF (AV1 Image File Format)는 최근 주목받고 있는 차세대 이미지 파일 형식입니다. 기존의 JPEG, PNG 등의 포맷보다 훨씬 더 효율적인 압축 기술을 사용하여 이미지의 용량을 크게 줄이면서도 높은 화질을 유지할 수 있다는 것이 가장 큰 특징입니다.AVIF 파일의 탄생 배경과 목적기존 포맷의 한계: JPEG, PNG 등 기존 이미지 포맷은 이미지 품질과 파일 크기 사이에서 적절한 균형을 찾기 어려웠습니다. 특히 고화질 이미지를 작은 파일 크기로 압축하는 데 한계가 있었습니다.차세대 코덱 AV1의 등장: AV1은 구글을 비롯한 다양한 기업들이 공동으로 개발한 차세대 비디오 코덱으로, 기존 코덱보다 훨씬 뛰어난 압축 효율을 자랑합니다. AVIF는 이 AV1 코덱을 기반으로 이미지 압축..

웹개발/html 2024.08.07

WebP 이미지 형식

WebP 이미지 형식은 Google에서 개발한 차세대 이미지 포맷으로, 기존의 JPEG, PNG 등에 비해 압축률이 뛰어나 파일 크기를 크게 줄일 수 있는 것이 가장 큰 특징입니다. 웹 페이지의 로딩 속도를 향상시키고, 데이터 사용량을 절약하는 데 효과적이기 때문에 많은 웹 개발자들에게 주목받고 있습니다.WebP 탄생 배경웹 성능 향상: 웹 페이지의 로딩 속도가 느려 사용자 이탈이 증가하면서, 더욱 효율적인 이미지 압축 기술에 대한 필요성이 커졌습니다.모바일 시대 도래: 스마트폰과 태블릿 PC의 보급으로 모바일 인터넷 사용이 급증하면서, 데이터 사용량을 줄일 수 있는 이미지 형식에 대한 요구가 높아졌습니다.WebP의 주요 특징뛰어난 압축률: 동일한 화질을 유지하면서도 JPEG보다 평균 25% 이상, PN..

웹개발/html 2024.08.04
728x90