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

Shrink Me enables you to easily compress JPG, PNG, WEBP, and SVG images in order to make your site / apps smaller and faster for your users.

shrinkme.app

 

2. Compressor.io

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

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

Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.

compressor.io

 

 

반응형

댓글(2)

  • 2022.09.18 05:22 신고

    방문하고 갑니다! 즐거운 주말 되세요 :-)

  • 엄뇽뇽
    2022.09.18 12:29

    꿀팁 너무 감사합니다. 주변에서 타이니핑 추천해줘서 거기서 압축하고 있었는데 가르쳐주신 곳 써봐야겠어요. 유용한 포스팅 감사합니다.

Designed by JB FACTORY