概要

Webサービスやスマートフォアンプリで使う写真のような画像は表示する解像度やRetina対応のため複数用意する必要があります。この問題に対応するためのいくつか方法を紹介します。その中の画像生成サービスを利用する方法について具体的なサービスを紹介し、imgixを利用したサンプルを紹介します。

概要
目次
目的
対象読者
PR
本文
各方法のメリット・デメリット
メリット・デメリットをまとめ
画像生成サービスの紹介
imgixを利用した具体的な実装方法
imgixの動作確認
Next.jsに組み込む
設定
具体的な実装
考察・提案
まとめ
参考リンク
PR

目的

Webサービスやスマートフォンアプリで使う写真のような複雑な画像は表示する解像度やRetina対応のため複数用意する必要があります。 Webサービスにおいてこの問題を解決する方法をいくつか提示・比較します。比較した中でできるだけ作業工数の少ない方法を提案しサンプルコードを共有します。

対象読者

Webサービスの設計を担当するソフトウェアエンジニア

ソフトウェアエンジニアに複数解像度を手作業で作成させられそうになっているデザイナ

PR

UZUMAKIではアジャイル開発で新規事業の開発から、大規模Webアプリケーションのアーキテクチャ更新のなど開発をしています。

お問い合わせはUZUMAKIのHPのお問合せフォームから

株式会社UZUMAKI

UZUMAKI（うずまき）はエンジニア・デザイナー・ディレクターで構成されるギルド型開発チーム。成長するWebサービスやアプリのリニューアル・リファクタリングに強みがあります。

uzumaki-inc.jp

本文

Webサービスやスマートフォンアプリで使う写真のような細かい画像は、表示する解像度やRetina対応のため複数用意する必要があります。この問題に対応するために以下のような方法があります。

PC用の高解像度の画像をモバイル用の小さい領域に当てはめる
手動で複数の解像度を用意する
ビルド時に複数の解像度の画像を生成する
画像生成サービスを利用する

本記事後半では画像生成サービスについていくつか具体なサービスを紹介し、その中でimgixを利用したサンプルを紹介します。

※アイコンやシンプルなイラストはSVG形式でベクター画像にしておくと複数画像を用意する必要がないのでおすすめです。

各方法のメリット・デメリット

PC用の高解像度の画像をモバイル用の小さい領域に当てはめる

メリット

画像作成時に何も考えなくて良い
高解像度が必要なディスプレイでも画像が滲まない

デメリット

低解像度やモバイルでも画像が表示される
特にモバイルの場合通信量用を食うので、LTE回線だと表示が遅くなる。いわゆるギガを無駄に消費させてしまう

手動で複数の解像度を用意する

メリット

解像度にあった適切な画像を表示してくれる
3,4のような自動画像の生成の設定をしなくてて良い

デメリット

FigmaやXDで画像の生成がとても手間

特にレスポンシブ対応する場合、複数の画面幅に対応する必要がある

ImgタグやPictureタグ内のsrcsetコードも手作業で書く必要がある。ある程度自動生成しても確認作業が大変

ビルド時に複数の解像度の画像を生成する

メリット

解像度にあった適切な画像を表示してくれる

このようなライブラリを使う想定 https://github.com/dazuaz/responsive-loader

デメリット

Webpack等の設定がやや面倒
静的サイトの場合、画像が増えるとビルドに時間がかかる
CDNの設定を自前でやる必要がある

画像生成サービスを利用する

メリット

解像度にあった適切な画像を表示してくれる
ビルド時に画像を生成せず、動的に画像を生成してくれる
CDNの設定を自前でやる必要がない

デメリット

画像

生成サービス分料金がかかる　※それでも人件費を考えたら十分安い

メリット・デメリットをまとめ

Name	1. PC用の高解像度の画像をモバイル用の小さい領域に当てはめる	2. 手動で複数の解像度を用意する	3. ビルド時に複数の解像度の画像を生成する	4. 画像生成サービスを利用する
解像度にあった適切な画像を表示してくれる	❌	⭕	⭕	⭕
デザイナの作業コストが低い	⭕	❌	⭕	⭕
フロントエンジニアの作業コストが低い	❌	❌	❌	⭕
面倒な設定が不要	⭕	⭕	❌	⭕

以上から

4. 画像生成サービスを利用するが開発工数を圧縮するためには有効だと思われます。

個人サービスや画像の量が少ないのであれば 3. ビルド時に複数の解像度の画像を生成する も悪くない選択肢だとは思います。それでも4.画像生成サービスを利用するもimgixやCloudinalyの無料枠で十分使えるので画像生成サービスを使うのが生産性高いだろうという見解です。

画像生成サービスの紹介

画像生成サービスは下記のようなサービスがあり、だいたいできることは同じです。

imgix

