PageSpeed 로고 이미지 해상도 오류는 단순히 로고 파일 크기가 작아서 발생하는 문제가 아니었습니다. 접근성 점수를 확인하던 중 “이미지가 적절한 해상도로 제공됨” 항목에서 경고가 표시되었는데, 로고 이미지를 더 큰 파일로 다시 업로드해도 상태가 그대로 유지되고 있었습니다.
특히 데스크톱에서는 문제가 없고 모바일에서만 경고가 발생하고 있었기 때문에 처음에는 원인을 찾기 쉽지 않았습니다. OpenLiteSpeed 캐시 문제인지 LiteSpeed Cache 압축 설정 문제인지 여러 가지를 의심했지만, 실제 원인은 Astra 테마의 모바일 로고 폭 설정이었습니다.
결국 PageSpeed Insights에서 요구하는 예상 크기에 맞춰 로고 폭을 수정했고, 이후 모바일 접근성 경고가 정상적으로 사라지는 것을 확인할 수 있었습니다.
목차
모바일에서만 이미지 해상도 경고가 발생한 이유
PageSpeed 로고 이미지 해상도 오류는 브라우저에 표시되는 실제 크기보다 더 작은 이미지를 강제로 확대해서 사용할 때 자주 나타납니다. 문제는 원본 로고 파일 자체가 아니라 테마에서 모바일 로고 크기를 너무 작게 설정해 두었을 때 발생하는 경우가 많다는 점입니다.
특히 Astra 같은 워드프레스 테마는 모바일 전용 로고 크기를 별도로 조절할 수 있는데, 이 값이 PageSpeed 로고 이미지에서 예상하는 크기와 맞지 않으면 접근성 경고가 표시될 수 있습니다.
PageSpeed Insights에서 표시된 이미지 해상도 경고
PageSpeed Insights 접근성 항목에서 “이미지가 적절한 해상도로 제공됨” 경고가 표시되는 화면입니다. 기본 크기와 예상 크기 차이가 발생하면 모바일에서 이미지 해상도 문제가 있다고 판단하게 됩니다.
PageSpeed 로고 이미지 해상도 오류는 단순 업로드 이미지 크기보다 실제 표시되는 로고 폭 설정과 연결되는 경우가 많습니다. 특히 모바일 헤더 로고가 작게 설정되어 있으면 경고가 발생할 수 있습니다.
워드프레스 사용자 정의하기에서 로고 설정 진입
워드프레스 사용자 정의하기 화면에서 로고 편집 아이콘을 클릭하는 장면입니다. Astra 테마에서는 헤더 로고 영역을 직접 선택해 모바일 로고 크기 설정으로 이동할 수 있습니다.
OpenLiteSpeed 환경에서는 LiteSpeed Cache가 강하게 적용되어 있기 때문에 수정 이후 캐시 정리를 하지 않으면 이전 로고 크기가 그대로 표시될 수도 있습니다.
모바일 로고 폭을 PageSpeed 기준에 맞춰 수정
Astra 테마 사용자 정의하기 화면에서 모바일 로고 폭을 수정하는 장면입니다. PageSpeed Insights에서 표시하는 예상 크기에 맞춰 로고 폭 값을 조절하면 이미지 해상도 경고가 사라질 수 있습니다.
특히 모바일에서는 브라우저 DPR(Device Pixel Ratio) 영향 때문에 단순 로고 파일 크기보다 실제 렌더링 폭 설정이 더 중요하게 작용합니다.
로고 이미지를 다시 업로드해도 해결되지 않았던 이유
처음에는 PageSpeed 로고 이미지 해상도 오류가 발생하자 로고 파일 자체가 작은 문제라고 생각했습니다. 그래서 더 큰 PNG 파일로 교체했지만 상태는 그대로 유지되었습니다.
이유는 모바일에서 실제 출력되는 로고 폭과 브라우저가 요구하는 표시 크기가 서로 맞지 않았기 때문입니다. 즉, 문제는 이미지 품질보다 “테마 내부 출력 크기 설정”에 더 가까웠습니다.
OpenLiteSpeed 환경에서는 캐시 삭제도 같이 진행
로고 폭을 수정한 뒤에는 LiteSpeed Cache와 브라우저 캐시를 같이 삭제하는 편이 좋습니다.
특히 OpenLiteSpeed 서버는 아래 항목이 동시에 캐시되는 경우가 많습니다.
- CSS 캐시
- 모바일 캐시
- 이미지 최적화 캐시
- QUIC.cloud CDN 캐시
이 상태에서 설정만 변경하면 이전 헤더 로고 크기가 계속 유지될 수 있습니다.
그래서 아래 순서대로 진행하는 편이 안정적이었습니다.
- 로고 폭 수정
- 공개 버튼 저장
- LiteSpeed Cache Purge
- 모바일 브라우저 캐시 삭제
- PageSpeed 재분석
수정 이후 접근성 점수 변화
설정을 수정한 뒤 다시 분석해 보니 모바일 접근성 항목에서 PageSpeed 로고 이미지 해상도 오류가 사라졌습니다. 특히 이전에는 접근성 100점이 되지 않았는데, 로고 폭 수정 이후 이미지 해상도 관련 경고가 정상적으로 제거되면서 점수도 안정적으로 유지되는 상태를 확인할 수 있었습니다.
PageSpeed 로고 이미지 경고는 실제 사이트 품질 전체를 결정하는 것은 아니지만, 사용자 경험과 모바일 렌더링 흐름에 영향을 주는 부분이라 한 번 정도는 수정해 두는 편이 좋았습니다.
