表示速度を速くする！画像のWebP（ウェッピー）変換とWinSCPアップロードのコツ

ホームページの表示速度は、訪問者の快適さだけでなく、検索サイトなどの検索順位（SEO）にも大きく影響します。

本記事では、従来のJPEGやPNGよりも圧倒的にデータ量が軽い次世代の画像形式「WebP（ウェッピー）」を活用し、サイトを高速化する手順を詳しく解説します。

WebP（ウェッピー）にするメリットとは？

WebPはGoogleが開発した画像形式で、従来のJPEGやPNGと比べて、見た目の綺麗さを保ったままファイルサイズを約25〜34%も小さくできます。

【手順1】画像をWebP形式に一括変換する

まずは、現在ホームページで使っている（またはこれから使う）JPEGやPNGの画像を、WebP形式に変換しましょう。 ソフトをインストールしなくても、ブラウザだけで簡単に一括変換できる無料のサイトが便利です。

1. 検索エンジンで「画像 WebP 変換 無料」や「WebP 変換 サイト 一括」と検索します。
2. ブラウザ上で無料で使える画像変換サイトが見つかりますので、使いやすいサイトにアクセスします。
3. 手持ちのJPEGやPNG画像をまとめてドラッグ＆ドロップします。
4. 変換後のファイル（拡張子が .webp になった画像）をパソコンにダウンロードします。

【手順2】WinSCPでサーバーにアップロードする

変換したWebP画像を、弊社推奨のSFTPクライアントソフト「WinSCP」を使ってサーバーへアップロードします。

1. WinSCPを起動し、いつもの設定でレンタルサーバーにSFTP接続します。
2. 画面右側（サーバー側）の、ホームページの画像が保存されているフォルダ（例：public_html/images/ など）を開きます。
3. 画面左側（パソコン側）から、先ほど変換した .webp 画像を選択します。
4. ドラッグ＆ドロップで画面右側（サーバー側）へアップロードします。

【手順3】HTMLコードを書き換える

最後に、ホームページのHTMLを書き換えて、WebP画像が表示されるようにします。 <picture> タグを使用することで、「基本はWebPを表示し、非対応ブラウザではJPEGを表示する」という賢い出し分けが可能になります。

以下のコードをコピーし、画像を表示したい箇所に貼り付けてご活用ください。

<picture>
  <!-- 1. ブラウザがWebPに対応していれば、こちらを表示 -->
  <source srcset="images/photo.webp" type="image/webp">
  
  <!-- 2. 万が一WebPに非対応の古いブラウザであれば、従来の画像を表示 -->
  <img src="images/photo.jpg" alt="画像の紹介テキスト" width="800" height="600">
</picture>

関連記事

• SFTP接続（WinSCP）設定方法
• .htaccessで500 Internal Server Errorが出る原因と対処法

サポート情報

サポート情報トップ