이 과정은 초급 및 고급 웹 개발자를 위해 만들어졌으며, 효율적으로 이미지 소스를 요청하고 렌더링하기 위한 기본사항부터 일반적인 이미지 형식이 서버에서 클라이언트로 전달되는 방법에 대한 세부정보에 이르기까지 모든 내용을 다룹니다. 이 과정에서는 품질을 저하시키지 않으면서 이미지의 최소 전송 크기를 달성하는 방법을 배웁니다(적어도 누구도 볼 수 없는 방식).
시리즈를 처음부터 끝까지 진행하여 현대 웹에서 이미지가 작동하는 방식을 전체적으로 이해하거나 일상 업무에서 사용할 특정 개념과 마크업 패턴에 대한 참고 자료로 사용할 수 있습니다.
웹 개발이 처음인 경우 마크업 사용 기본사항은 HTML 알아보기 과정, 기본 스타일 지정을 위한 CSS 알아보기 과정, 반응형 레이아웃에서 이미지가 렌더링되는 방식을 이해하려면 반응형 디자인 알아보기 과정을 확인하세요.
학습할 내용은 다음과 같습니다.
웹 이미지의 간략한 역사
1993년 이미지 요소로 시작한, 웹상의 이미지의 역사
주요 성능 문제
이미지 요청이 최대한 작고 성능이 우수한지 확인하는 방법을 알아봅니다.
벡터 이미지
웹에서 사용되는 벡터 이미지 형식인 SVG에 대해 알아보세요.
래스터 이미지
JPEG, GIF, PNG, WebP와 같은 래스터 이미지를 검색합니다.
이미지 형식: GIF
GIF 이미지 형식을 이해하고 이미지 인코딩 작동 방식을 설명합니다.
이미지 형식: PNG
어떤 경우에 PNG가 가장 좋은 이미지 형식인지 알아보세요.
이미지 형식: JPEG
웹에서 가장 일반적인 이미지 형식에 대해 알아보세요.
이미지 형식: WebP
WebP에 관해 알아보고 이 형식과 다른 형식의 차이점을 이해합니다.
이미지 형식: AVIF
AV1 이미지 파일 형식 (AVIF)은 오픈소스 AV1 동영상 코덱을 기반으로 하는 인코딩입니다.
반응형 이미지
반응형 이미지 자세히 알아보기
설명 구문
srcset 및 크기를 사용하여 이미지 소스 및 이미지 소스 사용 방법에 관한 정보를 브라우저에 제공합니다.
규범적 구문
사진 요소에 대해 알아봅니다.
압축 및 인코딩 자동화
개발 프로세스에서 고성능 이미지 소스를 원활하게 생성할 수 있습니다.
사이트 생성기, 프레임워크, CMS
WordPress와 같은 CMS와 기타 사이트 생성기를 통해 반응형 이미지를 더 쉽게 사용하는 방법을 알아보세요.
이미지 콘텐츠 전송 네트워크
이미지 CDN이 어떻게 이미지의 콘텐츠를 변환하고 최적화하는지 알아보세요.
결론
추가 리소스
이제 이미지를 학습할 준비가 되셨나요?