SEOを意識したWebP画像の活用とRuby on Railsでの実装方法

SEO上、Webpが有利

WebPは、従来の画像フォーマットよりもファイルサイズが小さく、ページの読み込み速度を向上させるため、SEOに有利です。これにより、モバイルフレンドリー性が向上し、ユーザーエクスペリエンスが改善され、結果的に検索エンジンでの評価が高まります。

今日は、Ruby on RailsのActiveStorageを使って、どのようにWebpを使っていくかを説明します。

そもそもWebPとは

WebP（ウェッピー）は、Googleが開発した画像フォーマットで、主にウェブでの画像配信を最適化するために設計されています。WebPは、静止画とアニメーション画像の両方をサポートし、以下のような特徴があります。

特徴

1. 高圧縮率

   • WebPは、従来のJPEGやPNGよりも高い圧縮率を提供します。これは、画像の品質を保ちながら、ファイルサイズを小さくすることができます。
   • ロスレス圧縮: PNGと同様に、画質を一切劣化させない圧縮が可能です。
   • 非可逆圧縮: JPEGのように、多少の画質劣化を伴うが、ファイルサイズをさらに小さくする圧縮も可能です。

2. 透過性のサポート

   • PNGのように、WebPは透過性（アルファチャンネル）をサポートしています。これにより、背景が透明な画像を作成できます。

3. アニメーションのサポート

   • WebPはGIFの代替としても利用でき、アニメーション画像をサポートしています。アニメーションWebPは、GIFよりも高圧縮率でファイルサイズを小さくすることができます。

4. ブラウザのサポート

   • WebPは、Google Chrome、Firefox、Microsoft Edge、Operaなど、主要なウェブブラウザでサポートされています。ただし、すべてのブラウザが完全にサポートしているわけではないため、互換性の問題が発生する場合もあります。

5. 用途

   • WebPは主にウェブサイトで画像の表示速度を向上させるために使用されます。ファイルサイズが小さいため、ページの読み込み時間が短縮され、ユーザーエクスペリエンスが向上します。

Ruby on RailsのActiveStorageでWebPを活用する

1. ActiveStorageの設定

まず、ActiveStorageをセットアップします。Rails 5.2以降では、ActiveStorageが標準で組み込まれているため、rails active_storage:installコマンドでマイグレーションを作成し、データベースを更新します。

rails active_storage:install
rails db:migrate

2. WebP形式での画像保存

次に、WebP形式で画像を保存するための設定を行います。ActiveStorageはデフォルトでWebPをサポートしているため、特別な設定は不要ですが、必要に応じて画像をWebPに変換する処理を追加することができます。

3. 画像のアップロードと変換

ユーザーが画像をアップロードするときに、WebP形式に変換するためには、以下のようにActiveStorageのバリアント機能を活用します。

class User < ApplicationRecord
  has_one_attached :avatar

  def avatar_webp
    avatar.variant(format: :webp).processed
  end
end

このコードでは、ユーザーのアバター画像をWebP形式に変換しています。variantメソッドを使用して、任意のフォーマットに変換することが可能です。

4. ビューでの表示

WebP画像をビューで表示する際には、以下のように呼び出します。

<%= image_tag user.avatar_webp %>

これで、ユーザーのアバターがWebP形式で表示されるよ
うになります。WebPを使用することで、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。

複数のサイズのバリアントを定義

※ バリアント（variant）とは、元の画像から異なるバージョンの画像を作成するための機能です。Ruby on RailsのActiveStorageでは、画像をアップロードした後に、その画像のサイズ変更やフォーマットの変換を行って、複数のバージョン（バリアント）を生成できます。

複数のサイズのバリアントを定義
まず、異なるサイズやフォーマットのバリアントをモデル内で定義します。たとえば、thumbnail, medium, largeの3つのサイズをWebP形式で定義する場合は、以下のように記述します。

class User < ApplicationRecord
  has_one_attached :avatar

  # WebP形式のサムネイル（100x100）
  def avatar_thumbnail_webp
    avatar.variant(resize_to_fill: [100, 100], format: :webp).processed
  end

  # WebP形式の中サイズ（300x300）
  def avatar_medium_webp
    avatar.variant(resize_to_fill: [300, 300], format: :webp).processed
  end

  # WebP形式の大サイズ（600x600）
  def avatar_large_webp
    avatar.variant(resize_to_fill: [600, 600], format: :webp).processed
  end
end

※ もっと良い書き方があるのですが、ここでは省略します。

ここで、resize_to_fillオプションを使用して指定したサイズに画像をリサイズし、format: :webpでWebP形式に変換しています。

1. ビューでバリアントを表示
   それぞれのバリアントをビューで表示する際には、次のように呼び出します。

<%= image_tag user.avatar_thumbnail_webp %>
<%= image_tag user.avatar_medium_webp %>
<%= image_tag user.avatar_large_webp %>

このコードにより、ユーザーのアバターが指定した3つの異なるサイズでWebP形式で表示されます。

※ その他
複数のバリアントを作成する場合、各バリアントが最初にアクセスされたときに生成され、サーバーにキャッシュされます。これにより、同じバリアントが再度アクセスされたときには高速に提供されるようになります。