[ETC] 웹 이미지

웹 이미지

 

비트맵 vs 벡터

• 필요에 따라서 어떠한 이미지 포맷을 선택하느냐
• 이미지는 일반적으로는 벡터보다는 비트맵이 효과적
• 단순 구조한 아이콘, 로고, Material image등이 벡터로 만들는게 효과적
• Material Design은 고품질 디지털 경험을 구축할 수 있도록 Googl에서 만든 디자인 시스템(방식)

BeatMap

JPG(JPEG)

(Joing Photographic coding Experts Group)

• Full-color 와 Gray-scal의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진아니 예술 분야에서 많이 사용
• 손실 압축방식을 사용(이미지가 손실되면서 압축되는 것) - 용량이 획기적으로 준다
• 반복적으로 저장하는 행위는 X 이미지가 바래진다

PNG

(Portable Network Graphics)

• Gif의 대체 포맷으로 개발됨
• 비손실 압축으로 이미지가 손실되지 X
• 품질은 유지되지만 용량이 비교적 크다
• Alpha Channel 즉 투명한 부분을 지원한다 - 투명한 영역을 지원하기 때문에 원하는 이미지 영역만 화면에 출력되게 만들 수 있다

GIF

(Graphics Interchange Format)

• 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
• 24비트 컬러는 지원하지 X
• 다양한 색상 표현에는 적합하지 않지만 움짤이나 애니메이션 같은 한 장의 이미지를 사용할 때 유용

WEBP

• JPG,PNG,GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
• 나온지 비교적으로 최근이라 지원되는 브라우저를 확인해야 한다 (IE제외 대부분 브라우저는 지원)

Vector

SVG

(Scalable Vector Graphics)

• 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
• 점과 선과 면에 수학적인 정보들을 가지고 있기 때문에 이미지를 아무리 키워도 정보를 바꾸지 않는 이상 해상도가 영향을 받지 않는다
• 아이콘이나 로고등 이미지나 해상도를 변경해야되는 환경에서 사용

특수 문자 용어

`

Backick, Grave (백틱, 그레이브)

~

Tilde(틸드)

!

Exclamation mark(엑스클러메이션, 느낌표)

@

At sign (앳, 골뱅이)

#

Sharp, Number sign(샵, 넘버, 우물 정)

$

Dollar sign(달러)

%

Percent sign(퍼센트 사인)

^

Caret(캐럿) - 무엇인가에 이상일 때 사용

&

Ampersand(엠퍼샌드)

*

Asterisk(에스터리스크, 별표)

_

Hyphen, Dash(하이픈, 대시, 마이너스)

_

Underscore, Low dash(언덧코어, 로대시, 밑줄)

=

Equals sign(이퀄)

“

Quotation mark(쿼테이션, 큰 따옴표)

‘

Apostrophe(아포스트로피, 작은 따옴표)

:

Colon(콜론)

;

Semicolon(세미콜론)

,

Comma(콤마)

.

Period Dot(피리어드, 닷, 점, 마침표)

?

Question mark(퀘스천 마크)

/ slash(슬래쉬)

|

Vertical bar (버티컬 바)

\

BackSlash(백슬래시, 역 슬래시

()

Parenthesis(퍼렌서시스, 소괄호, 괄호)

{}

Brace(브레이스, 중괄호)

[ ]

Bracket (브래킷, 대괄호)

<>

Angle Bracket(앵글 브래킷, 꺽쇠괄호)

 

 

출처:

https://heropy.blog/