[번역] How CSS display:none Affects Images on Page Load

 

Author: Santiago García da Rosa

 

We are always looking for ways to improve how our clients manage their images, we have made that part of our mission and part of our culture.

우리는 고객들이 이미지를 관리하는 방법을 개선하기 위한 방법을 찾고 있고, 이는 우리의 미션과 문화의 일부입니다.

 

Working with one of our clients, we noticed that their image traffic on mobile was three times more, compared to similar websites. When we started investigating, we realized that they were hiding a lot of images by setting the property display to none using media queries.

우리는 고객 중 한명과 일하면서, 그들의 모바일에서의 이미지 트래픽이 유사한 웹 사이트와 비교했을 때 세 배 더 많음을 발견했습니다. 우리가 시간을 투자하며, 그들이 미디어 쿼리를 사용해 display 속성이 none으로 설정된 많은 이미지를 숨기고 있음을 알게되었습니다. 

 

While the goal of hiding the images was accomplished, the browser requests for the hidden images were still being sent, which had a direct negative impact on the site load performance.

이미지를 숨기는 목적은 달성되었지만, 숨겨진 이미지에 대한 브라우저의 요청은 전송되었으며 이는 사이트의 로드성능에 직접적으로 부정적인 영향을 미쳤습니다. 

 

Setting display:none to images or to image containers does not prevent the browsers from requesting the image.

이미지나 이미지 컨테이너에 'display: none'을 설정하는 것은 브라우저가 이미지를 요청하는 것을 막지 못합니다.

 

 

How “display:none” Works for Images

As you would expect, images behave like any other element when you set the property display to none, the image is not shown and doesn’t occupy any space on the DOM.

예상하듯이, 이미지는 display 속성을 none으로 설정하면 다른 요소처럼 동작합니다. 이미지는 보여지지 않고 DOM에서도 공간을 차지하지 않습니다.

 

The problem is that browsers, due to the possibility of a script dynamically changing an element of the DOM, will load every element present in the DOM, and if the images are hidden but are in the DOM then they’ll send the network request for that image.

문제는 DOM 요소가 동적으로 변경될 수 있다는 가능성 때문에 브라우저는 DOM에 있는 모든 요소를 로드하고, 이미지가 숨겨져 있지만 DOM에 있다면 브라우저는 그 이미지에 대한 네트워크 요청을 보낸다는 것입니다. 

 

This means that, in the case of an image, it is going to be requested anyway when, in most case scenarios, you are not going to use it.

이는 대부분의 경우 당신이 이미지를 사용하지 않더라도 이미지가 요청되는 것을 의미합니다. 

 

Let’s take a look at an example:

예시를 봅시다:

In the code above, we set display:none to a div that contains four images to hide them from the DOM.

위 코드에서, 네개의 이미지를 포함한 div tag에 'display: none'을 설정해 DOM에서 이미지를 숨겼습니다.

 

If we take a look at the network when loading this HTML, this is the result:

이 HTML을 로드하는 동안 네트워크 활동을 살펴 보면 이와 같은 결과를 관찰할 수 있습니다. 

The images are not shown but the requests are made (the result would be the same if we apply display:none to each image).

이미지는 표시되지 않지만 요청은 일어났습니다. - 각 이미지에 'display: none'을 적용한것과 결과는 같습니다. 

 

This doesn’t impact the browser rendering of the DOM but it does impact the site content load.

이는 브라우저에서 DOM을 rendering하는데 영향을 주지 않지만, 사이트의 컨텐츠 로드에는 영향을 미칩니다. 

 

If you are going to be toggling the visibility of the image, then this is not a big problem, it may even be better if it is already loaded.

만약 이미지의 가시성을 토글링한다면, 이는 큰 문제가 아니며 이미지가 이미 로드 되었다면 오히려 더 좋을 수 있습니다.

 

But, if you are not planning to show the images or the chances of showing them are really low, then this situation is actually a problem.

그러나, 이미지를 보여줄 계획이 없거나 보여줄 가능성이 낮다면, 그럼 이러한 상황은 실제로 문제가 될 수 있습니다. 

 

 

Solutions

1. You can prevent the HTML containing the images from being loaded into the DOM instead of using display:none, and add it later if you need to. This is super easy to accomplish if you are using a framework like Angular or React. You just avoid rendering the HTML with an if statement for example. This is also super simple if you are using Vanilla JavaScript.
2. Use your images, or at least the ones that you intend to hide, as background images. Background images don’t get loaded if the element is hidden.

 

1. 이미지를 포함한 HTML이 DOM에 로드되는 것을 막을 수 있고 'display: none'을 사용하는 것 대신 당신이 필요할 때 추가할 수 있습니다. 이는 Angular나 React와 같은 프레임워크를 사용한다면 이를 쉽게 구현할 수 있습니다. 예를 들어 if 구문을 사용해 HTML을 렌더링하지 않도록 할 수 있습니다. Vanilla JavaScript를 사용한다면 이는 또한 매우 간단합니다. 
2. 이미지나 숨기려는 이미지를 배경 이미지로 사용하세요. 배경이미지는 요소가 숨겨지면 로드되지 않습니다. 

 

 

Conclusion

Images get requested by the browsers even if they have the display property set to none.

이미지는 display 속성값이 none으로 설정되어 있을지라도 브라우저에 의해 요청됩니다. 

 

To prevent this, you can implement the solution I mentioned before, but if you are going to be toggling the visibility of the image too much, adding and removing the image from the HTML can be an unnecessary cost of performance that you can avoid by using the display:none property.

이를 막기 위해 앞서 언급한 해결책을 구현할 수 있습니다. 하지만, 만약 이미지의 가시성을 자주 토글링한다면 HTML에서 이미지를 추가하고 제거하는 것은 성능에 불필요한 비용일 수 있으며 이러한 비용을 피하기 위해 'display: none' 속성을 사용할 수 있습니다.

 

Using solution 2 is way better as you can just use CSS without having to manipulate the DOM.

해결책 2(배경으로 이미지 사용)를 사용하는 것은 DOM을 조작할 필요 없이 CSS를 사용할 수 있므로 훨씬 더 좋습니다. 

 

 

 

reference) 

How CSS display:none Affects Images on Page Load