내가 이제까지 WP Adminify's 마케팅 사이트 was't 캐싱 플러그인 또는 CDN 비틀기에 출하 한 가장 큰 성능 승리. 그것은 하나의 이미지를 삭제 했다. 우리의 오래 된 영웅은 & quot;full quality"에서 내보낸 2,400px PNG 스크린 샷 I'd 는 PNG 가 선명 한 의미 라고 고집 하 게 믿 었 기 때문에. 그 하나의 파일은 1,4 MB 였다. 4G 이상의 중간 범위 안 드 로이드에서 가장 큰 만족 페인트 요소-그리고 그것은 LCP 를 약 4,1 초로 끌고 있었다. 나는 84 KB 로 교체 했다 웹P 실제 디스플레이 폭과 LCP 에서 같은 오후 1,9s 아래로 떨어졌다. 코드 없음. 그냥 작은 그림.
That's 이미지 SEO 에 대한 좌절감을. It's 이국적인하지 않습니다. 이미지는 일반적으로 페이지에서 가장 무거운 물건 - 종종 전체 바이트의 절반에 가까운 - 아직 우리 대부분은 나중에 생각으로 그들을 취급. 우리는 CMS 에 카메라 - 원본을 드롭,타입 "screenshot" alt 필드에,그리고 이동. 그런 다음 우리는 왜 궁금해 핵심 웹 바이탈 검색 콘솔에서 보고하면 모바일에서 빨간색이 흘러나옵니다.
이 가이드는 내가 실제로 Toolz.dev 및 클라이언트 사이트에서 실행 하는 체크리스트,이 물건을 배송 하는 사람의 관점에서 작성. I'll 무료 도구가 무엇을 하 고-그만큼 중요 한-그들이 don't.에 모든 이미지 도구에 대 한 정직 Toolz.dev 브라우저에서 완전히 실행됩니다 <canvas>그래서,당신이 드롭 아무것도 아무데도 업로드 얻을. 그 워크 플로우에 대한 실제 결과를 가지고,어떤 좋은,하나 성가신. We'll 모두 얻을.
TL;DR: 그것의 진짜 전시 폭에 이미지 크기를 먼저 재기하고십시오,그 후에 압축하고십시오,그 후에 현대 체재를 봉사하십시오. 실제로 that's 3 개의 통행: 이미지 크기 조정 픽셀 크기를 자르려면 이미지 압축 바이트를 짜내기 위해, 그리고 포맷 변환기 webp 를 얻으려면. Add
width/height레이아웃 이동을 중지하고,사람이 큰 소리로 말할 대체 텍스트를 작성하고,접기 아래의 모든 것을 게으르게로드하는 속성. 그렇게하면 LCP 와 CLS 가 모두 향상됩니다 - 두 개의 이미지 중심 코어 웹 바이탈 Google 은 실제로 순위를 매 깁니다.
SEO에서 이미지가 왜 그렇게 중요한가요?
3 개의 핵심 웹 Vitals 의 2 개는 변장에 있는 이미지 문제이다. 가장 큰 Contentful 페인트는,대부분의 내용 페이지에,그것의 다운로드를 끝내는 영웅 이미지이다. 누적 레이아웃 이동은 아주 수시로 이미지 적재 늦게이고 선 아래로 원본을 밀어서 이다. 둘 다 확인되는 순위 입력이고,둘 다 당신이 이미지를 더 잘 취급해서 고치는 것 - 내용을 더 써서 아닙니다.
There's 두번째 소통량 채널 사람들은 잊는다: Google 심상. 전자 상거래,조리법, 여행,및 디자인 위치의 많은 것을 위해,심지어 그것의 5 분의 1 이 이미지 수색 유기 방문의 의미심장한 조각,때때로 이다. 저 소통량은 크롤러가 읽을 수 있는 것에 전부 의존한다 - 파일 이름,대체 원본,주변 사본,심지어 심상이 빨리 색인을 붙이기 위하여 충분히 작다 조차.
그리고 there's 지루하지만 진짜 하나: 대역폭 비용과 인내심을 비용. 3 메가바이트 이미지를 배송하는 페이지는 헤드 라인을보기 전에 미터 연결에 모바일 사용자를 반송. 빠른 페이지는 사람들을 유지, 및 참여, 구글은 그것을 측정하지만, doesn't 상처.
실제로 어떤 이미지 형식을 사용해야합니까?
형식 선택은 대부분의 절감 효과가 있는 곳이며 형식 전쟁으로 인해 소리가 나는 것보다 규칙이 더 간단합니다.
JPEG 는 사진 - 매끄러운 그라데이션과 수천 가지 색상의 모든 것을위한 것입니다. It & # 39;s 손실,이는 정확히 사진에 원하는 것입니다. 품질 75 – 85 에서 압축은 일반 뷰어에 보이지 않으며 파일은 원본의 일부입니다. Don & # 39;t 는 하드 에지,텍스트 또는 투명도가있는 모든 것에 사용합니다.
PNG 는 무손실입니다. 스크린 샷,로고, 다이어그램,평평한 색상 영역이나 투명도가있는 모든 것에 사용하십시오. 캐치: 사진의 경우 PNG 는 JPEG 에 비해 우스꽝스럽게 큰 파일을 생성합니다. 내 1,4 MB 영웅 실수는 정확히 이것이었습니다 - 사진 같은 스크린 샷이 PNG 에 강요되었습니다.
웹P 는 2026 년의 실용적인 기본값입니다. 손실과 무손실을 모두 수행하고 투명성과 애니메이션을 지원하며 일반적으로 일치하는 품질에서 JPEG 보다 25 – 34% 작게 착륙합니다. 브라우저 지원은 이제 보편적입니다. 이것은 내가 거의 모든 것을 변환하는 형식입니다.
아비프 훨씬 더 열심히 압축 - 종종 의미있는 WebP 보다 작은 - 때문에 it's AV1 비디오 코덱에 내장. It's 훌륭한 형식. 하지만 난 여기 당신과 똑바로해야, 가이드의 많은 때문에 (이 문서를 대체 초안을 포함) "그냥 AVIF"로 변환 온라인 도구와, 그리고 that's 브라우저 캔버스 인코딩이 작동하는 방법이 아닙니다.
SVG 는 벡터를 위해 입니다: 아이콘,로고, 간단한 삽화. 그것은 무한하게 가늠하고 작게 체재합니다. It's 는 사진을 위해 쓸모 없습니다.
AVIF 경고는 아무도 언급하지 않습니다
Here's 정직한 비트. Toolz.dev's 포맷 변환기 수출 PNG, JPEG 또는 WebP- 그리고 그 세 개만. 그것은 & # 39;t AVIF 를 출력하고,대부분의 브라우저 내 변환기도 출력 할 수 없습니다. 그 이유는 기술적입니다: 도구는 이미지를 a 에 그립니다 <canvas> 그리고 전화 canvas.toBlob('image/webp', quality). the browser's canvas encoder ships JPEG,PNG, and WebP; AVIF 인코더를 발송하지 않습니다. 그래서 AVIF 를 캔버스에서 짜낼 방법이 없습니다,full stop.
당신은 여전히 할 수 있습니다 피드 AVIF 파일 - 브라우저는 AVIF를 통해 행복하게 디코딩합니다 new Image()따라서 AVIF 드롭인은 캔버스에 잘 렌더링됩니다. can't만 다시 꺼낼 수 있습니다. It's는 디코드인, 인코딩아웃 비대칭성을 가지며 사람들을 끊임없이 넘어뜨립니다.
그래서 내 실제 조언: WebP 단계에 대한 포맷 변환기를 사용하여 승리의 95%를 커버하는 하나입니다. 당신이 위에 AVIF 를 원한다면,와 함께 빌드 파이프 라인에서 생성 sharp, avifenc또는 Squoosh's 오프라인 인코더 - that's AVIF가 어쨌든 속하는 곳, 인코딩이 느리고 don't가 모든 이미지에 대해 손으로 수행하기를 원하기 때문입니다.
| 포맷 | 위한 최고의 | 손실? | Toolz.dev 변환기는 그것을 출력할 수 있습니까? |
|---|---|---|---|
| JPEG | 사진들 | 예 | 예 |
| PNG | 스크린샷, 로고, 투명도 | 아니요 | 예 |
| 웹P | 웹의 거의 모든 것 | 둘 다 | 예 |
| 아비프 | 무거운 이미지에 최대 압축 | 예 | 아니요 - 빌드 도구를 사용하세요 |
| SVG | 아이콘, 로고, 벡터 아트 | N/A | 아니요(캔버스가 아닌 벡터) |
품질을 파괴하지 않고 이미지를 어떻게 압축합니까?
제가 가장 많이 보는 실수는 잘못된 것을 잘못된 순서로 압축하는 것입니다. 800px 로 표시되는 4000px 이미지를 압축하는 것은 포장할 필요가 전혀 없었던 여행 가방을 진공 밀봉하는 것과 같습니다. 먼저 크기를 조정하고 두 번째로 압축하십시오. 항상.
그래서 워크플로는: open 이미지 크기 조정를,이미지가 실제로 렌더링할 가장 큰 크기로 너비를 설정합니다 (레이아웃 확인 - 블로그 본문 이미지는 종종 1920 년이 아니라 720–800px 입니다). 리사이저는 대상 상자 안에 맞으며 늘이거나 자르지 않으므로 화면 비율이 안전합니다. 그런 다음 해당 출력을 가져갑니다 이미지 압축 그리고 당신이 다만 간신히 말할 수 있을 때까지 질을 아래로 당기십시오 - 보통 사진을 위해 78–82. 당신이 투입하기 전에 가득 차있는 급상승에 미리보기; 인공물은 그라데이션과 피부 색조에서 숨기고, 썸네일에서 아닙니다.
고정시킬 것이다 1 개의 수: 사진 내용을 위해,질 80 는 지루한,믿을 수 있는 응답입니다. I've A/B'd 80 에 대하여 90 에 진짜 제품 탄에 그리고,좋은 감시자에 100%년 급상승에,대부분의 사람들은 can't 그것을 부릅니다. 그러나 80 는 수시로 40% 더 작습니다. 대략 60 의 밑에 당신은 매끄러운 지역에 있는 blocky 인공물을 보는 것을 시작합니다,그래서 that's 는 작은 축소판 이외에 무엇이든을 위한 지면을.
당신을 혼란스럽게 할 두 가지 브라우저 gotchas
이 두 가지 모두 실제 디버깅 시간이 필요하므로 무료로 배우십시오.
투명 PNG → JPEG 는 배경이 흰색이 아닌 검은색으로 변합니다. 나는 한 번 JPEG 에 투명한 로고를 개조하고 투명한 지역은 단단한 검정 나왔다. 나는 공구가 끊긴 가정하고 그것을 응시하는 이십분을 보냈다. It's 는 버그가 아니다 - it's HTML spec. 당신이 알파 채널 (JPEG) 없는 체재에 화포를 직렬화할 때,투명한 화소는 단단한 검정으로 합성해 얻는다. 당신이 투명도를 필요로 하는 경우에,PNG 를 지키거나 알파를 지원하는 WebP 를 이용하십시오. 당신이 특히 백색 배경을 원하는 경우에,백색 층을 첫째로 아래로 두십시오.
모든 재인코딩은 EXIF 및 GPS 메타데이터를 제거합니다. 이 공구가 신선한 화포에 심상을 다시 그리기 때문에,출력에는 EXIF,사진기 정보,임베디드 GPS 좌표가 없습니다. That's 진짜 기밀 승리 - you're 는 사진으로 우연하게 당신의 전화 각인된 위도/경도를 간행하지 않습니다. 그러나 it's 는 또한 당신이 임베디드 색깔 단면도 또는 저작권 메타데이터에 의지하고 있던 경우에 gotcha; 그 역시 갑니다. SEO 를 위해 그것은 does't 사정,그러나 그것을 알고 있습니다's 일어나고 있습니다.
반응형 이미지와 srcset 은 어떻게 작동하나요?
전화는 어쩌면 390px 넓이에 이미지를 렌더링합니다. 1920px 파일을 배송하면 방금 신중하게 압축 한 바이트의 대부분이 낭비됩니다. srcset 브라우저에 크기 메뉴를 전달하고 선택하도록 하여 문제를 해결합니다.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
이 세 가지 파일을 만들려면 동일한 소스를 실행하세요 이미지 크기 조정 400,800, 1200px 에서,그 다음 각각을 WebP 로 변환한다. The sizes 속성은 사람들이 건너 뛰는 부분이며,그것을 건너 뛰는 것은 조용히 전체를 깨뜨립니다 - 그것이 없으면 브라우저는 이미지가 뷰포트를 채우고 가장 큰 후보를 잡는다고 가정합니다. 이미지가 실제로 얼마나 넓게 렌더링되는지 알려주면 올바른 것을 다운로드합니다.
실제로 도움이 되는 대체 텍스트를 어떻게 작성합니까?
Alt 텍스트는 이미지 SEO 의 나머지 절반이며 it's 절반 개발자가 돌진합니다. 한 번에 세 가지 작업을 수행합니다: it's 화면 리더가 시각 장애인 사용자에게 큰 소리로 읽는 것,it's 크롤러가 이미지가 보여주는 것을 이해하는 방법,그리고 it's 대체 텍스트를 이미지 로드에 실패하면 올바르게 얻는 것은 대부분 키워드 로봇이 아닌 사람처럼 쓰는 것입니다.
내가 사용하는 규칙: demplay the image the way you'd describe it to someone on phone call. 구체적이고 자연스럽고 짧은 - under about 125 character so screen readers don't cruncate it awkwardly. 건너뛰기 "image of" or "photo of," 화면 판독기가 이미 it's an image; 그 사람들과 함께 이끄는 것은 청취자를 낭비하기 때문에's 시간. 그리고 대상 키워드가 진정으로 그림에 맞는 경우,한 번 포함,자연스럽게. 그것이 does't 맞는 경우,그것을 밖으로 둡니다 - 키보드의 사진 does't need "buy cheap wireless headphones" 그것의 alt 에 꽉.
실제 리뷰에서 몇 가지 전/후 I & #39;ve done:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(키워드 입력) →alt="Over-ear headphones with the carrying case open beside them"
사람들이 틀리는 뉘앙스 중 하나: 순전히 장식적인 이미지, 즉 구분선, 배경 번영이 있어야 합니다 비어 있는 alt=""설명이 아닌. 빈 alt 는 화면 판독기에 완전히 건너 뛰라고 지시하며,이는 정확히 장식에 원하는 것입니다. 정보를 전달하는 이미지에 대한 실제 alt 텍스트를 예약하십시오.
동안 you're 그것에서, 설명적으로 파일 너무 이름. wireless-headphones-matte-black.webp 비트 IMG_4532.jpg 검색 엔진은 파일 이름을 신호로 읽고 하이픈(밑줄 아님)은 Google이 단어 나누기로 구문 분석하는 구분 기호이기 때문입니다.
이것이 실제로 Core Web Vitals 를 얼마나 변화시키는가?
LCP(가장 큰 내용 페인트): 당신의 영웅은 일반적으로 LCP 요소입니다. 올바른 차원에서,WebP 에서,품질 ~ 80 으로,그리고 - 비판적으로 -하십시오 아닙니다 lazy-load it. lazy-loading the above-the-fold hero 는 고전적인 자기 소유입니다; 그것은 LCP 가 측정하고 있는 정확한 요소를 지연시킵니다. it's 영웅이라면 <link rel="preload" as="image"> 대신 그것.
CLS(누적 레이아웃 이동): 항상 넣어 width 그리고 height 에 <img>. 그 2 개의 속성은 브라우저가 이미지가 도착하기 전에 공간을 예약하게하므로 텍스트는로드 할 때 does't 점프. 이것은 거기에있는 가장 저렴한 단일 CLS 수정이며 여전히 누락 된 사이트를 찾습니다.
INP(다음 페인트와의 상호 작용): 이미지 don't 는 INP 를 직접 구동하지만 최적화되지 않은 3MB 의 그림에서 페이지가 질식하면 JavaScript 가 응답하는 데 필요한 용량의 메인 스레드와 네트워크가 고갈됩니다. 더 가벼운 이미지,더 빠른 상호 작용,간접적으로.
몇 가지 I & # 39;ve는 성가신 방법을 배웠습니다
당신이 최적화하기 전에 감사. PageSpeed 통찰력 통해 페이지를 실행하고 가장 무거운 파일을 먼저 수정 - 1.2 MB 범죄자는 아이콘에서 4 KB를 면도보다 더 중요합니다. 사람처럼 파일 이름: wireless-headphones-matte-black.webp 비트 IMG_4532.jpg 크롤러가 콘텐츠 신호로 파일 이름을 읽기 때문에 이미지 검색에서. 쓰기 대체 텍스트 you'd 실제로 전화에 누군가에게 사진을 설명하는 말 - 특정,자연, 키워드-포함 맞는 곳에서만,결코 키워드를 채우지 마십시오. 그리고 don't 는 당신의 그래프 열기 이미지 공유; 당신이 만든 올바른 크기의 1200×630 이미지 크기 조정 소셜 미리보기와 때로는 검색에 나타나는 내용입니다.
자주 묻는 질문
이미지 최적화가 SEO 순위에 실제로 영향을 미치나요?
예,Core Web Vitals 를 통해. LCP 와 CLS 는 확인된 Google 순위 신호이며,둘 다 이미지 중심이 강합니다. 최적화된 이미지는 일반적으로 모바일 페이지 속도 점수를 눈에 띄는 차이로 향상시키며,모바일에서는 순위 이동으로 변환할 수 있는 별도의 트래픽 소스로서 Google 이미지의 잠금을 해제하기도 합니다.
무료 온라인 도구를 사용하여 이미지를 AVIF로 변환할 수 있나요?
보통은 그렇지 않으며,Toolz.dev's Format Converter can't. 브라우저 내 변환기는 a 로 그립니다 <canvas>그리고,browser's 캔버스 인코더는 JPEG,PNG, WebP 만 출력합니다 - there's 사용할 수 있는 AVIF 인코더는 없습니다. 대부분의 승리를 위해 온라인으로 WebP 로 변환하고,필요한 경우 sharp 또는 avifenc 와 같은 도구를 사용하여 빌드 파이프라인에서 AVIF 를 생성합니다.
2026 년에는 WebP 또는 AVIF 를 사용해야 하나요?
WebP 는 안전한 기본값이며 내가 먼저 도달 한 것 - 보편적 인 지원,큰 절감,브라우저에서 만들 수 있습니다. AVIF 는 더욱 세게 압축하고 큰 영웅 및 갤러리 이미지에 추가 할 가치가 있지만 빌드 시간에 생성하고 다음을 통해 제공합니다 <picture> webp 폴백과.
JPEG 와 WebP 를 어떤 품질 설정으로 압축해야 합니까?
질 80 는 사진을 위한 믿을 수 있는 응답입니다. It's 극적으로 더 작기 동안 보통 전망에 원본에서 보통 구별할 수 없는. 유물이 기온변화도 및 피부 색조에서 나타나기 때문에,위탁하기 전에 100%년 급상승에 미리보기 60 의 밑에,압축은 눈에 보이게 됩니다.
JPEG 로 변환한 후 투명 PNG 가 검은색으로 변한 이유는 무엇입니까?
JPEG 에는 알파 채널이 없기 때문입니다. HTML 캔버스 사양은 알파가 아닌 형식으로 직렬화 할 때 투명한 픽셀이 솔리드 블랙에 합성된다고 말합니다. 버그가 아닌 It's 예상 동작. 이미지를 PNG 또는 WebP 로 유지하여 투명성을 유지하거나 흰색을 원할 경우 먼저 흰색 배경에 합성하십시오.
이러한 도구는 내 이미지를 서버에 업로드합니까?
아니오. Toolz.dev 에 이미지 공구는 당신의 브라우저에 있는 화포에 국부적으로 모두를 가공합니다 - 파일은 당신의 장치를 결코 떠나지 않습니다. 알 가치가 있는 부작용: 각 재부호화는 기밀을 위해 좋은 EXIF 와 GPS 메타데이터를 벗깁니다 그러나 끼워넣어진 사진기 자료 및 색깔 단면도가 너무 떨어집니다 의미합니다.
What's 는 웹 이미지를 위한 이상적인 파일 크기?
대략적인 타겟으로: ~200 KB 이하의 영웅 이미지, ~100 KB 이하의 콘텐츠 이미지, ~30 KB 이하의 썸네일. 실제 디스플레이 너비로 크기를 조정하고 WebP를 제공하면 매우 달성 가능합니다. 정확한 숫자는 크기 조정 후 압축 후 변환하는 습관보다 중요합니다.
관련 읽기 및 도구:
- 이미지 압축- 크기 조정 후 파일 크기를 잘라냅니다
- 이미지 크기 조정- 반응형 크기와 소셜 이미지를 만드세요
- 포맷 변환기- PNG, JPEG 또는 WebP를 내보냅니다
- 개발자's 이미지 도구 가이드
- 이미지 압축 설명
