웹용 이미지 온라인 무료 최적화

웹 이미지는 세 가지 요소가 맞을 때 빠르게 로드됩니다: 픽셀 크기, 포맷, 파일 용량. 아래 답변에서 이 세 가지와 여러분의 웹사이트가 처리하는 부분까지 모두 다룹니다.

웹사이트 이미지는 어떤 크기여야 할까요?

페이지에서 이미지가 표시되는 가장 넓은 너비에 맞게 크기를 조정하세요. 이미지 크기를 확인한 다음 최대 크기를 설정하세요. 변경하지 않으면 긴 변을 1920px로 제한하며, 더 작은 이미지는 절대 확대하지 않습니다. 추천 시작 너비:

• 전체 너비 히어로 또는 배너: 1920px 너비.
• 블로그 또는 기사 이미지: 텍스트 칼럼 너비로, 보통 800~1200px.
• 썸네일 및 상품 카드: 400~600px.
• 고밀도 휴대폰 및 노트북 화면: 표시되는 너비의 최대 2배까지.

WebP와 AVIF, 어떤 포맷을 써야 할까요?

두 포맷 모두 JPG보다 훨씬 작은 사진 파일을 만들며, 현재 모든 주요 브라우저 버전에서 둘 다 표시됩니다. 이미지가 어디에 사용되는지에 따라 선택하세요:

• WebP: Google에 따르면 손실 WebP 파일은 동일한 품질의 JPG 파일보다 25~34% 더 작습니다. 압축기의 "이미지 저장 형식"에서 WebP를 선택하세요.
• AVIF: 종종 더 작지만 생성 속도가 느립니다. 이미지 리사이저에서 AVIF로 저장하세요.
• JPG: 이메일과 구형 앱을 포함해 어디서나 열립니다. 플랫폼이 WebP를 지원하지 않을 때 사용하세요.
• PNG: 로고, 아이콘, 선명한 가장자리나 투명 영역이 있는 스크린샷에 사용하세요.

이미지가 LCP와 Core Web Vitals에 어떤 영향을 미치나요?

Largest Contentful Paint(LCP)는 화면에서 가장 큰 요소가 로딩을 완료하는 시점을 측정하며, 많은 페이지에서 이는 사진입니다. Google은 LCP가 2.5초 이하면 양호하다고 평가합니다. 파일이 작을수록 더 빨리 다운로드됩니다. 다음 개선 사항들은 이 도구가 아닌 사이트 코드에 해당합니다:

• 페이지 상단의 메인 이미지는 지연 로딩하지 마세요. 바로 로드되게 하세요.
• HTML에서 모든 이미지에 너비와 높이를 지정해, 로딩 중 페이지가 흔들리지 않게 하세요.
• srcset을 사용해 휴대폰에 더 작은 이미지를 제공하거나, 사이트 빌더가 이를 처리하게 하세요.

SEO를 위해 이미지를 어떻게 최적화하나요?

검색 엔진은 텍스트를 통해 이미지를 이해합니다. 이 도구는 크기와 포맷을 처리하며, 나머지는 게시하는 곳에서 이루어집니다:

• 이미지가 보여주는 내용을 설명하는 대체 텍스트를 작성하세요.
• blue-running-shoe.webp처럼 짧고 명확한 파일명을 사용하세요. 고급 설정에서 "파일명 접미사"를 지우면 원래 이름을 유지할 수 있습니다.
• 페이지 하단의 이미지는 지연 로딩하세요. 많은 사이트 빌더가 이를 자동으로 처리합니다.