The <embed> and <object> elements
what are vector graphics?
you'll work with two types of image- raster images, and vector images :
- Raster Images are defined using a grid of pixcels - .bmp, .png, jpg, gif
- Vector Images are defined using algorithms - svg
the png images becomes pixellated as you zoom in because it contains information on where each picel should be. when it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. the vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.
What is SVG?
SVG is an XML-based language for describing vector images. it's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image
SVG has some additional advantages besides those described so far:
- Text in vector images remains accessible
- svgs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via css or scripted via javascript
why responsive images?
- the body content has been set to a amximum width of 1200 pixels
- the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at
반응형 이미지를 만들때
해상도 전환으로 해결하는 문제는 뭘까? 기기에 따라 단지 크기만 다른, 동일한 이미지 콘텐츠를 보여주고 싶으면 오직 하나의 소스 파일만 제시하도록 되어 있다
<screet>과 <sizes>라는 두가지 속성을 사용해서 브라우저가 올바른 것을 선택 하는데 도움을 주는 소스 이미지와 힌트를 제공 합니다.
>img scrset="xxx.jpg 320w, xxx.jpg 480w, xxx.jpg 800w" sizes="(max-width:320px) 280px, (max-width:480px) 440px, 800px" src = "xxx.jpg" alt="엘바" <
srcset과 size 속성은 복장해보이지만 위에서 보여 준 것처럼 각 행에 속성 값을 나눠 적으면 이해햐기 어렵지 않습니다.
screet은 브라우저에게 제시할 이미지 목록과 그 크기를 정의 한다.
- 이미지 파일명
- 공백
- 이미지 고유 픽셀너비(480w). px이 아니라 w단위를 사용한다는데 주의하며ㅡ 이미지 실제 사이즈
sizes 미디어 조건문들을 정의하고,