Image Optimization

이미지 최적화의 정의, 웹 성능에 미치는 영향, 피해야 할 실수를 설명합니다.

이미지 최적화는 사용 목적에 필요한 품질을 유지하면서 이미지를 전달하는 데 필요한 바이트를 줄입니다. 적절한 형식 선택, 표시 크기에 맞춘 크기 조절, 압축, 불필요한 메타데이터 제거, 필요할 때만 이미지 불러오기를 함께 사용합니다.

웹에서 최적화는 전달 방식까지 포함합니다. 반응형 이미지 마크업(srcset과 sizes 속성)은 브라우저가 화면에 맞는 파일을 고르게 합니다. 지연 로딩은 화면 밖 이미지의 로딩을 미루고, CDN은 가까운 위치에서 파일을 제공합니다.

결과는 파일 크기와, Google의 Core Web Vitals 지표 중 하나인 Largest Contentful Paint 같은 페이지 속도 지표로 측정합니다.

이미지 형식 변환

형식을 바꾸면 절감 효과가 가장 큰 경우가 많습니다. Image Converter는 브라우저에서 PNG, JPG, WebP 사이를 변환합니다.

최적화가 중요한 이유

웹 페이지에서 이미지는 대개 가장 큰 부분입니다. 크기가 큰 이미지는 모바일 네트워크에서 로딩을 늦추고, 방문자의 데이터를 사용하며, 페이지 속도 점수를 낮출 수 있습니다. 파일이 작으면 문서 저장소, 이메일 첨부, PDF 내보내기도 다루기 쉬워집니다.

최적화 기법

가장 큰 표시 크기에 맞춰 크기 조절. 예: 고밀도 화면에서는 CSS 너비의 2배
내용에 따라 형식 선택. 단색 UI는 PNG, 사진은 JPG 또는 WebP
손실 품질을 75-85 정도로 설정하고 확대한 부분을 비교
필요 없는 메타데이터는 제거하되, 색이 중요하면 색상 프로파일은 유지
접힘 아래의 이미지는 지연 로딩

스크린샷 최적화

너비 1440픽셀 창의 Retina 스크린샷은 너비가 2880픽셀입니다. 문서 페이지에서 이를 CSS 720픽셀로 표시한다면, 1440픽셀 파일은 2배 밀도 화면을 충분히 채우면서 픽셀 수는 4분의 1입니다.

공유용으로는 Temposhot에서 **JPG Export (Adjustable Quality)**를 선택하고 품질을 1-100(기본값 85)으로 설정합니다. 원본 사본은 **PNG Export (Lossless)**로 유지하십시오. Website Capture는 JPEG, PNG, WebP를 바로 저장합니다.

자주 하는 실수

작은 썸네일에 Retina 전체 캡처를 업로드함.
텍스트 스크린샷을 지나치게 압축해 글자가 번짐.
내용과 관계없이 모든 이미지를 한 형식으로 변환함.
유일한 사본을 최적화해 원본을 잃음.

지금 고칠 이미지가 있나요?

Image Compressor로 파일 크기를 줄이고, 먼저 Screenshot Resolution Checker로 픽셀 크기를 확인하십시오.

자주 묻는 질문

사이트의 스크린샷에 WebP를 써야 하나요?

대부분 비슷한 화질에서 PNG나 JPG보다 파일이 작고, 최신 브라우저가 지원합니다.

문서용 스크린샷은 얼마나 커야 하나요?

표시되는 CSS 너비의 약 2배이면 고밀도 화면을 채우면서 바이트를 낭비하지 않습니다.

출처

같은 스크린샷을 반복해서 찍고 계십니까?

Temposhot은 타이머에 맞춰 화면, 창 또는 영역을 캡처하고 결과를 PDF, 이미지, ZIP 또는 MP4로 내보냅니다. 무료 브라우저 도구는 단일 이미지만 다룹니다.

Mac용 다운로드 기능 보기