ikmnjrd.github.io

Gyazoをブログ用の画像ホストとして使い倒す

Posted on 2022-02-11

大好きなWebサービス「Gyazo」の紹介です。

簡単にこのサービスを説明すると、Gyazoを使ってスクリーンショットを撮ると無料のクラウドサーバーにアップロード&URLが発行され、共有が簡単にできるサービスです。

https://gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8 例

このようにすると、画像を直接指定できる。

https://i.https://gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png

以下のようにするとサイズを指定できる

https://i.gyazo.com/thumb/300/37f2d7be5ea5964c6aa339f0aa95c9f8.png

これを応用すると、画像を自前でホストせずに、最適化した画像によるレスポンシブ対応がhtmlだけでできる。

  <img
    src="https://i.gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png"
    srcset="https://i.gyazo.com/thumb/320/37f2d7be5ea5964c6aa339f0aa95c9f8.png 320w,
            https://i.gyazo.com/thumb/640/37f2d7be5ea5964c6aa339f0aa95c9f8.png 640w,
            https://i.gyazo.com/thumb/1280/37f2d7be5ea5964c6aa339f0aa95c9f8.png 1280w"
    sizes="(max-width:1280px) 100vw, 1280px"
  >

<picture/>と<source/>を使えばより柔軟に設定できる。

周辺用語

  • レスポンシブデザイン
  • srcset
  • ポリフィル「picturefill」

参考文献