FullSize 배경 이미지 & 이미지 용량 압축하는 방법

fullscreen website [출처: awwwards 작품]

FullSize의 이미지로 배경을 하는 사이트를 만들 때 간혹 이미지의 가로 폭을 고려하지 않고 만들다가 이미지가 깨져버리는 경우가 발생 할 수 있다.

 

FullSize 이미지 설정방법에 대해 간단하게알아보자

FullSize 배경 이미지 설정방법

1. 가로 폭이 1200~3000px 정도인 이미지를 준비한다.

2. 이미지가 들어갈 영역의 높이를 100vh 로 설정한다. (100vh를 쓰는 이유는 부모 태그의 높이의 관계 없이 일정 높이를 갖기 귀함이다.).

 

Background 속성

풀사이즈 배경을 바탕으로 여러 이미지들을 위치 시키고 싶을 때에는

background-image: url1, url2;
background-position: center, center;

와 같이 “, (쉼표)”만으로 구분하여 한번에 적용시킬 수 있다.

 

반응형

 

이미지 파일 용량 줄이기

이미지가 많이 들어가면 웹 페이지 로딩 시간이 길어진다. 따라서 용량을 줄이는 방법을 생각해야 되는데.

로딩 속도를 높이기 위해 용량을 압축해주는 사이트를 소개해보겠습니다.↓↓

 

1.Shrink Me (추천)

• 이미지를 간단히 드래그 해서 화질은 그대로 유지한채 용량 압축이 가능한 사이트 입니다. 변환 시간이 매우 빨라서 인기가 있는 사이트 이다.

Shrink Me - Compress JPG, PNG, WEBP, and SVG Images

 

2. Compressor.io

• Shirink Me 페이지와 비슷한 사이트 이지만, 보다 압축및 다운로드에 시간이 걸린다고 생각하면 된다.

Compressor.io - optimize and compress JPEG photos and PNG images