Blogger에서 이미지를 편집할 때 유용한 매개변수 모음과 적용 방법입니다. 이미지의 크기를 조정하고 효과를 적용할 수 있습니다.
지난 포스팅에서 Blogger(이하 블로그스팟) 블로그스팟에서 썸네일을 원하는 이미지로 표시하는 방법과 흐릿한 이미지를 선명하게 표시하는 방법에 대한 글을 작성했습니다. 이 글에서는 블로그스팟에 업로드한 이미지를 더욱 세부적으로 편집할 수 있는 방법을 소개합니다.
블로그 스팟에 업로드 한 이미지는 다음과 같은 형태로 출력되며 URL은 다음과 같은 형식입니다.
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5fntAEsa5RXIqQG07a4iJAQL87G4XMGiytbQRPyWigq1JgqHDndPTBUpbszo4Iy_rHni48bqd5836DHITOvlh6z_YyMQXxlK-pXhiwkyyIqZ2ydFWc3dZ_ZcKdSDF_F4snyf_5jK0RB8ihy_7NDTQmDgBuamIkV1uR11V0nYglJVseEocfV1oGePJg/s320/sample_image.webp" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="853" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5fntAEsa5RXIqQG07a4iJAQL87G4XMGiytbQRPyWigq1JgqHDndPTBUpbszo4Iy_rHni48bqd5836DHITOvlh6z_YyMQXxlK-pXhiwkyyIqZ2ydFWc3dZ_ZcKdSDF_F4snyf_5jK0RB8ihy_7NDTQmDgBuamIkV1uR11V0nYglJVseEocfV1oGePJg/s320/sample_image.webp"/></a></div>
이미지 URL은 두 개이며 <a>태그 안에 있는 URL은 라이트박스 사용 시 필요합니다. 라이트박스를 비활성화 했다면 필요하지 않으니 삭제를 해도 되지만, 이미지를 가운데 정렬하려면 스타일을 추가해야 합니다. text-align: center;
이미지 크기 조정
다음은 이미지 크기 조정 예시입니다. 매개변수 뒤에 오는 숫자를 변경해서 작성하면 됩니다. 위 이미지 주소 예시에서 형광펜으로 표시된 부분을 수정합니다.(s320)
- s0 - s 매개변수 뒤에 0을 붙여 업로드된 이미지를 원본 크기로 가져옵니다. 예를 들어 위 샘플 이미지를 원본 이미지로 가져오려면 URL의
s320을s0으로 수정합니다. - s500 - 매개변수 s와 함께 숫자를 사용하는 경우 가로와 세로 중 가장 큰 치수가 최대 500px인 이미지를 가져옵니다.
- w500 - 지정한 너비의 이미지를 가져오려면 이 매개변수를 사용합니다. 너비가 500px인 이미지를 가져옵니다.
- h300 - 지정한 높이의 이미지를 가져오려면 이 매개변수를 사용합니다. 높이가 300px인 이미지를 가져옵니다.
- w700-h350 - 너비와 높이의 크기를 모두 지정한 경우, 원본 이미지와 비율이 맞다면, 700X350의 지정한 사이즈의 이미지를 가져오고, 비율이 맞지 않으면 높이 매개변수를 우선하여 가져옵니다.
블로그 게시물에서 보여지는 이미지의 너비와 높이는 width, height 원하는 값을 직접 넣어야 합니다.
예:
예:
width="1280" height="720"이미지 자르기(Crop)
- c - (윗부분 기준)이미지를 지정된 사이즈로 자릅니다. 매개변수는 하이픈
-으로 연결하여 사용할 수 있습니다. 위 이미지는w500-h150-c를 적용한 예시입니다. 윗부분을 기준으로 500X150으로 잘렸습니다.
- n - (중앙 기준)이미지를 지정된 사이즈로 자릅니다. 위 이미지는
w500-h150-n를 적용한 예시입니다. 중앙을 기준으로 500X150으로 잘렸습니다.
- p 또는 pp - (중앙 기준) 정사각형으로 이미지를 자릅니다. 너비와 높이의 값이 같아야 합니다. 예를 들어 400X400 크기로 이미지를 자르려면
w400-h400-p와 같이 작성합니다. 입력한 너비와 높이의 비율이 정사각형이 아니면 정사각 비율로 유지되지 않습니다. (사진 왼쪽)
- ci - 이 매개변수 또한 정사각형으로 자르는 매개변수입니다. 이 매개변수는 너비와 높이의 값을 같게 지정하지 않아도 정사각으로 잘립니다. 지정된 너비나 높이 중에 낮은 값을 기준으로 적용되니 같은 값으로 지정하는 게 좋겠죠!
위 예시는w500-h50-ci를 적용하였습니다. 너비와 높이 중에 낮은 값이 높이이기 때문에 내부적으로 50px의 이미지로 잘린 이미지입니다. 앞서 p 매개변수를 적용한 값과 실제로 보여지는 크기는 같으나 50px의 이미지를 400px로 늘려 놓은 것이기 때문에 이미지 품질이 낮은 것을 확인할 수 있습니다.(사진 오른쪽)
- pf - 얼굴 인식 자르기입니다. 종횡비가 유지되지 않고 중앙에서 자르기가 시작됩니다. 위 이미지는 얼굴 인식 자르기 적용 전‧후 사진입니다.
w300-h400-pf를 적용했는데 (중앙 기준) 인물을 인식하고 이미지가 크롭된 것을 확인할 수 있습니다.(손흥민 화이팅, 대한민국 화이팅!🇰🇷)
- cc - 원형 자르기입니다. 원형으로 자른 나머지 부분을 투명화합니다. 너비와 높이를 같은 값으로 하지 않으면 높이의 값을 우선하기 때문에 위, 아래에 큰 공백이 생기므로 같은 값으로 설정하세요. 예:
w400-h400-cc
- nu - 원래 크기를 초과하는 크기 조정을 방지하는 매개변수입니다.
기타 이미지 편집 방법
- fv - 이미지를 수직(위 아래)으로 반전합니다.
- fh - 이미지를 수평(좌우)으로 반전합니다.
- r - 이미지를 회전합니다. 가능한 각도는 90,180,270도를 사용할 수 있습니다. 작성 방법:
w400-h400-ci-r270
- b - 이미지에 테두리를 적용합니다. 테두리의 두께와 16진수 컬러 코드를 사용하여 테두리 색상을 조정합니다. 위 이미지는 두께가
3px인#eeeeee색상의 테두리를 표시하였습니다. 작성 방법:s320-b3-c0xffeeeeee - fSoften - 이미지에 블러 효과를 적용합니다. 작성 방법은 다음과 같습니다.
fSoften=1,5,0가운데 숫자로 흐림 효과의 강도를 조정합니다. (0~100) - fVignette - 이미지에 그라디언트와 테두리 그림자를 적용합니다. 작성 방법은 다음과 같습니다.
fVignette=1,100,1.5,0,aaaaaa세 번째 숫자로 그라데이션의 적용 범위를 조정하고, 16진수 색상 코드로 테두리 그림자 색상을 지정합니다.
이미지 파일 형식‧압축‧캐시
- rj - 이미지를 JPG 형식으로 가져옵니다. 예를 들어 PNG로 업로드한 이미지를 JPG 형식으로 가져올 수 있습니다. 작성 방법은 다음과 같습니다. 예:
s0-rj - rp - 이미지를 PNG 형식으로 가져옵니다.
- rw - 이미지를 WebP 형식으로 가져옵니다.
- rg - 이미지를 GIF 형식으로 가져옵니다.
- rh - 움직이는 GIF를 MP4 형식으로 가져옵니다. 적용 방법은 다음과 같습니다.
<video width="500" controls> <source src="https://이미지 경로/s0-rh/image.gif" type="video/mp4"> </video>
- l - JPEG 이미지를 압축하는 매개변수입니다. 예를 들어 원본 이미지 크기의 JPEG 형식의 이미지를 10% 압축하려면 다음과 같이 작성합니다. 예 :
s0-rj-l9020%만큼 압축한다면l80이 되겠죠! - e - 이미지 캐시를 적용합니다. 30일 동안 이미지를 캐시하려면 다음과 같이 작성합니다. 예:
s0-e30
티스토리와 네이버 블로그와 비교하면 불편하지만 여기 있는 모든 매개변수를 전부 다 사용하지는 않을 것이기 때문에 몇 가지 중요한 매개변수를 적용하여 이미지 태그를 서식으로 만들어 사용해보세요! 그나마 조금 편해집니다.😅