Storyblokのdocs翻訳チャレンジその4！！！

#### ソース
https://www.storyblok.com/docs/image-service

# 第四段

この翻訳チャレンジでは、翻訳をより良いものにするため編集リクエストを送ってくれる方を募集しています！！！！！

# イメージサービス

Storyblokの`out-of-the-box`イメージサービスは、画像を実行時リサイズすることで、デバイスやプラットフォームに関係なくあなたの顧客にはハイクオリティで訴求力のあるブランド体験を提供出来ます。

## インストール / 要件

イメージサービスを使うのに必要なインストール作業は何もありません。システム要件も同じくありません。

## 使い方

画像をStoryblokにアップロードすればイメージサービスを最適化、リサイズ、クロップなどの目的に使うことが出来るようになります。

URL構造: `img2.storyblok.com/NEW_SIZE(/FILTERS/…)/YOUR_IMAGE_PATH`

[Storyblok rendering service](https://www.storyblok.com/docs/Rendering-Service/Introduction)を使えば、リサイズヘルパーが使えます:

```html
{{ blok.image | resize:'300x300' }}

# 遅延読み込みのレスポンシブイメージをlazysizesと共に使用した例
# https://afarkas.github.io/lazysizes/
<img
  src="{{ blok.image | resize:'100x0' }}"
  data-sizes="auto"
  data-src="{{ blok.image | resize:'300x0' }}"
  data-srcset="{{ blok.image | resize:'300x0' }} 300w,
  {{ blok.image | resize:'600x0' }} 600w,
  {{ blok.image | resize:'900x0' }} 900w" class="lazyload img-responsive" />
```

セルフホストの場合やクライアントサイドプロジェクトの場合、ヘルパ関数をより簡単に書くことができます。JavaScriptとPHPの例を示します。


**JavaScriptの例**

```javascript
function resize(image, option) {
  var imageService = '//img2.storyblok.com/'
  var path = image.replace('//a.storyblok.com', '')
  return imageService + option + path
}

var example = '//a.storyblok.com/f/39898/1000x664/ab64dad3bc/flowers.jpg'
console.log(resize(example, '500x500'))
// //img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg から取得
```

**PHPの例**

```php
<?php

function resize($image, $option) {
  $imageService = '//img2.storyblok.com/';
  $path = str_replace('//a.storyblok.com', '', $image);
  return $imageService . $option . $path;
}

$example = '//a.storyblok.com/f/39898/1000x664/ab64dad3bc/flowers.jpg';

echo resize($example, '500x500');
// //img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg から取得
```

## 関数

### リサイズ

ブラウザにこのURLを入力してください。

```
img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg
```

幅500px、高さ500pxの画像が見えるはずです。URL内の寸法を調整すれば、自動的にあなたの定義した通りに寸法が調整されます。

幅に比例させたい場合は高さに0を入れます。このように:

```
img2.storyblok.com/500x0/f/39898/1000x664/ab64dad3bc/flowers.jpg
```

## fit-in

`fit-in`引数は自動クロップではなく自動リサイズ(シュリンク)を適用したい場合のための引数です。高さと幅は仮想的なボックスの内側にフィットするように変更されます。ボックスをある色で塗りつぶしたければ、フィルフィルター`filters:fill(CCCCCC)`を16進RGB表現(#無し)で使うことが出来ます。

**例1**

```
img2.storyblok.com/fit-in/200x200/filters:fill(CCCCCC)/f/39898/1000x664/ab64dad3bc/flowers.jpg
```

`filter:fill(CCCCCC)`なのでグレーで塗りつぶされて出力されます。

![flowers.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/a341d9ed-f65d-4a29-d2b5-72fdc45c46ef.jpeg)


**例2**

```
img2.storyblok.com/fit-in/200x200/filters:fill(transparent):format(png)/f/39898/1000x664/ab64dad3bc/flowers.jpg
```

`filter:fill(transparent)`によって、透明色で塗りつぶされ、またフォーマットをpngに変えて出力されます。

![flowers (1).jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/9d910b4e-66c8-141f-c120-6a240b0383d3.jpeg)


### クオリティ最適化

クオリティフィルタを使えば、jpg画像の圧縮率を変えることも出来ます。この値は0-100を取ります。

**例**

```
img2.storyblok.com/200x150/filters:quality(10)/f/39898/1000x664/ab64dad3bc/flowers.jpg
```

これは圧縮率10のjpg画像の例です。

![flowers (2).jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/12a2a516-2679-d714-ff29-d819ad081d9e.jpeg)


フォーマットの変更

画像の出力フォーマットを変えることもできます。`webp`, `jpeg`, `gif`, `png`が選択可能です。

**例**

```
img2.storyblok.com/fit-in/200x200/filters:format(gif)/f/39898/1000x664/ab64dad3bc/flowers.jpg
```

これは、jpg画像をgifに変換した例です。

![flowers (3).jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/70bc94e2-876d-d53b-d6f1-394e8b6f62f4.jpeg)


### 顔検出とスマートクロッピング

画像をクロップするとき、顔がある場所の周りをクロップするスマートフィルターを定義できます。これはスマートアルゴリズムで決定されます。サイズ指定の後にキーワード`smart`を入れるだけです。

**例**

```
//img2.storyblok.com/300x90/smart/f/39898/2247x1500/5e42d053a5/kitchen.jpeg
```

スマートフィルター無しの場合の出力

![kitchen.jpeg](https://qiita-image-store.s3.amazonaws.com/0/157765/43cc72e7-06c5-a994-dcc0-9e6af5306c0c.jpeg)


スマートフィルター有りの場合の出力

![kitchen (1).jpeg](https://qiita-image-store.s3.amazonaws.com/0/157765/f261749c-5d82-6eec-718c-7c49b92dbe90.jpeg)

https://www.storyblok.com/docs/image-service