転送量に対して課金されない
ファイル数に対してプランごとに制限がある
S3などファイルストレージは自前で用意する必要がある
画像数が膨大でないかつアクセスが多いサイトはお得
imgixプランのリンク: https://imgix.com/pricing

Cloudinary

ファイル数に対して課金されない
ストレージサイズによって制限がある(無料で25GB)
AWSのS3などファイルストレージを自前で保つ必要がない
Cloudinaryプランのリンク: https://cloudinary.com/pricing

imageflux

国内クラウドサービスベンダーのさくらインターネット社製のサービス
国内の大きめのスタートアップ利用されている
価格が明示されていないのでエンタープライズ向けの価格設定だと思われる
大量の画像を使う場合はボリュームディスカウントが効きそう
国産のサービスなのでこのシステムを使ってのトラブルや技術的なサポートは受けやすいだろう
imagefluxの紹介リンク: https://www.sakura.ad.jp/services/imageflux/

imgixを利用した具体的な実装方法

ここからは具体的にAWSのS3に設置した画像をimgixが参照する設定方法を説明します。

事前準備としてimgixに新規アカウントを作成してください。

imgixにアクセスすると、まだ何も作成していない場合は下記のような画面が表示されるので ADD A SOURCE ボタンを押して新しいimgixのソース(imgixの作成するサービスの単位)を作成してください。

新規にimgix.netのサブドメイン(今回は kon-yu )を作成し、画像の取得元にS3を選択します。

imgixがアクセスするS3のバケット(今回のサンプルでは imgix-blog-test-bucket )を作成し、そのS3のバケットにImgixからアクセスできるように、IAMユーザを作成します。

作成したIAMユーザに必要な下記のIAMポリシーを作成し、IAMユーザにアタッチします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR_BUCKET_NAME",
                "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            ]
        }
    ]
}

作成したIAMユーザのアクセスキーとシークレットキーをimgixの管理画面に登録し、デプロイボタンを押します。

しばらくするとStatusがDeployedになるので準備完了です。

imgixの動作確認

S3に適当な画像を設置します。今回使用した画像: https://source.unsplash.com/8xB2cH9a5pY

S3のバケットにある画像データに直接アクセスするとエラーになるのが確認できます。こちらにアクセスすると、下記のように権限不足のエラーが返却されます。 https://imgix-blog-test-bucket.s3.ap-northeast-1.amazonaws.com/photo-1620050649633-1f9a8c981346.jpeg

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>94961V8EH4GQGQXA</RequestId>
<HostId>9XzEWailQq/LOIuIFZDzHNneqTGGrGal5WMTNlguFdE6VONV1nRRqChqa+1+fCRq17qOmYMyYGk=</HostId>
</Error>

今度はImgixを通した形で先程の画像にアクセスすると、画像を取得することができます。

https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg

またimgixの仕様で縦横幅のサイズを指定して切り抜いたり、

https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?w=400&h=200&fit=crop

顔認識させて顔にフォーカスして画像を作成することができます。

https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?w=400&fit=facearea&facepad=2

Next.jsに組み込む

Next.jsは組み込みライブラリnext/imageで画像をいい感じにしてくれます。具体的には解像度ごとsrcsetを生成してくれたり、レスポンシブ対応するために複数異なるサイズの画像をsrcsetに作成してくれます。

srcsetで指定された画像は、ブラウザからリクエストされたタイミングで動的に生成されimgixにキャッシュされます。そのため動的に画像を生成するためビルド時にすべての画像を作成するような手間がありません。

imgixがキャッシュの保持・破棄をするため参照元のS3が生成した余分なファイルを持つこともありませんのでファイルの管理が煩雑にならず、バケットサイズを小さく保つことができます。

設定

next/imageをimgixで利用するためにコンフィグファイルでローダーを設定します。

imgix以外にも現在のところVercel、Cloudinary、Akamai がnext.jsで公式サポートされています。独自ローダーを実装することも可能です(コードを読む限りそんなに難しくはないです)。

next.config.js

module.exports = {
  //Next/imageで利用するローダーをimgixに指定する 
  images: {
    loader: 'imgix',
    path: 'https://kon-yu.imgix.net/',
  },
}

具体的な実装

レスポンシブに対応の画像は、layoutをresponsiveにします。

srcのURLパラメタでは、width、heightに合わせるように、画像のアスペクト比を調整しています。そのため ar を指定してアスペクト比を 12:9 (もちろん4:3でも可)で画像を切り取るように設定しています。

import Image from 'next/image'

<Image
 src={"/photo-1620050649633-1f9a8c981346.jpeg?ar=12:9&fit=crop"}
 width={1200} 
 height={900}
 layout="responsive"
/>

これをビルドするとこのようなHTMLが出力されます。

next/imageがsrcsetの画像サイズに合わせてimgixのURLを &w=640 や &w=1920 など自動で付与しているのがわかります。

