블로그 스팟(blogger)에 업로드 된 이미지를 간편하게 편집하는 12가지 방법
블로그 스팟(blogger)에 업로드 된 이미지를 간편하게 편집하는 12가지 방법에 대해 알아보겠습니다. 많은 Blogger 기능이 일반 사용자에게 숨겨져 있습니다. 그 중에서 가장 강력한 기능 중 하나는 블로그 게시물에 사용된 이미지를 사용자 지정하는 방법입니다. 이번 포스팅에서는 Blogger에 업로드 된 이미지에 적용할 수 있는 여러 유형의 최적화및 효과에 대해 이야기해 보겠습니다.
블로그 스팟(blogger) 플랫폼에 업로드 된 이미지는 Google App Engine에서 내부적으로 호스팅 되기 때문에 우린 강력한 구글 서버를 무료로 사용할 수 있을 뿐만 아니라, 구글이 제공하는 이미지 최적화 기능도 무료로 사용할 수 있습니다. Let's start!
원본 이미지
블로그 스팟(blogger)에 업로드된 이미지의 주소 형식
위 이미지의 주소는
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPSV314L3Vp37Cbd_bac28oZlHpIUR8hvvaJwIMAgrjLHgSCI0ZwY_wGATzQwrMKO2nLKPsJNp6QbLZn9zekhraw1Q2luS5v7Nnhdi56pAPwaNFxvslGvL_SCMSNREbxYkl_VioHCPs-GCCwkrcHUsOI0Jr91lRkxoKiS98qIl114K4xUBGbm0zNY2Ihv/w400-h400/testimage.png
입니다.
우리가 눈 여겨 봐야 할 부분은 w400-h400/testimage.png 입니다. testimage.png 은 이미지의 파일명입니다. 뒤에 다른 방법을 말하겠지만, 이미지 확장자명을 바꾸는 것 만으로 파일 형식을 바꿀 수 있습니다.
testimage.png 에서 확장자를 webp로 바꾸는 것만으로 우린 webp 이미지를 가져다 쓸 수 있습니다.
한 번 테스트 해 볼까요? 이 아래에 URL사용으로 이미지 삽입을 해보겠습니다.
삽입하는 이미지의 URL은
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPSV314L3Vp37Cbd_bac28oZlHpIUR8hvvaJwIMAgrjLHgSCI0ZwY_wGATzQwrMKO2nLKPsJNp6QbLZn9zekhraw1Q2luS5v7Nnhdi56pAPwaNFxvslGvL_SCMSNREbxYkl_VioHCPs-GCCwkrcHUsOI0Jr91lRkxoKiS98qIl114K4xUBGbm0zNY2Ihv/w400-h400/testimage.webp
입니다. 원본 이미지의 주소에서 파일 확장자명을 webp로만 바꾼 것입니다.
확장자를 webp로 바꾼 이미지
위 이미지 위에 마우스를 올려 두시고, 마우스 오른쪽 클릭, 새 탭에서 링크 열기 또는 새 탭에서 이미지 열기를 해보세요. 그리고 주소창을 확인해보세요.
주소의 마지막 부분이 4xUBGbm0zNY2Ihv/w400-h400/testimage.webp 이렇게 바뀐게 보이시나요? 새 탭에 나타난 이미지를 저장해 보세요. 파일 확장자명이 webp로 되어 있을 것입니다.
이렇게 구글 서버에 저장된 이미지의 url을 바꾸는 것 만으로 우린 파일형식을 바꿀 수 있었습니다. 그런데, 이건 새발의 피라는 것! (*￣3￣)╭ 더 강력한 기능들을 지금부터 소개하겠습니다.
이미지 크기 조정 및 자르기
지금부터 이미지 주소의 붉은 부분을 변경함으로써 이미지를 편집해 보겠습니다.
s0 (원본 이미지 크기)
블로그 게시물 내에서 업로드 된 이미지를 원래 크기로 표시해야 하는 경우가 많습니다. 이렇게 하려면 매개변수에 s0을 추가하기만 하면 됩니다.
/s0/testimage.png
s000 (가장 큰 치수의 000픽셀 이미지)
원본 이미지의 크기는 512x512입니다. 가로, 세로 둘 다 512픽셀이죠.
여기서 후회가 되네요. 예로 들, 원본이미지의 크기를 다른 걸 했어야 했는데~(>_<。)＼
아무튼, s000의 의미는 가로, 세로의 크기 중 더 큰 크기를 s000으로 맞춰서 조정하겠다는 뜻입니다.
예를 들어 512x1024의 이미지가 있고, s300을 적용하면,
1024의 크기를 300으로 바꾸고, 그에 맞게 이미지를 조정하겠다는 이야기입니다.
한번 테스트 해보겠습니다.
/s150/testimage.webp
w000
고정된 너비의 이미지를 사용하려면 w 매개 변수를 사용합니다. 예: /w250/
h000
고정된 높이의 이미지를 사용하려면 w 매개 변수를 사용합니다. 예: /h250/
예를 들어 너비와 높이를 모두 지정하는 경우 이미지의 가로 세로 비율을 유지하기 위해 height 매개 변수가 우선적으로 적용되고 width 매개 변수를 재정의합니다.
c (지정된 치수로 이미지 자르기)
간단한 이미지 자르기 매개 변수이며 너비 및 높이 매개 변수와 함께 사용됩니다.
/w230-h150-c/
cc (원형 이미지 자르기)
너비 및 높이 매개 변수도 제공되면 잘린 부분과 관련하여 후자가 우선합니다. 잘린 부분 바깥쪽 영역은 투명한 배경으로 반환됩니다.
/w230-h150-cc/
효과, 필터, 편집
fv (이미지 뒤집기 - 세로)
이미지를 세로로 뒤집으려면 이 옵션을 사용합니다. 원본 사이즈로 이미지를 세로로 뒤지어 보겠습니다.
/s0-fv/
제 블로그 테마 때문에 이미지가 자동 조정되는 부분이 있어, 지금부터 이미지 주소 링크로 대신하겠습니다. 귀찮으시겠지만, 링크를 클릭해서 이미지를 확인해 주세요.
fh (이미지 뒤집기 - 수평)
/s0-fh/
r (이미지 회전)
90도, 180도 및 270도의 세 가지 회전 각도를 사용할 수 있습니다./s0-r90/
rj (JPG 변환)
/s0-rj/
이미지의 주소에 표시되는 확장자는 webp이지만, 이미지를 저장해서 확인해보시면 JPG 파일입니다.
png, webp, gif 모두 같은 형식이며, 각 매개변수는 다음과 같습니다.
png: rp
webp: rw
gif: rg
rh(gif->mp4)
gif파일을 mp4형식으로 가져오는 매개변수입니다. 저는 아직까지 사용해본 적이 없네요.
<video width="480" controls><source src="https://xxxx/s0-rh/image.gif" type="video/mp4"></video>
이런 식으로 사용이 가능하다고 합니다.
사용자 정의 테두리/프레임 설정
일반적으로 사용자 정의 테두리 또는 이미지 주위에 프레임을 적용하기 위해 CSS 규칙을 사용합니다. 하지만 CSS 코드를 사용하지 않고 그렇게 할 수 있다면 어떨까요?
다행히도 두 매개 변수의 조합을 통해 사용자 지정 테두리를 쉽게 얻을 수 있습니다. 첫 번째 매개 변수는 지정된 픽셀 두께의 테두리를 이미지에 추가합니다.
두 번째 매개 변수는 테두리 색상을 16진수 형식으로 지정하는 데 사용됩니다.
/s0-b10-c0xffeeeeee/
마무리
지금까지 12개의 매개변수를 이용하여, 블로그 스팟(blogger)에 업로드 된 이미지를 간편하게 편집하는 방법에 대해 알아보았습니다. 긴 글을 읽어 주셔서 감사합니다.
더 많은 매개변수를 확인하시려면 아래 github페이지를 참고하세요.
Comments
댓글 없음 :
댓글 쓰기