티스토리 이미지 비율 고정 방법, 이미지 공간 확보 방법

 티스토리 블로그에서 이미지의 width와 height 속성을 고정하거나 가로세로 비율을 파악하여 공간을 미리 확보하면 블로그 레이아웃이 안정되어 다른 요소들이 밀리거나 왜곡되는 것을 방지할 수 있으며, 로딩 속도를 개선하여 블로그의 품질을 높일 수 있습니다. 이러한 방법은 CLS 초과 문제가 발생했을때도 해결책으로 활용할 수 있습니다.

 

 

1. 이미지 width 속성 고정하는 방법

 티스토리 CSS 맨 하단에 아래의 속성을 추가해주면 width(너비) 속성을 고정하면, height(높이)는 비율에 맞게 자동으로 설정됩니다. 이는 사용자의 상태에 맞게 이미지의 크기를 조정해주는 역할을 하지만, 미리 공간을 확보하지 못해 이미지가 로드되며 텍스트를 페이지 아래로 내려가게하여 사용자에게 불편함을 초래할수도 있어 주의해야 합니다.

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

이미지 width 고정.txt

0.00MB

 

 

2. 이미지  공간 계산 후 미리 확보하는 방법 - 최신 권장사항

 위의 문제에 대한 해결책으로 최근에는 이미지의 가로세로 비율을 파악하여 브라우저에서 필요한 공간을 계산하고 예약하는 방법을 적용할 수 있습니다. 다음의 속성을 티스토리 스킨편집-> CSS 맨 하단에 추가하면 이미지가 로드되기 전에  width 및 height 속성을 기반으로 가로세로 비율을 계산하여 공간을 확보합니다. 이미지의 너비가 특정 값(예: width: 100%)으로 지정되는 즉시 가로세로 비율이 사용되어 높이가 계산됩니다.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

이미지 공간 계산 후 미리 확보.txt

0.00MB