마크다운 이미지 조절하기
안녕하세요 🐸
마크다운 언어는 이미지의 사이즈 조절이 불가합니다.
그래도 방법을 찾아보려고 검색해보면 마크다운에서 이미지 조절을 하고 싶다면 <img> 태그를 사용하라고 하죠
하지만 깃허브 블로그는 <img> 태그가 업로드 된다면 내부에 alt 속성을 반드시 사용하도록 강제합니다. 만약 alt 태그를 사용하지 않으면 빌드 실패합니다.
그래서 결국 발견한 마크다운에서도 이미지 크기 조절이 가능한 플러그인!
wsrv.nl👏👏
사실 제가 사용중인 jekyll 공식 사이트에서 발견한 플러그인 입니다.
역시 공식 사이트를 잘 읽어봐야 합니다
01. wsrv 이란?
이미지 캐시 및 크기 조절 서비스입니다! 사용하고자 하는 이미지의 url만 알고 있다면 이를 통해 마크다운에서도 손쉽게 이미지 크기 조절 및 효과를 제공할 수 있습니다. JPEG, PNG, BMP, GIF, TIFF, webp, PDF, SVG 드을 포함한 다양한 형식을 지원합니다. cloudflare을 통해 제공 되기 때문에 로딩이 빠릅니다
02. 기본 사용 방법
wsrv가 뭔지 알았으니 바로 사용법으로 알아보겠습니다.
마크다운에서 사용하는 예시입니다.
1
HTML에서 사용하는 예시입니다.
1
2
3
4
5
<!-- 공식 사이트 사용 안내 방법 -->
<img src="//wsrv.nl/?url={이미지 주소}">
<!-- 깃허브 블로그 내에서 사용하기 위한 형태 -->
<img src="https://wsrv.nl/?url={이미지 주소}">
공통적으로 이미지를 불러오는 url을 아래의 형식으로 사용하는 것입니다.
1
https://wsrv.nl/?url={이미지 주소}
여기서 주의할 점은 사용하고자 하는 이미지의 주소도 https 로 사용 되어야 한다는 점 입니다.
사용 예제)
1
사용 결과
(코-쓱)
03. 크기 조절 및 기능 사용하기
아래는 공식 사이트의 표를 번역한 것입니다.
오역이 있을 수 있습니다. (있다면 말씀해주세요 🙏)
⚠️ 표의 참조 링크를 확인해주세요. 요약 설명으로는 사용할 수 없는 경우가 많습니다.
</span>
1
2
3
4
5
6
7
8
9
10
...생략
image has no src or srcset attribute
...생략
internally linking to src, which does not exist
...생략
위의 에러를 발생 시키며 빌드를 실패합니다
| 이름 | 키 | 요약 설명 | 참조 링크 |
|---|---|---|---|
| Width | w | 이미지의 너비를 픽셀 단위로 조절 | 참조 |
| Height | h | 이미지의 높이를 픽셀 단위로 조절 | 참조 |
| Device pixel ratio | dpf | 이미지 비율을 조절 (1~8) | 참조 |
| Fit | fit | 사이즈에 맞게 이미지가 조절되는 방식 설정 | 참조 |
| Contain background | cbg | fit=contain 을 사용할 때 백그라운드 컬러 설정 | 참조 |
| Without enlargement | we | 이미지가 사이즈 보다 작을 때 확대 하지 않도록 함 | 참조 |
| Alignment position | a | 이미지 정렬 기준 점 설정 | 참조 |
| Rectangle crop | crop | 이미지를 특정 크기로 자릅니다 | 참조 |
| Pre-resize crop | precrop | Rectangle crop 전에 이미지 크기를 조정합니다 | 참조 |
| Trim | trim | 좌측 상단에 위치한 픽셀과 같은 컬러의 픽셀인 배경을 지웁니다 | 참조 |
| Masking | mask | 정해진 틀 안에 이미지를 넣습니다 | 참조 |
| Mask trim | mtrim | 마스킹 하고 남은 공백을 제거합니다 | 참조 |
| Mask background | mbg | 마스킹한 배경 색을 설정합니다 | 참조 |
| Flip | flip | 이미지를 위아래로 뒤집습니다 | 참조 |
| Flop | flop | 이미지를 좌우로 뒤집습니다 | 참조 |
| Rotation | ro | 이미지를 회전 시킵니다 | 참조 |
| Rotation background | rbg | 회전 시 배경 색을 설정합니다 | 참조 |
| Background | bg | 이미지의 배경색을 설정합니다 | 참조 |
| Blur | blur | 이미지에 블러 효과를 줍니다 | 참조 |
| Contrast | con | 대비 효과를 설정합니다 | 참조 |
| Filter | filt | 이미지에 필터 효과를 적용합니다 | 참조 |
| Gamma | gam | 이미지의 감마를 조절합니다 | 참조 |
| Modulate | mod | 밝기, 채도, 색조 를 변경합니다 | 참조 |
| Saturation | sat | 이미지의 채도를 변경합니다 | 참조 |
| Hue rotation | hue | 이미지를 색 반전 합니다 | 참조 |
| Sharpen | sharp | 이미지의 선명도를 조절합니다 | 참조 |
| Tint | tint | 이미지의 색조를 조절합니다 | 참조 |
| Adaptive filter | af | 이미지 압축 전에 적용하는 필터 알고리즘 입니다 | 참조 |
| Base64 (data URL) | encoding | <img> 를 사용할 때 이미지를 직접 인코딩합니다 | 참조 |
| Cache-Control | maxage | 브라우저가 이미지를 캐시할 기간을 설정합니다 | 참조 |
| Compression level | l | 이미지의 압축 수준을 설정합니다 | 참조 |
| Lossless compression | ll | 이미지를 무손실 압축 합니다 | 참조 |
| Default image | default | 이미지를 불러올 수 없을 경우 대체 이미지 설정 | 참조 |
| Filename | filename | 이미지의 파일명을 설정 | 참조 |
| Interlace / progressive | il | 이미지에 인터레이스를 추가합니다 | 참조 |
| Number of pages | n | 랜더링할 횟 수를 설정합니다 | 참조 |
| Output | output | 이미지를 특정 형식으로 인코딩합니다 | 참조 |
| Page | page | 특정 페이지를 로드합니다 | 참조 |
| Quality | q | 이미지 화질을 조절 | 참조 |
위의 표와 참조를 확인하여 앞서 사용한 귀-여운 친칠라를 다시 사용해보겠습니다.
제가 사용할 옵션들입니다
- 높이
- 너비
- 상하 반전
- 좌우 반전
- 랜더링 횟수
- 대체 이미지
사용 코드
1
사용 결과
(쓱-코)
wsrv.nl : https://images.weserv.nl/
jekyll : https://jekyllrb.com/