구글 블로그스팟 이미지 URL 200% 활용하는 방법
구글 블로거의 이미지 URL은 다음과 같습니다.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWH_JS6R5WksddNeHcUDCWGsHg_6FATZhGFKL7ahyi8nRakGDMleT6UfEwhU80ZmWIA_-7Sr5LHNRAQ8R6c3M9ae8oagrPkcXT2Cs-2M3wpE_4axvauDrE7jRzK_7__siwbFjw37OLTpiv9xJOwMBJ_cpFCP3m9yTvOVQodHuAnAtbwC9_vwfA43vfkc/s320/baby.png
여기서 주목해야 하는 곳은 s320 입니다. 해당하는 숫자가 더 크거나
작을 수도 있습니다. 이미지의 크기 조정 및 사용자 정의를 하려면 이 부분을
수정하면 됩니다.
이는 구글 블로거에서 이미지 크기를 조정하고 자르고 편집하고 커스터마이즈 할 수 있는 실용적인 방법입니다.
목차
이미지 크기 조정 및 자르기
s0 (원본 이미지 크기)
- 업로드된 이미지를 원본으로 표시해야 하는 경우가 많습니다. 이렇게 하려면
s 매개 변수에 0을 입력하면 됩니다.
- 예를 들어 s0는 업로드된 이미지를 원본 크기로 가져옵니다.
s000 (가장 큰 크기의 이미지)
- s 매개 변수와 함께 숫자를 사용하는 경우입니다. 가장 큰 치수의
픽셀 이미지를 가져옵니다.
- 예를 들어 s1200은 업로드된 이미지를 1200px으로 가져옵니다.
w000 (너비)
- 고정된 너비의 이미지를 사용하려면 w 매개 변수를 사용합니다.
- 예를 들어 w300은 업로드된 이미지를 너비가 300px인 이미지로
가져옵니다.
h000 (높이)
- 고정된 높이의 이미지를 사용하려면 h 매개 변수를 사용합니다.
- 예를 들어 h80은 업로드된 이미지를 높이가 80px인 이미지로
가져옵니다.
w000 및 h000 (사용자 지정 너비와 높이)
- 너비와 높이를 모두 지정하는 경우 하이픈( - )을 이용해 결합합니다.
- 두 매개 변수 중 높이 매개 변수인 h가 우선순위입니다.
c (지정된 크기로 자르기)
- c 매개 변수는 간단한 이미지 자르기 매개 변수로 w 및 h 매개
변수와 함께 사용됩니다.
- 예를 들어 다음은 이미지의 상단부터 입력한 크기로 자릅니다.
n (중앙에서 이미지 자르기)
- n 매개 변수는 c 매개 변수와 비슷하지만 차이점은
중앙에서부터 자릅니다. 종횡비는 유지되지 않습니다.
- 예를 들면 다음과 같습니다.
p (스마트 사각형 자르기)
- p 매개 변수는 이미지의 중요한 부분을 선택하여 자릅니다.
종횡비는 유지되지 않습니다.
- 직접 시도해봤지만 아무 곳이나 선택합니다.
pp (스마트 사각형 자르기)
- pp 매개 변수는 p 매개 변수와 동일합니다.
pa (사각형 자르기, 이미지의 종횡비 유지)
- pa 매개 변수는 p 및 pp 매개 변수와 유사하지만 이미지의 가로
세로 비율을 유지한다는 점이 차이점입니다.
- 높이 매개 변수 h가 우선순위입니다.
pf (얼굴 인식을 통한 스마트 자르기)
- pf 매개변수는 얼굴을 인식하여 자릅니다.
- 중앙에서부터 시작하며 종횡비가 유지되지 않습니다.
lf (느슨한 얼굴 자르기)
- lf 매개변수는 가로 세로 비율을 그대로 유지하면서 지정된 높이로
이미지를 자릅니다.
cc (원형 이미지 자르기)
- cc 매개변수는 원형으로 이미지를 자릅니다. 잘린 부분에 대해서는
높이 매개 변수가 우선순위입니다.
- 잘린 부분 외부의 영역은 투명한 배경으로 출력됩니다.
ci (스마트 정사각형 이미지 자르기)
- ci 매개변수는 지정된 너비와 높이 근처에서 가능한 한 가장 작은
치수로 정사각형으로 잘린 이미지를 만듭니다.
- 예를 들면 다음과 같습니다.
nu (원래 크기 이상으로 크기 조정 방지)
- nu 매개 변수는 원래 크기보다 이미지가 커질 수 없도록 방지하는
데 사용합니다.
- 예를 들어 원본 이미지 너비가 600px인 경우 더 큰 너비를 지정하더라도 매개
변수 w600-nu가 있기 때문에 이미지가 원래 너비보다 더 크게
확장되지 않습니다.
이미지 뒤집기
fv (이미지 수직 뒤집기)
- fv 매개 변수는 이미지를 수직으로 뒤집습니다. 예를 들어
s0-fv 는 원본 이미지를 수직으로 뒤집습니다.
fh (이미지 수평 뒤집기)
- fh 매개 변수는 이미지를 수평으로 뒤집습니다. 간단한 예로
s0-fh 를 시도해 볼 수 있습니다.
r (이미지 회전시키기)
- r 매개 변수는 이미지를 90, 180, 270 도의 세 가지 회전 각도를
사용할 수 있습니다.
이미지 필터 및 편집
테두리 / 프레임 설정
일반적으로 이미지 주위에 테두리 및 프레임을 적용하려면 CSS를 사용합니다. 하지만 CSS 코드를 사용하지 않고도 이를 이룰 수 있다면 어떨까요? 두 가지 매개 변수의 조합을 통해 테두리를 표시할 수 있습니다.
- b 매개 변수는 테두리의 두께를 지정하여 이미지에 추가합니다.
- c 매개 변수는 테두리의 색상을 지정하는 데 사용됩니다.
- 아래 예시에서 테두리 두께는 10px이며 색상은 0xAARRGGBB 형식입니다.
이미지 블러, 흐리게 하기
- 일반적으로 이미지에 블러 처리를 하지는 않습니다만 필요할 때가 가끔 있습니다.
이 때 fSoften 매개 변수를 사용할 수 있습니다.
- 아래의 fSoften=1,5,0 에서 중간의 숫자 5를 0에서 100으로
변경하여 흐림 효과의 강도를 조정하고 변경할 수 있습니다.
그라디언트 및 테두리 그림자 추가
- 테두리 그림자 색상과 결합한 그라디언트 효과를 설정할 수 있습니다.
- fVignette 매개 변수를 사용할 수 있습니다.
- 아래의 fVignette=1,100,1.5,0,fefefe 에서 중간의 숫자 100과
1.5를 변경하여 그라디언트를 세밀하게 조정할 수 있으며, 마지막은 색상 코드를
사용하여 테두리 그림자 색상을 지정할 수 있습니다.
이미지 형식 변환
rj (JPG 형식으로 변환)
- rj 매개 변수는 이미지 형식을 JPG 형식으로 가져옵니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-rj/sample.png
rp (PNG 형식으로 변환)
- rp 매개 변수는 이미지 형식을 PNG 형식으로 가져옵니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-rp/sample.jpg
rw (Webp 형식으로 변환)
- rw 매개 변수는 구글의 Webp 형식으로 이미지를 가져옵니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-rw/sample.png
rg (GIF 형식으로 변환)
- rg 매개 변수는 움짤(GIF) 형식으로 이미지를 가져옵니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-rg/sample.png
rh (GIF 형식을 MP4 형식으로 변환)
- rh 매개 변수는 GIF 애니메이션 형식을 MP4 비디오 파일 형식으로
바꿀 수 있습니다.
- 예를 들어 이미지 파일은
<img>
태그를 사용하지만 rh 매개 변수를 사용하면
<video>
태그를 사용할 수 있습니다.
<video width="640"
height="360"
controls>
<source src="https://blogger.googleusercontent.com/img/a/xxxxxxxx=s0-rh"
type="video/mp4">
</video>
k (GIF 애니메이션 비활성화)
- k 매개 변수는 GIF 애니메이션을 종료하고 정적인 이미지를
출력합니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-k/sample.gif
이미지 크기 압축
사이트 속도를 중요시한다면 방문자에게 로드 속도를 느리게 하는 무거운 이미지를 제공하지 않는 것이 좋습니다. 이미지 압축은 파일 크기를 줄여 페이지의 전체 크기를 줄입니다.
l 매개변수는 JPEG 이미지를 압축할 수 있습니다. 예를 들어
s0-rj-l85 는 이미지 형식을 JPG 형식으로 바꾸고 파일 크기의 15%를
압축합니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-rj-l85/sample.png
캐시 이미지 만료 시간 지정
e 매개 변수는 빠른 브라우징을 위해 중요한 기능 중 하나로 캐시
이미지 만료 시간 지정을 위해 사용합니다. 예를 들어 s0-e30 은 30일
동안 사이트 방문자의 이미지 캐시를 저장한다는 것입니다.
https://blogger.googleusercontent.com/img/a/xxxxxxxxs0-e30/sample.png
블로그스팟 이미지 주소 변경 이슈
최근 구글 블로그스팟 이미지 주소 변경됨
구글 블로그스팟 이미지 주소는 원래https://1.bp.blogspot.com/ ...의 형태였는데요. 최근 Blogger에 업로드된 이미지의 URL이 https://blogger.googleusercontent.com/img/a/... 으로 변경되었습니다. 참고 바랍니다.
지금까지 구글 블로거 이미지 URL 200% 활용법에 대해 살펴보았습니다. 감사합니다.