이미지 최적화는 블로그 운영에 있어서 핵심적인 요소입니다. 특히, 최근에 등장한 WebP와 AVIF와 같은 새로운 웹 표준은 이를 심화시키고 있습니다. 이 두 형식은 기존의 JPEG나 PNG와는 다른 방식으로 이미지를 처리하며, 블로그의 성능을 향상시킬 수 있는 강력한 도구로 자리잡고 있습니다.
WebP와 AVIF: 새로운 웹 표준 소개
WebP는 Google에서 개발한 이미지 형식으로, JPEG와 PNG의 장점을 결합한 형태입니다. 이는 손실 압축과 무손실 압축을 모두 지원하며, 투명도와 애니메이션까지도 처리할 수 있습니다. 반면 AVIF는 AV1 비디오 코덱을 기반으로 하는 이미지 형식으로, 고해상도 이미지를 효과적으로 압축하여 파일 크기를 줄이는 데 주력합니다.
웹 표준과 블로그 성능 향상
WebP와 AVIF는 기존의 JPEG나 PNG보다 훨씬 효율적인 압축 기술을 사용하기 때문에 웹 성능을 크게 향상시킵니다. 작은 파일 크기로 더 높은 품질의 이미지를 제공할 수 있으며, 특히 모바일 장치나 저대역폭 환경에서의 웹 페이지 로딩 속도를 개선하는 데 큰 도움이 됩니다.
블로그 성능 향상을 위한 WebP와 AVIF의 영향
이미지 최적화는 블로그 성능을 향상시키는 데 중요한 역할을 합니다. WebP와 AVIF는 파일 크기를 줄이고 다운로드 속도를 향상시킴으로써 사용자 경험을 개선합니다. 특히, 지연 로드와 캐싱 기능을 통해 초기 로딩 시간을 단축하고 페이지 읽기를 빠르게 할 수 있습니다.
이미지 최적화는 블로그 운영에서 무시할 수 없는 요소입니다. WebP와 AVIF와 같은 새로운 웹 표준을 활용하면 블로그의 성능을 향상시킬 수 있으며, 이는 사용자 경험과 SEO에 모두 긍정적인 영향을 미칩니다. 이제 실제로 WebP를 활용하여 블로그 성능을 어떻게 향상시킬 수 있는지에 대해 자세히 알아보겠습니다.
그럼 조금 더 깊이 들어가 보겠습니다.
WebP와 AVIF를 워드프레스 블로그에 적용시킬 수 있는 대표적인 플러그인은 ‘EWWW 이미지 최적화’와 ‘Performance Lab’이 있습니다. 이 플러그인을 잘 사용하면, LCP(Large Contentful Paint)을 현격하게 감소시킬 수 있으며, 이미지 사이즈로 인한 로딩 지연을 막을 수 있습니다.
참고로, 포토샵의 경우, 2022년 1월이전의 버전에는 WebP 내보내기 기능이 없습니다.
EWWW 이미지 최적화 플러그인
기능
- 누락된 차원 추가:
이미지의 너비와 높이 속성을 추가하여 레이아웃 이동을 최소화하고 사용자 경험을 향상시킵니다. 브라우저는 이미지의 크기를 알고 있으면 페이지를 로드할 때 이미지가 차지할 공간을 미리 확보할 수 있으므로, 페이지 요소들이 렌더링되는 과정에서의 레이아웃 이동이 줄어들고 사용자 경험이 향상됩니다. - 지연 로드:
이미지가 뷰포트에 들어갈 때 또는 들어가려고 할 때에만 이미지가 로드되므로, 실제 및 인지 로딩 시간이 향상됩니다. 이는 페이지의 초기 로딩 속도를 개선하고 사용자가 페이지를 스크롤 할 때 발생하는 네트워크 사용을 최적화하여 사용자 경험을 향상시킵니다. - 자동 스케일링:
반응형(srcset) 마크업 내에서 올바른 이미지 크기를 자동으로 감지합니다. 이는 사용자의 디스플레이 크기와 해상도에 따라 적절한 이미지 크기를 제공하여 성능을 최적화합니다. Easy IO와 함께 사용할 경우, 모든 이미지가 반응형이 되어 디바이스에 최적화된 이미지를 제공할 수 있습니다. - WebP 변환:
이미지를 지원되는 브라우저의 차세대 형식으로 변환하고 다른 브라우저의 원본은 유지합니다. WebP는 JPEG 및 PNG보다 효율적인 이미지 형식으로, 동일한 품질의 이미지를 더 작은 파일 크기로 제공할 수 있습니다. 이를 통해 페이지의 로딩 속도를 개선하고 대역폭을 절약할 수 있습니다.
WebP 전달방법
WebP 전달 방법은 이미지를 효율적으로 제공하기 위해 사용되는 다양한 기술을 포함합니다. 주로 JavaScript를 활용하여 CDN 및 캐시 친화적인 방식으로 WebP 이미지를 제공하는 방법과 이미지 태그를 사용하여 WebP 이미지를 동적으로 재작성하는 방법으로 나눌 수 있습니다.
- JS WebP 재작성:
CDN 및 캐시 친화적인 WebP 전달을 위해 JavaScript를 사용합니다. 이 방법은 웹 서버에서 웹 페이지를 제공할 때 이미지의 확장자를 WebP로 변경하여 제공하는 방식입니다. 이를 통해 클라이언트의 브라우저가 WebP 형식을 지원하는 경우 적절한 형식의 이미지를 받을 수 있습니다. 지연 로드 옵션을 사용하면 CSS 배경 이미지를 지원할 수도 있습니다. - 이미지 WebP 재작성:
이 방법은 그림 태그를 사용하여 이미지를 동적으로 재작성하는 방식입니다. JavaScript를 사용하여 웹 페이지에서 사용되는 이미지 태그를 검사하고, 브라우저가 WebP를 지원하는 경우에는 이미지의 URL을 WebP 형식으로 변경하여 제공합니다. 이는 일부 테마에서는 태그가 제대로 표시되지 않을 수 있는 문제를 방지할 수 있습니다. 또한, CSS 배경 이미지를 지원하기 위해 JS WebP와 지연 로드를 결합하여 사용할 수 있습니다.
이러한 WebP 전달 방법은 웹 페이지의 성능을 최적화하고 대역폭을 절약하기 위해 사용되며, 브라우저의 호환성 및 기능을 고려하여 최적화된 이미지를 제공합니다.
이 모든 기능을 무료로 사용할 수 있는 플러그인이고, 대량의 이미지를 관리해야하는 사이트가 아니라면 유료버전까지는 필요하지 않다고 생각합니다. 모든 기능을 활성화 시키고 적용해보니, 4.5 정도였던 LCP가 1.5로 현격하게 감소한 것을 확인할 수 있었습니다.
‘대량 이미지 변환’ 기능으로 사용하여 기존 이미지들을 모두 WebP로 변환한 후 작동시켜야 효과가 있습니다. 먼저 데쉬보드 플러그인 화면에서 기본적인 설정을 마친 후 ‘Start Optimizing’ 버튼을 클릭하면 옵티마이징이 시작됩니다.
그리고, 성능향상을 확실히 느끼고 싶으시다면, 아래 기능들은 모두 체크하시기를 권장합니다.
다만, 이 기능들을 체크 표시하면, 워드프레스의 Embed box의 링크가 작동하지 않을 수 있습니다. 이것이 특정 테마의 문제인지는 아직 확인해봐야할 부분입니다. 저의 경우는 임베드 박스 위에 버튼을 하나 더 추가하여 링크될 수 있도록 하고 있습니다.
약간의 오류에도 불구하고 속도가 너무 현격히 향상되어서 사용하지 않을 수 없다고 판단했습니다.
Performance Lab
Performance Lab 에서도 같은 기능들을 제공합니다. 설정할 수 있는 거의 메뉴도 없기 때문에, 그냥 활성화만 시켜보았는데, 속도가 조금 빨라지기는 했지만, EWWW에서 만큼 체감 속도 향상은 느끼지 못하겠습니다.
가장 큰 이유는 기존 이미지를 WebP로 변환시켜주는 기능이 없기 때문일 겁니다. 그리고, 위에서 임베드 박스 링크가 뮤트(Mute) 되는 오류 등을 고려하여 수위 조절을 한 것 같습니다. 이 플러그인은 앞으로 워드프레스 코어에 포함될 예정이라고 합니다.
워드프레스 코아에 포함될 예정인 만큼, 더 안정적인 환경을 제공하리라 생각됩니다. 두 플러그인의 특징을 요약하면, EWWW는 기존에 이미 올라간 png,jpeg,gif 형식을 webP로 전환하여 보여주는 기능이 있으며, 퍼포먼스 랩은 이미지를 올릴때, webP로 변환하여 올려주는 기능이 있습니다.
EWWW에서 임베드 박스 링크가 뮤트되는 문제를, 퍼포먼스랩에서는 Embed Optimizer 를 사용해서 해결하고 있습니다. 실제 해봐았더니 주요 브라우저들에서는 임베드 박스 링크가 작동합니다. 하지만, 아직 실험단계라서 모든 브라우저에서 통할지는 살펴봐야할 문제입니다.
맺음말
위 두 플러그인을 같이 작동시켜도 별다른 속도 저하나 충돌은 없습니다. 오히려 시너지가 있는 것 같습니다. 아직 WebP를 블로그에 적용해보지 않으셨다면, 망설이지 마시고 적용해보시기 바랍니다. 놀라운 속도향상을 경험할 수 있을 겁니다. 캐쉬 플러그인을 같이 잘 사용하면 그 효과가 배가 됩니다. 지금까지 올린 ‘최적화 관련 글들’ 중에서도 최고의 실전 팁일 겁니다.