GitHubで画像のリサイズ方法を学ぶ


  1. HTMLとCSSを使用した方法: GitHubでは、README.mdファイル内でHTMLとCSSを使用して画像を表示することができます。以下に例を示します。

    <img src="https://raw.githubusercontent.com/ユーザー名/リポジトリ名/ブランチ名/画像のパス" style="max-width: 500px;">

    上記の例では、src属性に画像のURLを指定し、style属性のmax-widthプロパティで画像の最大幅を指定しています。この方法を使用すると、画像が指定した幅を超えないように表示されます。

  2. サードパーティのツールを使用した方法: GitHubでは、画像のリサイズや最適化に特化したサードパーティのツールを使用することもできます。以下にいくつかのツールを紹介します。

    • imgbot: imgbotは、プルリクエストを通じて画像の最適化やリサイズを行うことができるツールです。GitHubリポジトリにimgbotをインストールし、設定を行うことで、画像の自動最適化を実現できます。

    • Cloudinary: Cloudinaryは、画像のアップロード、リサイズ、最適化、変換などを行うためのクラウドベースのサービスです。GitHubリポジトリ内でCloudinaryを使用し、画像の処理を行うことができます。

  3. GitHub Actionsを使用した方法: GitHub Actionsを活用することで、リポジトリ内の画像を自動的にリサイズすることも可能です。GitHub Actionsを使用して、リサイズ用のスクリプトを実行し、画像を変換することができます。以下に例を示します。

    name: Image Resize
    on:
     push:
       branches:
         - main
    jobs:
     resize:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout repository
           uses: actions/checkout@v2
         - name: Resize images
           run: |
             # 画像のリサイズ処理を行うスクリプトを実行するコマンドを記述

    上記の例では、GitHub Actionsを使用してブランチがmainにプッシュされたときに画像のリサイズ処理が実行されます。具体的なリサイズ処理は、runコマンド内にスクリプトを記述することで実現できます。

これらの方法を活用することで、GitHub上で画像のリサイズを行うことができます。適切な方法を選択し、プロジェクトに合わせて画像の管理と表示を行いましょう。