はじめに
最近Qiitaに記事を投稿し始めたのですが「ん？なんか画像小さくないか？」と思うことがあり、解決法を調べましたのでその内容を記載致します。結論としては、画像のアップロード形式を変更して、サイズを指定することで解決しました。もっと良い方法をご存じの方がいらっしゃいましたら是非共有ください。
※プログラミング関係の内容を他にも投稿していますので、よろしければこちらの一覧から他の投稿も見て頂けますと幸いです。
問題
ドラッグ＆ドロップでフォルダからQiitaの本文に画像をアップロードしていました。
# の形式
このような感じで画像がアップロードされるのですが、画像が小さい…
ファイルの種類はJPG ファイルで、大きさは150ピクセル×150ピクセルです。
解決方法
形式を以下のように変更し、画像サイズを指定してアップロードしました。
# <img width="表示幅" src="URL">の形式に変更
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/95151c7d-300f-b629-12aa-cd9a4bc693ce.jpeg">
形式を変更することで、画像のサイズが大きくなったことが分かります。画像のサイズはheight=""でも指定することができ、使用可能な単位は%, px, em, remです。Qiitaに投稿する際は、widthの数値を触りながら画像の大きさを調整しているのですが、もう少し良い方法があればぜひ教えてください。せっかくなので、widthの数値の違いによって画像の大きさがどのように変化するのか調べてみます。
width="100%"のとき
width="50%"のとき
width="30%"のとき
width="10%"のとき
そもそもですが、今回は画像サイズが小さくあまり鮮明とは言えない画像でした。なお、こちらを参考にするとスクリーンショットはpng形式で保存した方が解像度の観点から良いようです。
まとめ
Qiitaにアップロードする画像のサイズの調整方法について説明致しました。