[팁] 스팀잇에서 이미지 줄이는 방법 markdown + html / image resize in steemit

in #kr6 years ago (edited)

안녕하세요 @wonsama 입니다. 오늘은 스팀잇에서 이미지크기를 줄이는 방법을 알아보도록 하겠습니다.

( 이미지는 @woolgom 님께서 제작하신 이미지를 사용하였습니다. )

1. https://steemitimages.com

누구나 다 아는 ?

  • 100x0 대신에 적절한 크기를 넣어주면 됩니다. ( width x height , 0으로 설정 시 자동비율 )
  • 단점, GIF는 적용안됨 / 첫번째 이미지만 추출되어 줄여짐
https://steemitimages.com/100x0/https://gateway.ipfs.io/ipfs/QmPBSiqgTHEww51ybbaGyFRnnWXjjtL3DbvapjZNbdcnsj

2. 마크다운으로 줄이기

[최초공개?] 원하시는 만큼 <td></td> 태그만 추가하시면 이미지가 줄어 듭니다.
gif 또한 줄일 수 있음
웹과 모바일웹에서 차이가 있음에 유의바랍니다. 더 작은 모바일웹 기준으로 맞추면 좋음

  • 장점 : 픽셀 단위까진 아니지만, 자연스럽게 원하는 크기를 조절할 수 있음.
  • 단점 : 써야 되는 내용이 의외로 좀 있음

원본

<table><tr><td><div class='pull-left'>
https://gateway.ipfs.io/ipfs/QmPBSiqgTHEww51ybbaGyFRnnWXjjtL3DbvapjZNbdcnsj
</div></td>
</tr></table>

td 5쌍 추가

<table><tr><td><div class='pull-left'>
https://gateway.ipfs.io/ipfs/QmPBSiqgTHEww51ybbaGyFRnnWXjjtL3DbvapjZNbdcnsj
</div></td><td></td><td></td><td></td><td></td><td></td>
</tr></table>

td 10쌍 추가

<table><tr><td><div class='pull-left'>
https://gateway.ipfs.io/ipfs/QmPBSiqgTHEww51ybbaGyFRnnWXjjtL3DbvapjZNbdcnsj
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr></table>

td 13쌍 추가

<table><tr><td><div class='pull-left'>
https://gateway.ipfs.io/ipfs/QmPBSiqgTHEww51ybbaGyFRnnWXjjtL3DbvapjZNbdcnsj
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr></table>


참 쉽죠 ?


Sort:  

원사마님 혹시 세로로 긴 사진 올릴때 사진이 확 줄어드는데 가로크기 유지하면서 제대로 나오는 방법 아시나요?

대부분의 mobile web이 요즘 폰 사이즈에 매칭하여 화면을 조절하는 css(media 쿼리) 를 사용해서요 화면 폭에 맞춰서 높이가 자동 조절이 되어 너무 긴 컨텐츠의 이미지는 작아서 보이지 않을 거에요

그래서 그나마 대안은 이미지를 잘라서 여러게로 올리는 것이 젤 좋은 방법일 거에요

이미지를 자를 때에는 600x300 대략 2:1 비율로 해서 잘라주시면 모바일 웹에서도 보기 편하게 될거에요

이미지 잘라주는 프로그램도 여럿 있을거에요 아마 ^^

그런데 불편한 건 어쩔 수 없죠 ㅜㅜ

나중에 기회되면 함 만들어서 공유 해 볼께요 웹버전으로

그렇군요. 역시 방법이 없었네요. T^T 아쉬운대로 귀찮지만 잘라서 올리고 있습니다.^^ 답글 감사합니다.

오 몰랐던 꿀팁 감사합니다!!
그동안 그림판으로 줄였었네요 ..ㅎㅎ

td로 줄이는 것은 대박입니다. ㅋ

뉴비로써 정말 감사 한 팁이네요. 마크다운 첨서보는데 너무 어렵. ㅠ

별 말씀을요 ^^

본문을 이해하지 못하고 있는 1인;

저는 그냥 알씨를 설치해서 '이미지 크기 변경'을 눌러버립니다 (쿨럭)

그것은 정답입니다 ㅋ

와 좋은 정보 감사합니다~~~

별말씀을요 ^^

<td></td> 아이디어 좋네요! ㅎㅎ

pull-left 에 css를 보면 width 50% 인데 이를 td를 증식하여 트릭을 쓴거죠 ㅋ

아쉬운건 colspan 을 못써서 td태그를 여러번 써야됨요

오 원사마님 좋은 정보 공유 감사합니다. 리스팀하여 나중에 써먹어 보겠습니다.^^

넵 리스팀 감사요

와 이건 정말 꿀팁입니다! 좋은 정보 감사합니다! td는 대단한 발견이예요 :D 리스팀하고 자주 써먹어봐야겠습니다!

pull-left의 width 50%를
td를 통해 비율로 줄이는 것이 트릭이죠 ㅋ

매번 폰에서 사진 크기 줄이고 올렸는데 정말 꿀팁!
리스팀합니다^^

최초는 아니지만... 유용한 정보입니다 ㅎㅎ

이런 ... td로 줄이는 건 못봤는데 ㅜㅜ 아끕네요

Coin Marketplace

STEEM 0.14
TRX 0.12
JST 0.025
BTC 53375.38
ETH 2393.56
USDT 1.00
SBD 2.15