"PageSpeed Insight" 이미지 요소에 width 및 height가 명시되어 있지 않습니다 (feat. 티스토리)

"PageSpeed Insight" 성능 검사시 "이미지 요소에 width 및 height가 명시되어 있지 않습니다"의 원인 확인 및 해결방법입니다.

티스토리 블로그를 관리하며, 성능을 향상시키기 위해서 "PageSpeed Insight"를 사용해보셨을 겁니다.

검사 결과 중 위에서 말씀드렸던 "이미지 요소에 width 및 height가 명시되어 있지 않습니다"라는 문제가 발생할 수 있습니다.

여기서 "width = 너비", "height = 높이"를 말하며, 쉽게 말한다면 가로와 세로의 길이를 나타냅니다.

티스토리 블로그에서는 이미지의 크기가 업로드시 자동으로 작성되지만, javascript로 불러오거나 하는 썸네일 같은 이미지에 대해서는 직접 크기를 입력해 주어야 합니다.

티스토리 블로그를 운영중이라면 위 문제가 썸네일 때문에 생겼을 것이라고 예상하며 글을 작성하겠습니다.

1. 정확한 원인 파악

만약 성능 검사시 "이미지 요소에 크기가 명시되어 있지 않습니다"라는 진단 결과가 나왔다면, 일단 그 문제가 발생한 원인을 확인해야 합니다.

· 해결해야 하는 문제에 마우스 커서를 올려두고 클릭합니다.

· 아래처럼 문제 원인들이 나열된 드롭 다운 페이지(문제 목록)를 확인할 수 있습니다.

· 좌측에 있는 미리보기 이미지를 클릭합니다. HTML 코드를 알고 계신다면, 화면에 있는 코드를 확인하셔도 됩니다.

· 미리보기 화면을 보면 어느 페이지에서 어떤 이미지가 문제가 되는지 확인할 수 있습니다.

· 문제의 원인이 파악되었다면 문제 해결로 넘어가도록 하겠습니다.

2. 문제 원인 수정

위에서 확인한 결과, 저의 경우는 썸네일의 가로 세로 크기가 누락되었다고 확인되었습니다.

만약 썸네일(Thumb, Thumbnail)이 문제라고 한다면,

웹페이지 화면의 구조를 관리하는 "CSS"와 만약, 불러온 썸네일 이미지가 잘려 보이거나 비율이 맞지 않다면 "HTML"도 수정해 주시면 됩니다.

<반드시 사전에 처리해야 할 일>

하지만 최우선 적으로 먼저 처리해야할 문제가 있습니다. 바로 사용된 모든 이미지를 화면 크기에 맞도록 이미지의 크기를 변경해주어야 합니다.

(참고 링크) "티스토리" 화면 크기에 맞게 모든 이미지 자동 조절하는 방법!!

<웹페이지 썸네일 구조의 크기 변경>

이제 썸네일 이미지를 수정해 보도록 하겠습니다.

· "CSS" 편집창으로 들어가서, [Ctrl + F]로 찾기 창를 활성화해 "thum img"를 찾습니다.

· 아래와 같이 "post-item .thum img" 크기 값을 수정해 줍니다.
처음 값 : "width: 100%;", "height: auto;"
수정 값 : "width: 100%;", "height: 200;"
(참고 사항) 값 수정 후 상단 새로고침하여 확인하고, 원하는 썸네일 크기가 맞다면 적용합니다.