블로그스팟 업로드 이미지 크기 조절

구글 블로그나 플러스, 피카사 등 구글 제품에 이미지를 업로드하면 이미지의 URL 은 다음과 같은 형태를 띄게 됩니다.

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADFk/VlwDT7ESyJwQqykOBy1v0ql2utTkn9yJwCLcB/s1600/Deepnest.jpg

https://lh5.googleusercontent.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADFk/VlwDT7ESyJwQqykOBy1v0ql2utTkn9yJwCLcB/s1600/Deepnest.jpg

이 글에서 다룰 내용은 주소 중간에 있는 s1600 이라는 변수입니다. s1600 은 이미지의 사이즈를 최대 1600까지 허용한다는 의미입니다.

이 s1600이라는 주소는 이미지의 크기가 1600을 넘느냐 아니냐에 따라 의미가 달라지게 됩니다.

1. 사이즈가 1600 이하인 이미지에 s1600 이 적용된다면 이미지를 원본 품질로 출력한다는 의미가 됩니다.
2. 반면, 사이즈가 1600을 넘어가는 이미지에 s1600 이 적용된다면 품질을 낮춰 1600으로 표현한다는 의미가 됩니다.

사이즈 1600을 넘는 큰 이미지를 출력

블로그 운영시 문제가 될 수 있는 부분은 사이즈가 1600을 넘어가는 이미지를 업로드할 경우입니다. 이미지 파일의 크기를 감수하고서라도 큰 사이즈의 이미지를 출력해야할 경우가 있기 마련이죠. 블로그 및 구글 유저 컨텐츠에서 큰 사이즈의 이미지를 원본 품질로 출력하고 싶다면, 즉 이미지 리사이징을 원하지 않는다면 "s***"에 원하는 사이즈 숫자를 입력해주면 됩니다.

이미지 1. 별도의 설정 없이 이미지 업로드. 클릭하면 확대.

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/s1600/Deepnest.jpg

이미지 2. 이미지 업로드 후 HTML에서 이미지 주소를 s1866으로 수정하였음. 클릭하면 확대.

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/s1866/Deepnest.jpg

위 그림은 제가 게임 공략글을 작성하면서 출력한 이미지로, 원본 이미지는 1866 x 735 입니다. 업로드하는 과정에서 사이즈가 1600으로 자동 조절 되었고, 자동 리사이징으로 이미지 품질이 저하되었습니다. (이미지 1.)

이를 해결하기 위해 글쓰기 HTML 메뉴에서 s1600 부분을 s1866으로 직접 수정해주었습니다.(이미지 2.) 그랬더니 이미지의 사이즈와 품질을 원본 이미지대로 출력할 수 있었습니다.

이미지의 최대 너비와 높이 설정

어떤 이미지를 ***px 이하로 출력하고 싶다면 s*** 옵션 대신 w*** 옵션을 주소로 설정할 수 있습니다. 예를 들면 이런식입니다.

w200. 이미지가 최대 200의 너비로 출력되도록 설정

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/w200/Deepnest.jpg

높이 설정도 마찬가지로 할 수 있습니다. 높이를 기준으로 설정하고 싶다면 주소를 'h***' 로 바꿔줍니다.

h150. 이미지가 최대 150의 높이로 출력되도록 설정

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/h150/Deepnest.jpg

높이와 너비를 함께 지정

최대 너비와 높이를 동시에 설정할 수도 있습니다. 예를들어 너비 300px과 높이 200px 어느 쪽도 넘지 않도록 설정하고 싶다면 주소를 'w300-h200' 으로 변경해 줍니다. 이렇게 설정하면 해당 이미지의 비율은 유지한 채로 최대 크기가 300 x 200 을 넘지 않습니다.

w300-h200. 최대 너비와 높이가 300 x 200 을 넘지 않도록 설정

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/w300-h200/Deepnest.jpg

이미지 크롭

이미지를 높이와 너비를 지정해서 표현하되 해당 비율을 넘어가는 부분은 잘라낼 수도 있습니다. 예를 들어 너비 300 높이 20 으로 출력하되 300:20의 비율을 넘어가는 부분을 잘라내고 싶다면 다음과 같이 지정할 수 있습니다.

w300-h20-c. 이미지의 최대 너비와 높이를 300 x 20 으로 설정하고 비율을 넘어가는 부분을 크롭하도록 설정

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/w300-h20-c/Deepnest.jpg

w와 h가 각각 너비(width)와 높이(height)를 의미한다는 것을 알았으니, 이제 우리는 s1600 의 s가 무엇을 의미지하는지 짐작할 수 있습니다. s는 아마도 사이즈(size)를 의미하는 것일 겁니다. s1600 은 1600 x 1600 을 의미하겠죠. 보통의 이미지들은 정사각형이기보다는 1600 x 900 처럼 일정한 비율을 갖고 있으므로, s1600이라는 옵션이 붙으면 높이든 너비든 최대 크기가 1600 을 넘지 않는 선에서 비율대로 출력될 것입니다.

이를 크롭에서도 이용할 수 있습니다. 어떤 이미지를 정사각형으로 잘라내고 싶다면 w와 h대신 단순히 s를 써서 이렇게 표현할 수 있습니다.

s300-c. 이미지의 사이즈를 300 x 300 으로 설정하고 비율을 넘어가는 부분을 크롭하도록 설정

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/s300-c/Deepnest.jpg

이미지 저장 기능

이미지 주소 변경으로 사용자에게 다운로드 링크를 제공할 수도 있습니다. 이미지의 주소 뒤에 '-d' 를 붙이면, 사용자가 이미지를 클릭할 때 다운로드 창으로 이어집니다.

이미지를 클릭하면 다운로드 창으로 이어진다.

https://2.bp.blogspot.com/-EppsmEo8pRE/WT989hX25DI/AAAAAAAADF4/zMvDaePjnsMxomAN_-LTc7AL6uQ1z1iKwCPcBGAYYCw/s1600-d/Deepnest.jpg