ブログのアイキャッチ新サイズ (1200×630) をCloudinaryの内容認識クロップで配信する

しがひ

2019.06.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Developers.IOは進化し続け、見た目にもときおり変化があります。インフラと運用を一手に担うブログ運営の努力のおかけで執筆者としてはこれといって意識することもなく書き続けられるのですが、最近の大きなアップデートとしてアイキャッチ ↓ のサイズがOGP対応の1200x630になり、そのサイズで準備がないものはアイキャッチ作成依頼を出すか自分で画像を編集して画像ライブラリにあげなおす必要があります。

（上が作成依頼で作成された新フォーマット、下が以前のフォーマットがPadでリサイズされ表示されているもの）

いいところをいい感じに切り取る内容認識クロップ

最近、ローカルやオンラインのツールで写真の内容を理解してクロップなどの画像処理を行うものが出てきていますが、Cloudinaryの内容認識クロップは、個人でツールを使うことなくその処理をワークフロー化し、オリジナル画像を元に自由自在に配信することができます。

さらに、Cloudinaryはドメイン指定でfetchしてCDN(CloudFront)のキャッシュ上で画像処理を行うことができるため、元画像をダウンロードしたりせず、URLの操作だけでこれを完結できます。（Fetchの元画像更新頻度はデフォルトで7日間隔なので、運用によってはAuto-UploadというS3を使った自動化が推奨されます）

今回はドメイン制限をしていない太っ腹なCloudinaryのデモ環境を使って試してみます。上記の「ベルリンだより」の旧アイキャッチをクロップしてみます。

original image URLを https://res.cloudinary.com/demo/image/fetch/ の後に追記して、パラメーターで画像を調整する
https://dev.classmethod.jp/wp-content/uploads/2016/01/berlin_gate.png  //original image URL
https://res.cloudinary.com/demo/image/fetch/ar_1200:630,c_fill,dpr_2.0,g_auto,f_auto,q_auto/https://dev.classmethod.jp/wp-content/uploads/2016/01/berlin_gate.png  //fixed image URL

ar_1200:630  //アスペクトレシオの指定
c_fill  //Fillでクロップ
dpr_2.0  //DPRを2.0に指定
g_auto  //重点を自動で設定、他にface、body、ocr_textなどテーマに沿った重点指定も可能
f_auto,q_auto  //配信先に合わせた配信フォーマット、サイズの自動変換

オリジナルの画像がもともとクロップされていることを考えると、かなりいい線を行ってるんじゃないでしょうか。では、調子に乗って古いアイキャッチをフェッチして色々クロップしてみます。（新サイズはCloudinaryから配信されいます）

旧サイズ	新サイズ

200x200の画像サイズを1200x630のアスペクトレシオでクロップしているわけですが、この「アイキャッチの自動作成」は、弊社清水によるデイリーポータルZさんでの検証でもっと高度な操作と自動化が紹介されています。

また配信フォーマットの最適化処理により、右側の画像を右クリックして保存すると、ChromeではWebp、Safariではjpeg2000で保存されます。つまりオリジナルの画像形式が何であれ、それをfetchして画像処理、フォーマット変換を行って最適に配信できているわけです。Auto-uploadでこのシステムを実装すると、「WordPressに大きめの適当な大きさでいつもの通りアップロード、あとはよしなにCloudinaryがアイキャッチ化して配信される」ことが可能になります。

イメージ検索で閲覧できるもともと大きなサイズの弊社の写真をアイキャッチ化してみましょう。