More than 3 years have passed since last update.

投稿する画像の大きさをええ感じにしたい！

Last updated at 2021-03-23Posted at 2021-03-12

はじめに

最近Qiitaに記事を投稿し始めたのですが**「ん？なんか画像小さくないか？」**と思うことがあり、解決法を調べましたのでその内容を記載致します。結論としては、画像のアップロード形式を変更して、サイズを指定することで解決しました。もっと良い方法をご存じの方がいらっしゃいましたら是非共有ください。

※プログラミング関係の内容を他にも投稿していますので、よろしければこちらの一覧から他の投稿も見て頂けますと幸いです。

問題

ドラッグ＆ドロップでフォルダからQiitaの本文に画像をアップロードしていました。

# ![ファイル名](URL)の形式
![fp_ibuprofen_310.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057114/95151c7d-300f-b629-12aa-cd9a4bc693ce.jpeg)

このような感じで画像がアップロードされるのですが、画像が小さい…

ファイルの種類は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にアップロードする画像のサイズの調整方法について説明致しました。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up