Friday, December 27, 2013

HTML : Add images to a web page

@Summary
  -. <img> 요소를 사용해 웹 페이지에 이미지를 넣을 수 있음.
  -. 브라우저는 HTML 페이지를 읽고 난 후에 웹 서버로부터 각 이미지를 회수하여 보여줌.

  -. 웹 페이지에 큰 이미지가 있다면 Thumbnail을 활용하는 것이 속도 면에서 좋음.
  -. Thumbnail이란 큰 이미지를 보기 위해 사용자들이 클릭할 수 있는 작은 이미지를 말함.

  -. <img> 요소는 인라인 요소임.
  -. <img> 요소의 src 속성은 이미지 파일의 경로를 명시함.
  -. 같은 사이트의 이미지를 위해 상대 경로를, 다른 사이트의 이미지를 위해 URL을 이용.
  -. <img> 요소의 alt 속성은이미지에 대한 의미 있는 설명을 제공함.
  -. 만약 해당 이미지를 못 찾을 때 일부 브라우저는 이 설명 내용을 보여줄 것임.
  -. 시각 장애인을 위한 스크린 리더기에서도 사용될 수 있음.

  -. 경험적으로 웹 페이지의 사진 이미지 크기는 800px 이하가 적당함.
  -. 사진 편집을 위한 가장 대표적인 tool은 Adobe Photoshop Element xx(현재 12)임.
  -. 브라우저의 웹 페이지 로딩 속도를 고려하여 이미지를 만들어야 함.

  -. 웹브라우저가 널리 지원하는 이미지 형식은, JPEG, PNG, GIF가 있음.
  -. JPEG은 사진이나 다른 복잡한 이미지에 적합함.
  -. PNG나 GIF는 로고단색으로 구성된 간단한 그래픽,, 텍스트에 적합함.
  -. JPEG은 다양한 품질로 압축될 수 있음. 파일 크기와 품질 사이의 최적안 선택이 가능.
  -. PNG와 GIF는 투명한 배경이 가능함.
  -. PNG와 GIF는 무손실 형식이므로 JPEG보다 보통 파일 크기가 큼.
  -. PNG는 GIF보다 투명도 처리가 나음.
  -. GIF는 256색으로 한정되어 있지만 PNG는 종류에 따라 지원하는 색상 선택이 가능함.
  -. 예를 들면 PNG-24, PNG-16, PNG-8(256색 지원)이 있음.

  -. Photoshop Element의Save for Web 대화상자에서 matte 색이라는 것이 있음.
  -. 투명한 PNG 또는 GIF 이미지의 가장자리를 부드럽게 하는 적합한 색에 대한 선택임.

No comments:

Post a Comment