0018 이미지를 보여주는 img 요소 03 이미지 다루기

0018 이미지를 보여주는 img 요소 03 이미지 다루기

5. HTML 페이지가 이미지를 다루는 법

HTML 페이지는 순수하게 텍스트일 뿐이어서 이미지가 중간에 삽입되거나 하지 않는다. 그렇다면 웹 브라우저는 <img /> 요소를 어떻게 보여주는가?

    

웹 브라우저는 웹페이지를 위에서 아래로 차례대로 읽으면서 텍스트들은 바로바로 화면에 표시하고 <img /> 요소를 읽으면 일단, <img /> 요소가 표시될 공간을 확보해놓고 다음을 읽으면서 계속 화면을 표시한다.

    

웹 브라우저는 표시할 이미지 파일을 서버에서 가져와서 해당 이미지를 위하여 확보된 공간에 로딩하기 시작한다. 이 과정은 웹페이지 파일을 읽어서 표시하는 과정과 별도로 이루어진다. 

    

<img /> 요소로 정의된 이미지들은 기술적으로는 HTML 페이지에 삽입되는 것이 아니라 HTML 페이지에 링크로 연결되는 것이다. <img /> 요소가 하는 일은 참조하려고 하는 이미지가 배치될 공간을 준비하는 것이다.

    

이 때, <img /> 요소에 속성으로 이미지가 들어갈 공간의 크기(size)를 정하지 않았을 경우 이미지가 나중에 로드되면서 공간이 벌어져 웹 페이지가 출렁거리는 것을 볼 수 있다.

6. 이미지 형식

웹에서 일반적으로 사용되는 이미지 형식은, JPEG, PNG, GIF이다. 

    

이러한 이미지 형식을 어떤 상황에 어떻게 써야하는지 간략하게 알아보자. 

JPEG 형식

    

가장 넓은 범위의 색(1,600만개의 색)을 지원하는 이미지 형식이므로 다양한 색이 연속적으로 표현되어야 하는 사진이나 스캐너 등에서 가장 흔히 사용되는 이미지 형식이다.

    

이미지 원본을 훼손하여 파일 크기가 감소되는 ‘손실이 많은’ 압축형식이다. 

   

그래픽 품질을 떨어뜨려 압축하면 용량이 작이지므로 웹에서 효율적으로 사용 가능

   

JPEG는 투명도와 애니메이션을 지원하지 않는다. 

PNG 형식

   

PNG는 몇 가지 단색이나 로고, 클립아트 같은 선이 있는 이미지, 텍스트가 있는 이미지에 가장 잘 맞는다.

    

PNG는 수백만 가지의 다른 색(표현하고자 하는 색의 수에 따라서 PNG-8, PNG-24, PNG-32 세 가지로 분류)을 가진 이미지를 표현할 수 있다. 

    

PNG는 파일을 압축해 크기를 줄이지만, 원본을 훼손하지 않는 무손실 압축형식이다.

   

투명 모드 설정을 할 수 있어 이미지 밑으로 모든 것을 볼 수 있다.

    

JPEG와 비교하면 파일 크기는 커지는 경향이 있지만, 사용된 색상의 수에 따라 GIF보다 작거나 커질 수 있다. 

GIF 형식

    

PNG와 마찬가지로 GIF는 몇 가지의 단색이나, 로고, 클립아트 같은 선이 있는 이미지, 텍스트가 있는 이미지에 가장 잘 맞는다. 

    

GIF는 256가지 색상을 표현할 수 있다.

    

GIF는 무손실 압축형식이다. 

    

GIF는 오직 한 가지 색상만 ‘투명’하게 설정할 수 있다.

    

애니메이션을 지원한다. 

     

JPEG와 비교해 파일 크기가 크다.

결론적으로 사진이나 복잡한 그래픽에는 JPEG를 사용하고 단색이나 로고, 기하학적 모양의 이미지에는 PNG나 GIF를 사용하는 것이 적절하다.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0018 이미지를 보여주는 img 요소 03 이미지 다루기.apkg