横幅を変えることができます。200を指定してみると以下のような画像が表示されます。略で、高さを変えることができます。次に縦横比の設定です。いうパラメータを使用します。以下の指定が可能です。非常に多いので、詳しくは管理画面内のサンプル画像をご覧ください。clip画像の縦横比を固定してリサイズします。clamp画像の切り抜きや歪みなしに指定した画像サイズにフィットさせます。上下左右の端のピクセルを延長させた形になります。wとhの指定が必須です。fill画像を指定したサイズに収まるように配置します。余白部分をfill-colorで補います。fill=blurを用いると、ブラー画像を背景に配置することもできます。fillmax元画像以上のサイズ指定を行い、画像をその中央に配置します。余白部分をfill-colorで補います。fill=blurを用いると、ブラー画像を背景に配置することもできます。max指定したサイズ内に縦横比を固定しつつ画像を最大限配置します。scale指定したサイズに画像を拡大・縮小します。縦横比は維持されません。scrsetに対応するmicroCMSを使えばsrcsetへの対応も簡単にできます。画像を表示するブラウザによって読み込む画像を変えることができます。Retinaディスプレイだったら2倍サイズの画像、スマホだったら小さいサイズの画像、などと分けて表示することが何のロジックもなく実現できます。実際の利用方法は以下のような形です。表示するような指定となります。これによって必要のない画像を読み込まずに済み、ページ全体の読み込み速度の向上などが望めます。一方で複数サイズの画像を用意するのはとても大変です。Retinaなど全てが要件に入っていると画像を用意するだけでもかなりの作業量になってしまうでしょう。その点microCMSを使えば用意する画像サイズは一つで済むという素晴らしい利点があります。具体的に見ていきましょう。パラメータを使用することです。略で、ピクセルベースの比率で画像の大きさを指定するためのパラメータです。上記の場合はRatinaディスプレイの場合に2倍サイズの画像を表示します。h)と合わせることで更に柔軟に画像の指定ができるでしょう。webp変換microCMSはモダンな画像形式であるwebpにも対応しています。webpとは?Googleが開発している比較的新しい画像フォーマットです。「ウェッピー」と読みます。通常のjpgやpngをこのwebp形式に変換をかけるだけで20%~30%ほどサイズが小さくなります。この形式で画像を扱えば画面に表示されるまでの時間を短縮できるので使っておいて損はない技術、と言って差し支えないでしょう。ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。microCMSでwebp変換microCMSではwebpへの変換もすごく簡単に実現できます。https://d1pa960qlle92r.cloudfront.net/protected/example/img_sample_01.png?fm=webpwebpに対応しているのは一部のブラウザのみwebpはとても便利ですが一点注意点があります。使えるブラウザが限られている点です。Use...で確認してみると以下のような状況ということがわかります。わかりやすいところですと、Safariではwebpを使えません。先ほどのリンクをMacのSafariで開くと以下のような表示となってしまいます。iPhoneでも同様にエラー表示となります。日本ではiPhoneのユーザーも多いためこれでは困ってしまいます...。これは仕方のないことでしょうか?いえ、そんなことはありません。こんな時に使えるHTMLタグがあります。以下のようにHTMLを書いて保存し、色々なブラウザで開いてみましょう。src="https://d1pa960qlle92r.cloudfront.net/protected/example/img_sample_01.png"></picture>今度はSafariでもエラーが出なくなったはずです。内容をブラウザが表示するためです。このpicture要素であればwebpよりも多くのブラウザに対応できています。※IE11が対応できていないのでpolyfillであるPicturefill.jsの導入は検討すべきでしょうこのようにmicroCMSのwebp変換とpictureを組み合わせれば簡単にwebp表示にも対応できます。おわりにmicroCMSは日々改善を進めています。管理画面付きAPIがすぐに作れるmicroCMSというサービス作ってます。