<img
 src="https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=3840"
 decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
 sizes="100vw"
 srcset="
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=640 640w,
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=750 750w,
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=828 828w, 
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=1080 1080w,
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=1200 1200w,
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=1920 1920w, 
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=2048 2048w,
   https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=12%3A9&amp;fit=crop&amp;auto=format&amp;w=3840 3840w"
>

固定幅の画像の場合はlayoutをfixedにします。

後の設定はレスポンシブの場合と同じようにアスペクト比を指定します。

import Image from 'next/image'

<Image
  src={"/photo-1620050649633-1f9a8c981346.jpeg?ar=1:1&fit=crop"}
  width={200}
  height={200}
  layout="fixed"
/>

これをビルドするとこのようなHTMLが出力されます。

next/imageがsrcsetの画像解像度1x 2xに合わせてimgixのURLを &w=256 や &w=640 など自動で付与してくれます。

<img
  src="https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=1%3A1&amp;fit=crop&amp;auto=format&amp;w=640"
  decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
  srcset="
    https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=1%3A1&amp;fit=crop&amp;auto=format&amp;w=256 1x,
    https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?ar=1%3A1&amp;fit=crop&amp;auto=format&amp;w=640 2x"
>

注意

jsxの中で表示する縦横幅がwidth, heightで固定しているので、srcにパラメタを ?w=200&h=200 としてしまうと画像の縦横のサイズが200pxで固定されてしまい、next/imageが自動で処理してくれないので注意が必要です。

import Image from 'next/image'

<Image
  src={"/photo-1620050649633-1f9a8c981346.jpeg?w=200&h=200&fit=crop"}
  width={200}
  height={200}
  layout="fixed"
/>

これをビルドするとこのようなHTMLが出力されてしまいます。

next/imageがsrcsetの画像解像度1x 2xが作られているにも関わらず &w=200 や &h=200 の固定された解像度になってしまいます。つまりRetinaディスプレイ等でぼやけた画像が表示される可能性があります。

<img
  src="https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?w=200&amp;h=200&amp;fit=crop&amp;auto=format" 
  decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" 
  srcset="
    https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?w=200&amp;h=200&amp;fit=crop&amp;auto=format 1x,
    https://kon-yu.imgix.net/photo-1620050649633-1f9a8c981346.jpeg?w=200&amp;h=200&amp;fit=crop&amp;auto=format 2x"
>

サンプルコードはこちら

GitHub - konyu/nextjs-imagetag-sample at imgix_sample

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

github.com

GitHub - konyu/nextjs-imagetag-sample at imgix_sample

考察・提案

画像を必要なサイズにリサイズしたり、レスポンシブ用に画像を用意するような作業は、デザイナとフロントエンジニアの狭間の作業見過ごされがちです。往々にしてパフォーマンスを気にできる殊勝なソフトウェアエンジニアが対処することになります(チームにフロントエンジニアがいない場合も多いですしね)。

このような作業をいかに誰かのせいにすることなく、しくみで解決するのが、よい開発組織ではないでしょうか？

Next.jsを使う場合、ホスティングをVercelにすることにより、next/imageを利用した画像の最適化もデフォルトの設定で出来るのでかなり工数を削減できます。SPAのサービスを作る場合は選択肢に入れてもいいのではないでしょうか？特に個人開発やサービスの規模が比較的小規模の場合は抜群に相性が良さそうです。

まとめ

Webページやウェブサービスにおいて、画像を解像度ごとに用意する方法を4つ紹介し、それぞれのメリット・デメリットをまとめました。その中から画像生成サービスがどういう物があるのか例を上げ、その中の一つであるimgixの具体的な使い方、next.jsでの組み込み方を紹介しました。

参考リンク

PR

XではUZUMAKIの新しい働き方や日常の様子を紹介！ぜひフォローをお願いします！

noteではUZUMAKIのメンバー・クライアントインタビュー、福利厚生を紹介！

UZUMAKI｜note

株式会社UZUMAKIです。主に代表の工藤が投稿してますが、ほかのメンバーもたまに投稿します。https://uzumaki-inc.jp/ 受託開発を生業としてますが、リモートワークを通じて、今までにない組織形態での働き方を模索、実践しています。

note.com

UZUMAKIではRailsエンジニアを絶賛募集中です。

↓の記事を読んでご興味を持っていただいた方は、ぜひ応募よろしくお願いします！

UZUMAKI 採用情報

これを実践するには、通常の社会で求められる上司による部下の管理が必要という前提が不要になってきます。例えば、時間管理をしない、圧倒的な性善説で動く、メンバーは自発的に動くということをUZUMAKIでは当たり前のように行っております。現在は、コーポレートサイト記載の企業 ...

job.uzumaki-inc.jp

是非応募宜しくおねがいします！

Webサービスで画像生成サービスを利用して生産性をあげよう

概要

目次

目的