모든 웹사이트 중 0.1% 미만이 AVIF 형식을 사용하여 이미지 형식에 대해 가장 효율적인 대책을 취하고 구글의 웹사이트 속도, 사용자 경험 및 온라인 가시성을 측정할 수 있는 측정 가능한 개선을 이루고 있습니다. 다른 사이트 운영자들은 아직 AVIF가 제공하는 이미지 형식의 잠재력을 활용하지 못하고 있습니다. 이 기사는 이 문제를 해결하고 AVIF 형식에 진지하게 관심을 기울이고, 웹사이트에서도 사진에 사용하는 것을 권장합니다.
Google PageSpeed Insights에서 웹사이트 URL을 테스트하여 성능이 어떤지 확인해 보신 적이 있나요? 아직 시도해보지 않으셨다면 꼭 확인해보세요!
아마도 귀하의 웹사이트에서는 아직 이 값이 표시되지 않으실 거라고 추측해 봅니다, 그렇죠?
당신의 값이 낮을수록 페이지 속도를 향상시키기 위해 더 많은 최적화가 필요할 것입니다. 구글의 페이지 속도 개선 권고 사항을 테스트 도구에서 아래쪽으로 스크롤하면 여전히 JPG 또는 PNG 파일 형식을 사용하는 경우 현대 이미지 형식에 대해 권고하는 경우도 있습니다.
이것이 귀하의 웹사이트로 PageSpeed Insights에서 아직 최고 점수를 얻지 못하는 이유 중 하나일 것이며, 아마도 Core Web Vitals도 통과하지 못할 것입니다.
저희 에이전시 웹사이트 4eck-media.de와 여기서도 불러오고 있는 TutKit.com의 이미지들은 AVIF 형식으로 로드되어 고품질의 이미지를 매우 빠르고 작게 제공하며, 페이지 속도 향상을 도와줍니다.
최근의 웹 이미지 형식은 누구도 거의 모르고 있는 AVIF인만큼, 이제는 SEO, 페이지 속도 및 사용자 경험에 대한 모든 장점을 갖춘 현대 이미지 형식인 AVIF에 대해 소개할 때가 됐습니다.
AVIF 기사 목차:
AVIF 이미지 형식이란 무엇인가요?
AVIF는 2020년에 AOMedia(Alliance for Open Media)에 의해 발표된 새로운 이미지 형식입니다. 이 형식은 AV1 손실 압축 알고리즘에 기반을 두고 있으며 JPEG, PNG 및 WebP와 같은 흔히 쓰이는 이미지 형식과 비교해 다양한 장점을 제공합니다.
AVIF 이미지는 동일한 이미지 품질의 JPEG 이미지보다 훨씬 작습니다. 이는 AV1이 훨씬 효율적인 압축을 제공하기 때문입니다. 그 결과, JPEG 이미지보다 AVIF 이미지가 동일한 이미지 품질을 유지하면서도 종종 최대 50% 작을 수 있습니다.
AVIF 이미지는 JPEG 이미지보다 더 높은 색심도를 제공합니다. 따라서 AVIF 이미지는 최대 12비트의 색심도를 지원할 수 있지만, JPEG 이미지는 8비트의 색심도만 지원합니다. 이는 AVIF 이미지가 풍부한 색조와 현실적인 색상을 제공한다는 것을 의미합니다.
또한 AVIF 이미지는 알파 채널을 저장할 수 있습니다. 알파 채널은 이미지의 투명도를 정의하는 데 사용됩니다. 즉, AVIF 이미지는 투명성이 필요한 그래픽 애플리케이션에서 사용하기에 이상적입니다.
AVIF는 오픈 소스 형식이며 다양한 소프트웨어 및 하드웨어 제공업체에서 지원하고 있습니다. 대부분의 주요 이미지 편집 프로그램과 브라우저가 이미 AVIF 이미지를 지원하고 있습니다. 정말로 이 현대 이미지 형식이 보급되기를 기대합니다!
AVIF는 다음과 같은 여러 가지 장점을 제공하며 다른 일반적인 이미지 형식들과 비교했을 때 더 뛰어난 것으로 알려져 있습니다:
- 더 좋은 압축률: AVIF 이미지는 동일한 이미지 품질에서 JPEG 및 PNG 이미지보다 훨씬 작습니다.
- 더 높은 색심도: AVIF 이미지는 12비트의 색심도를 지원할 수 있으며, JPEG 및 PNG 이미지는 8비트의 색심도만 지원할 수 있습니다.
- 알파 채널 지원: AVIF 이미지는 투명성을 저장할 수 있어 오늘날 웹사이트에서 PNG 또는 WebP 이미지를 사용하는 이유를 대체할 수 있습니다.
- 오픈 소스 형식: AVIF는 오픈 소스 형식이며 다양한 소프트웨어와 하드웨어 제공업체에 의해 지원됩니다.
- AVIF는 여러 이점을 제공하며 다른 일반 형식 (웹피피 등)과 비교했을 때 웹사이트에 적합한 이미지 형식입니다.
앞으로 웹사이트에서 이미지 저장 및 표시에 점점 더 큰 역할을 하는 AVIF 형식이 더욱 중요해질 것으로 예상됩니다. 특히 Google은 PageSpeed Insights 결과에서 직접 사용을 권장하고 있으며 이제는 모든 일반 브라우저가 최신 버전에서 AVIF를 지원하고 있습니다.
이로써 SEO, 페이지 속도 및 사용자 경험에 대한 이점을 이미 누릴 수 있으니, 자신의 웹사이트에 일찍이 AVIF를 적용해 보는 것이 가치가 있습니다.
AVIF가 SEO, 페이지 속도 및 사용자 경험에 이점을 가져다 주는 이유
가장 큰 이점은 사진을 비교했을 때 가장 눈에 띄는 것입니다. 예를 들어, 전체 이미지 품질이 같은 경우 1024x1024 해상도의 Midjourney의 Clownfish 떼 이미지를 PNG 형식으로 생성해봤습니다.
- 원본 PNG: 1,43 MB
- TinyPNG으로 최적화된 크기: 393 KB - 73 % 절약
원본 PNG 파일을 squoosh.app을 통해 변환하여 결과를 얻었습니다:
- Squoosh를 통해 WebP로 최적화된 크기: 84 kb - 94% 절약
- Squoosh를 통해 AVIF로 최적화된 크기: 42 kb - 97% 절약
결과적으로 AVIF 이미지는 같은 시각적 품질에서 WebP 이미지의 절반만큼 큽니다. 다른 많은 테스트에서 JPG 파일의 과도한 압축으로 발생하는 압축 아티팩트는 이미지 품질이 30 이하로 조절될 때 또는 20 또는 그 이하 방향으로 이동되었을 때 쉽게 확인됩니다. 품질이 30인 경우에도 픽셀 그래픽 내 텍스트 구성 요소는 압축 아티팩트 없이 여전히 선명합니다.
이와 같은 이미지가 많이 사용된 웹 사이트에서의 절약은 무한대로 평가할 수 없습니다.
SEO 가치, 페이지 속도 및 사용자 경험을 위한 AVIF
Google은 이미 2021년에 웹 사이트의 핵심 웹 요소(Core Web Vitals)를 랭킹 요소로 지정했습니다. 이에는 예를 들어 웹 페이지의 로드 속도가 포함됩니다. 사용자가 주요 콘텐츠를 얼마나 빨리 볼 수 있는지에 대한 값입니다. Google은 사용자가 원하는 값인 2.5초까지의 시간을 제공하고 있습니다.
큰 이미지 데이터는 더 긴로드 시간을 야기합니다. 그러면 핵심 웹 요소는 시험에 빠져 나간 것입니다.
또 다른 문제점이 있습니다. 웹 페이지에 큰 이미지 데이터(PNG 또는 JPEG 등)가 배치되어 있다면 이미 텍스트 콘텐츠가 로드되었는데도 이미지가 더 느리게 로드될 수 있습니다. 그 결과 레이아웃 변경이 발생할 수 있고, 이로 인해 이미지 표시가 아래의 웹 페이지 영역으로 밀릴 수 있습니다. Google은 이를 좋아하지 않고 이미지 표시 시에 레이아웃 변경이 발생하면 사이트에 레이아웃 변경이 발생하며 Google은 이를 CLS 오류로 제공하여 핵심 웹 요소를 통과하지 못하게 합니다.
또한 페이지가 빠르게 로드되고 사용자가 콘텐츠를 즉시 클릭해서 볼 수 있다는 것은 모든 웹 사이트 방문자에게 훌륭한 느낌입니다. 또한 이미지를 더 나은 품질로 웹 사이트에 배치할 수 있으며, 이미지를 너무 많이 압축하지 않고도 이미 압축 아티팩트가 보이지 않도록할 수 있습니다. 손실 없는 변환 또는 보통의 압축을 하더라도 파일 크기는 PNG 또는 JPEG보다 매우 작게 유지됩니다. 따라서 AVIF 형식은 여러 면에서 모든 사용자에 대한 사용자 경험을 향상시킵니다. Google은 핵심 웹 요소의 통과로 우리에게는 사용자들이 방문하는 웹 사이트에서 실망하지 않도록 조치를 취하라고 강요합니다.
따라서 사용자 경험, 페이지 속도 및 웹 사이트의 기술적 품질을 향상시킴으로써 온라인 가시성이 긍정적으로 영향을줄 것입니다.
AVIF 이미지의 브라우저 지원
특히 새로운 기술에 관련해서는 웹 사이트 운영자들이 조금 망설이고 몇 달을 기다립니다. 한편으로는 쇼핑 시스템이나 CMS의 주요 릴리스의 베타 테스터가 되고 싶지 않으며, 다른 브라우저나 기기에서 문제가 없다는 것을 완전히 보장할 수 없기 때문입니다.
AVIF 이미지 형식이 실제로 일반적인 브라우저에서 형식을 지원하는지 판단이 중요합니다. 해당 정보를 확인할 수 있는 웹 사이트인 caniuse.com을 참조해보세요: https://caniuse.com/avif
전 세계 브라우저 사용의 85%가 AVIF를 이미 지원하고 있습니다. 독일에서는 9월 2일 현재 80.33%입니다... 그래 독일이야, 아직도 핸드폰 네트워크에 결핍이 있고, 인터넷 연결이 느린 지역이 여전히 있습니다 (내 지역에서도 비슷합니다: 사무실에서 기가비트로 작업하면서 홈오피스에서는 9Mbit/sec를 겨우 받고 있습니다).
따라서 주요 브라우저에서 AVIF가 이미 지원되고 있음이 확인됩니다.
이미 AVIF 형식을 사용하는 웹사이트는 몇 개나 될까요?
위와 비슷하게 w3tech.com은 특정 기술의 사용률에 대한 통계 정보를 제공합니다. Website에서 사용되는 이미지 형식에 대한 정보도 포함됩니다: 웹사이트에서 사용되는 이미지 형식.
현재 웹 사이트 중 백분율에 대한 사용 데이터(2023년 9월 기준):
- PNG: 82,1%
- JPEG: 78%
- SVG: 55.2%
- GIF: 21.7%
- WebP: 9.2%
- ICO와 BMP: 각각 0.2%
- AVIF: 0.1% (반올림)
현재 웹 사이트의 총 약 0.07%만 AVIF 형식을 사용하고 있습니다. Whaaat? 정말 매우 적군요. 하지만 여러분에게는 현대 이미지 형식을 사용하는 첨단 기술로 나아가는 기회가 주어진 것입니다. 오른쪽 이미지의 곡선을 보면 매달 이용량이 증가하고 있음을 분명히 알 수 있습니다 ... 아직 ‰ 수준이라는 점에 유의하십시오. 이것은 분명히 곧 가속화될 것입니다.
흥미로운 점은 구글의 현대 웹 형식 권고 사항을 따르는 웹 사이트가 겨우 10%에 불과하다는 것입니다. 나머지 모두는 페이지 속도와 사용자 경험에서 타협하고 있으며 아마도 핵심 웹 핵심 지표에는 통과하지 못할 것으로 예상되는데, 이는 온라인 가시성에 부정적인 영향을 미칠 수 있습니다.
AVIF vs. WebP - 당신의 웹 사이트에 더 나은 것은 무엇인가요?
명확한 시현을 위해 한 번 더 테스트해 보겠습니다. TutKit.com의 헤드 부분에서 변환하기 전 PNG 파일로는 투명도 때문에 600KB가 넘었다.
이제 시스템에서는 159KB의 WebP 파일로 출력됩니다 (저희의 대처법!). 이제 이를 TINYPNG와 같은 도구를 통해 최적화하면 128KB로 남습니다. 결과적으로 20% 정도 감소됩니다.
AVIF 파일은 우리가 기본적으로 표시하고 있는데, 이 파일은 단지 94KB로 크기가 줄었고, 대약 Fallback-WebP의 59%에 불과합니다. 모든 테스트에서 AVIF가 시각적 품질이 동일한 이미지 파일 크기에서 WebP 형식을 능가했습니다.
WebP 대신 AVIF를 선택하는 이유는 무엇인가요?
- AVIF는 투명도를 지원하며, 더 높은 압축률과 낮은 파일 크기에서도 더 좋은 이미지 품질을 유지합니다.
- AVIF의 지원률은 대부분의 주요 브라우저에서 이미 85%에 육박합니다. 계속 상승하는 추세입니다.
- AVIF를 사용하면 웹 사이트가 WebP 대비 더 빨리 로드됩니다. 제품 이미지가 많이 배치된 온라인 상점과 같은 이미지 중심 웹 사이트나 이미지 퀄리티가 높아야 하는 웹 사이트(포트폴리오 웹사이트, 참조 등)에서 시각적 품질을 유지하면서 파일 크기를 작게 유지할 수 있습니다.
caniuse.com에서 직접 WebP 페이지에 쓰인 말이나, “AVIF 및 JPEG XL은 WebP를 대체하기 위해 디자인되었다.”라는 것입니다. 즉, AVIF와 JPEG XL은 WebP를 대체할 것이라는 것입니다.
AVIF로 잘못 선택한 게 맞는지, JPEG XL도 경기에 참가하므로 걱정하지 않아도 됩니다. JPEG XL은 0.08%로 거의 존재하지 않는 브라우저 호환성을 지니고 있습니다.
Squoosh에서 이미 JPEG XL로 이미지 변환할 수 있고 그 값은 WebP와 "비슷"합니다(아래 이미지 참조).
AVIF는 여전히 우세한 형식입니다. 빨리 시행하고 당신의 웹 사이트에도 이점을 적용하세요!
Squoosh.app - JPG, PNG, WebP를 AVIF로 변환하는 최고의 도구
이전에 우리 팀에서는 웹사이트에서 사용하기 위해 이미지 파일을 최적화하기 위해 온라인 도구인 TinyJPG 또는 TinyPNG을 사용했지만, 이제는 Google의 스위업의 큰 팬입니다.
Squoosh는 Google에 의해 개발된 무료 이미지 변환기입니다. 이 도구는 온라인 서비스로 작동하지만 로컬 환경에서도 사용할 수 있습니다(노드.js도!). 이 도구는 여러 형식으로 이미지를 변환할 수 있으며 JPEG, PNG, GIF 및 WebP 등이 포함됩니다. 뿐만 아니라 귀하의 이미지를 AVIF 형식으로 변환할 수도 있습니다.
이미지 변환기 Squoosh는 이미지 품질을 손상시키지 않고 이미지 크기를 줄이기 위한 다양한 기술을 사용합니다. 이 기술에는 색상 정보의 압축, 해상도 감소 및 중복 데이터 제거 등이 포함됩니다.
이미지를 끌어다 놓기만 하고 원하는 형식을 선택하면 됩니다. 간단한 몇 번 클릭으로 이미지가 변환되고 최적화됩니다.
웹P 이미지를 삽입하고 AVIF(왼쪽)와 JPEG XL(오른쪽)로 변환하고 압축하는 것을 비교하면 어떤지 확인하실 수 있습니다. 슬라이더를 사용하여 원하는 품질 수준이 올바른지 확인하여 시각적 품질을 유지할 수 있습니다. 기본 설정에서는 한쪽이 항상 비교를 위한 원본 파일이 됩니다. 결과에 대한 궁극적인 제어를 제공하여 결과물에 대한 완벽한 통제를 할 수 있습니다.
당신도 Squoosh를 사용하여 컨텐츠 관리와 웹 개발을 할 수 있습니다. WebP 또는 AVIF와 같은 현대적인 웹 형식 덕분에 이미지 크기를 줄이고 웹사이트의 로딩 시간을 개선할 수 있습니다. 또한 소셜 미디어에 업로드하려는 경우 TinyJPG와 비슷하게 JPG 파일의 파일 크기를 줄일 수 있습니다. Squoosh의 장점은 압축에 대한 완전한 제어권을 가지며 최상의 품질을 얻기 위해 다양한 최적화 설정을 실험할 수 있다는 것입니다.
여기 Squoosh의 몇 가지 장점이 있습니다:
- 다양한 이미지 형식을 지원하며 변환 가능
- 이미지 크기를 줄이기 위한 다양한 기술 사용
- 압축된 이미지 미리보기 가능
- 다양한 최적화 설정 제공
- 무료이며 쉽게 사용 가능한 도구
모든 긍정적인 특성에도 불구하고 단점은 있습니다: 현재 Squoosh는 항상 한 번에 한 이미지만 처리할 수 있고 일괄 처리를 지원하지 않습니다. 이 기능이 반드시 추가될 것이라고 희망합니다.
PHP 프레임워크의 이미지를 JPG 및 PNG에서 AVIF 및 WebP로 서버 측 일괄 변환
우리는 TutKit.com에서 JPG 및 PNG 파일로 포털에 포함된 이미지 - 적어도 14,000 개의 개별 파일 - AVIF 형식으로 서버 측에서 변환하고, 이전 브라우저에 대한 대비로 WebP 형식으로도 변환했습니다. 문제 없이, 디자이너가 흔히 사용하는 JPG 또는 PNG로 계속하여 이미지를 포털에 업로드하고 거기에 메타 데이터를 추가합니다. 시스템은 출력 시 자동으로 AVIF로 포함 및 모든 이전(또는 지원하지 않는) 브라우저에 대한 WebP로 대체합니다.
서버 측에서 작동하려면 최신 소프트웨어 버전을 사용하십시오. 새로운 기능 imagecreatefromavif 및 imageavif 으로 AVIF 형식은 PHP 8.1+에서만 사용이 가능하며 GD 확장 기능이 AVIF를 지원하도록 빌드된 경우에만 사용 가능합니다. libavif 버전 0.8.2 또는 그 이상이 필요합니다.
또한 운영 체제의 호환성을 확인하십시오. AVIF는 libavif-dev/libavif-devel 패키지가 Repository에 포함되어 있는 다음 운영 체제에서 제공됩니다:
- 우분투 21.04부터
- 데비안 11부터
- 알파인 3.13부터
- 페도라 34부터
여기는 TutKit.com의 모바일 뷰의 PageSpeed 평가입니다. 데스크톱에서는 90 이상의 점수를 얻는 것이 상대적으로 쉽지만, 모바일 뷰에서는 정말 어렵습니다. 우리는 이 점수를 계속하여 100에 가깝게 향상시키려고 노력 중이며, 우리는 알고 있기 때문에 PageSpeed가 사용자 경험에 좋고 SEO 성과에도 영향을 미칩니다.
AVIF를 우리의 PHP 프레임워크 Laravel에 통합하는 것은 여기에서는 간단해 보이지만, 결과적으로는 연구, 개발, 버그 수정, 테스트를 포함한 JIRA 도구의 60 건 이상의 티켓으로 이어지는 작업이었습니다. 따라서 플러그인이 WordPress와 같은 전통적인 CMS에서 작업을 크게 줄이는 반면, 광범위한 개발에서는 우리와 같이 3 주 이상이 걸릴 수도 있습니다. AVIF의 장점은 분명히 가치가 있습니다!
그런데 말이야: TutKit.com과 같은 포털에서는 WordPress나 다른 CMS 대신 PHP 프레임워크를 사용하는 이유에 대한 기사를 다음에 써볼까 합니다.
WordPress에서 AVIF 사용하는 플러그인
2023년 9월 기준으로 CMS인 WordPress는 AVIF 이미지 업로드를 직접 지원하지 않습니다. 이는 Contao와 같이 5.0.0 버전부터 AVIF를 지원하는 CMS와는 다릅니다. 따라서 WordPress 사용 시 AVIF로 이미지를 출력하려면 현재 두 단계가 필요합니다.
- WordPress의 AVIF 지원 활성화
- JPG/PNG/WEBP 이미지를 AVIF로 변환
WordPress 웹사이트에서 AVIF 이미지 사용을 가능하게 하는 여러 가지 WordPress 플러그인이 있습니다. 아래는 확인할 수 있는 세 가지 플러그인입니다:
- AVIF 지원: 이 플러그인을 사용하면 WordPress 웹사이트에서 AVIF 이미지를 업로드하고 표시할 수 있습니다. 또한 JPEG 및 PNG 이미지를 AVIF 이미지로 자동 변환할 수 있습니다.
- 미디어 변환기: 이 플러그인을 사용하면 WordPress 미디어 라이브러리에 있는 모든 이미지를 AVIF 이미지로 변환할 수 있습니다. 또한 이미지 품질 및 압축률을 조정할 수 있는 다양한 옵션을 제공합니다.
- ShortPixel 이미지 최적화: 이 플러그인은 WordPress 미디어 라이브러리의 이미지를 최적화하고 AVIF 이미지로 변환합니다. 이미지 품질 및 성능을 개선하는 다양한 기능도 제공합니다.
WordPress 웹사이트에서 AVIF 이미지의 장점을 활용하는 좋은 방법이 될 수 있는 이러한 플러그인들을 확인해보세요.
여기에서 AVIF 지원 플러그인을 확인하실 수 있습니다 - 현재 다운로드 횟수는 1,956회이며 설치 횟수는 800회 미만입니다 - 워드프레스 사용자에게는 AVIF가 아직 완전히 불명확한 것으로 보입니다.
현재 웹사이트의 43.1%가 CMS 워드프레스를 사용하고 있습니다. 워드프레스가 시스템적으로 AVIF를 지원하면, AVIF는 JPG, PNG 및 WebP를 밀어내고 승리할 것입니다. - Matthias Petri
업데이트 2024.05.04: 워드프레스 6.5부터는 AVIF도 지원됩니다! 따라서 지원 플러그인은 이제는 이전 버전의 워드프레스에만 필요합니다. 워드프레스 6.5 이상으로 업데이트할수록 더욱 가치가 있습니다.
Strapi 웹사이트용 로컬 이미지 Sharp 플러그인
우리는 저희 대행사 웹사이트 4eck-media.de에서도 Strapi CMS를 사용하는 node.js 기반의 웹사이트에서 AVIF를 사용하고 있습니다. Strapi용 Local Image Sharp 플러그인을 사용하면 Strapi 웹사이트에서 AVIF 이미지를 사용할 수 있습니다. 이 플러그인은 sharp 이미지 처리 툴킷을 사용하여 이미지를 AVIF 이미지로 변환합니다.
Local Image Sharp 플러그인은 다음과 같은 기능을 제공합니다:
- 이미지를 AVIF 이미지로 자동 변환
- 이미지 품질 및 압축률 조정
- 다양한 이미지 형식 지원
플러그인을 설치하려면 Strapi 플러그인 스토어에서 다운로드하여 다른 Strapi 플러그인과 마찬가지로 설치하면 됩니다.
우리는 JPG 또는 PNG 형식으로 이미지를 Strapi 시스템에 업로드하는 방식을 사용합니다. 시스템은 이미지를 AVIF 및 WEBP로 변환하여 브라우저에서 AVIF로 표시할 맞춤형 이미지를 제공합니다. 이 과정에서 브라우저가 이전인 경우 WebP 이미지가 대체로 표시됩니다.
이미지를 적절한 해상도로 디바이스(데스크탑, 태블릿, 모바일)에 따라 브라우저에서 AVIF로 표시하려면 <picture> 태그를 사용하여 이미지를 보낼 소스의 JPEG 또는 PNG에 대한 AVIF 및 WebP 형식을 나타내는 <source> 및 <img> 태그를 사용하는 것이 좋습니다.
현대 웹 형식 이미지는 캐싱과 더불어 저희 대행사 웹사이트의 성능을 크게 향상시키는 주요 부스터 중 하나였습니다:
메타 썸네일 및 구조화된 데이터에 대한 참고 사항
오늘까지 구글 이미지는 AVIF 형식을 지원하지 않기 때문에 "image"으로 지정된 스키마 마크업은 여전히 관련된 JPG 파일을 제공합니다. 또한 각 제품 페이지에 지정된 메타 섬네일은 구글에 검색 스니펫의 미리보기 이미지로 제공하기 위해 여전히 JPG 형식을 사용합니다.
혹시라도 AVIF로 변경한 후 이미지의 온라인 가시성이 사라지는 사례가 어딘가에서 보고되었습니다. 우리는 해당 경험을 확인할 수 없었습니다. 저희의 온라인 가시성은 지속적이었지만, 구글 봇에 의한 이미지 크롤링 요청이 증가했습니다. 흥미롭게도 웹P 이미지를 통해 구글 봇이 크롤링하고 있음을 확인할 수 있습니다, 이는 오래된 브라우저를 위한 대체 이미지로 준비되어 있는 것입니다. 아마도 구글은 현재 웹P 이미지를 인덱스하기 위해 노력하고 있는 것으로 판단됩니다.
그러므로 썸네일 및 구조화된 데이터에는 여전히 JPG의 소스를 사용하는 것이 좋습니다.
AVIF 이미지 편집을 위한 도구 및 소프트웨어
이미지는 자주 편집되고 선호되므로 주요 이미지 편집 프로그램들이 AVIF 형식과 호환되는 것이 바람직합니다. 때로는 웹사이트에서 이미지를 다운로드하여 편집을 수행해야 할 때가 있습니다. AVIF 호환성의 주요 기능은 선호하는 이미지 프로그램에서 파일을 열 수 있어야 한다는 것입니다. 다른 형식으로 저장된 후에도 Squoosh나 다른 도구를 사용하여 다시 AVIF 형식으로 변환할 수 있습니다.
여기는 AVIF 호환된 이미지 편집 소프트웨어 목록(2023년 9월 현재)입니다:
- Gimp: 2.10.22 버전부터 AVIF를 가져오고 편집하고 내보낼 수 있습니다.
- Photopea: AVIF를 가져오고 편집하지만 내보내기는 불가능합니다. 다른 형식으로 저장할 수 있습니다.
- Affinity Photo: AVIF 지원 없음
- Photoshop: AVIF 지원 없음, 그러나 플러그인으로 지원 가능
Photoshop용 AVIF 플러그인
Photoshop에서 AVIF 파일을 열 수 있도록 하는 플러그인을 이곳에서 찾을 수 있습니다.
https://github.com/0xC0000054/avif-format
해당 페이지의 Releases 탭에서 다운로드할 수 있습니다.
ZIP을 다운로드한 후 Photoshop이 플러그인을 찾는 폴더에 Av1Image.8bi를 추가하면 됩니다. 이는 표준 설치의 경우 다음 폴더에 있습니다:
C:\Program Files\Common Files\Adobe\Plug-ins\CC
또는 다음 폴더: C:\Program Files\Adobe\Photoshop [version]\Plug-ins
Photoshop을 닫습니다. 그런 다음 Photoshop을 시작하여 플러그인을로드 할 수 있도록 합니다. 그런 다음 Photoshop에서 드래그 앤 드롭 또는 오픈 대화 상자를 통해 AVIF 파일을 직접 엽니 다.
Windows에서 AVIF 이미지 표시
웹 사이트에서 이미지를 다운로드하고 편집하거나 다른 용도로 필요할 때 파일 브라우저가이를 열고 표시 할 수있도록 하려면 Windows 10 이상이어야합니다. 그러나 이를위한 확장 프로그램이 필요합니다. AVIF 파일을 클릭하면 일단 오류 메시지가 표시됩니다.
오류 메시지에는 링크가 있습니다. 이 링크를 클릭하면 Microsoft Store로 이동하여 AVIF 확장 프로그램을 다운로드 할 수 있습니다. 크기는 1.61MB입니다.
그런 다음 Windows에서 AVIF 형식의 이미지를 파일 브라우저에서 열고 표시할 수 있습니다.
GIF 애니메이션 대신 웹 사이트에 AVIF 애니메이션 삽입
GIF 애니메이션을 AVIF 애니메이션으로 변환하는 온라인 컨버터가 있습니다. https://mconverter.eu/convert/gif/avif/
내 테스트 GIF 파일의 크기는 787KB이지만, AVIF로 변환 할 경우 애니메이션 크기는 411KB로 줄어듭니다.
내 개인적인 결론
현재 최신의 이미지 형식을 웹 사이트에 통합하는 최고의 선택이라고 생각합니다. 압축 및 이미지 품질 면에서 AVIF의 이점은 설득력이 있습니다. 다른 이미지 형식은 이러한 속성을 결합하지 않으며 로드 시간을 크게 높이지 않습니다. 현재 AVIF 형식을 사용하는 웹 사이트 운영자가 너무 적습니다. 브라우저 지원이 85 % 이상되어 있으며 기술적인 문제로 WebP를 계속 사용하는 것도 문제가 없습니다. SEO가 변화 중에 있습니다. AVIF만으로는 페이지 속도 인사이트에서 최고의 점수를 얻을 수 없습니다. 기술적인 다른 요소가 필요합니다. 현대 이미지 형식을 통합하는 것이 중요할 때, AVIF를 사용하면 WebP에 비해 더 나은 성능을 얻을 수 있습니다.
키워드 최적화 된 콘텐츠만으로는 더 이상 충분하지 않습니다. 인터넷이 콘텐츠로 넘침으로 많은 웹 사이트가 온라인 시야 경쟁을위한 강화 된 콘텐츠 동등성으로 뛰면서 구글은 사용자에게 가능한 최고의 사용자 경험을 제공하려고합니다. AVIF는 해결책의 부분이며 페이지 로드 시간을 가속화하고 사용자 경험을 향상시키고 온라인 시야를 향상시키기 위한 것입니다.
SEO, 사용자 경험, 디자인 및 기술적인 트렌드에 대해 자세히 알아보기
원칙적으로 SEO, 사용자 경험, AI 도구 및 새로운 웹 기술에 관심이 있다면 저희의 교육 및 다른 블로그 기사에서 더 많이 알아보실 수 있습니다.
이제 당신의 차례입니다
이 게시물이 가치 있다고 생각되면 구글 리뷰를 남겨주시기 바랍니다. 모든 리뷰는 우리를 지원합니다. 웹 프로젝트에서 AVIF를 활용하는 데 도움이 필요하면 저희 에이전시 페이지를 통해 문의해주십시오.