画像の最適化

ウェブページ上のダウンロード容量の大半は画像に相当し、画像が表示スペースのかなりの部分を占有することも少なくありません。そのため、画像を最適化することはウェブサイトの容量の大幅な削減とパフォーマンスの改善につながります。ブラウザでダウンロードする必要がある容量が少ないほど、クライアントの帯域幅の競合は減り、ブラウザが有効なコンテンツをダウンロードして画面に表示するまでの時間も短縮されます。

画像の最適化は芸術でもあり科学でもあります。つまり、画像を最も適切に圧縮する方法について明白な正解がないという点では芸術であり、画像のサイズを大幅に削減できる非常に高度な技術やアルゴリズムがたくさんあるという点では科学です。お使いの画像に最適な設定を見つけるには、フォーマット機能、エンコード データのコンテンツ、画質、ピクセル数など、数多くの特性に沿った慎重な分析が必要です。

画像の除去と置換

TL;DR

  • 不要な画像リソースを除外する
  • できる限り CSS3 効果を活用する
  • 画像にテキストをエンコードせず、ウェブフォントを使う

検討すべき最初の問題は、必要な効果を出すために画像が本当に必要かどうか、ということです。優れたデザインとは、シンプルでありながら常に最高のパフォーマンスをもたらすものです。画像はページ上の HTML、CSS、JavaScript などの他のアセットと比べてかなりの容量を占めることが多いため、画像リソースを除去できれば、必ず最高の最適化戦略になります。一方、画像を適切に利用すれば千の言葉より多くの情報を伝えることもできます。そのバランスをどう取るかは担当者次第です。

次に、希望どおりの結果を別の技術を使ってもっと効率よく出力できないかを検討します。

  • CSS 効果(グラデーション、シャドウなど)や CSS アニメーションを使えば、解像度やズームのレベルにかかわらず、常に鮮明に表示される解像度に依存しないアセットを、画像ファイルに必要な容量の何分の 1 かで生成できます。
  • ウェブフォントでは美しい字体を利用できるだけでなく、テキストの選択、検索、サイズ変更の機能もそのまま利用できるため、操作性が大幅に向上します。

画像アセットにエンコード テキストがあることに気づいたら、よく見直してください。優れたタイポグラフィはデザイン、ブランディング、読みやすさにとって重要ですが、画像内テキストはユーザー エクスペリエンスを低下させる原因となります。テキストの選択、検索、拡大や縮小、アクセスができない上、高 DPI デバイスにも適していません。ウェブフォントを使うには一連の最適化が必要ですが、画像内テキストの問題はすべて払拭されます。テキストを表示する際は常にウェブフォントを選ぶことをおすすめします。

ベクター画像とラスター画像

TL;DR

  • 幾何学的図形を構成する画像にはベクター画像が最適である
  • ベクター画像はズームや解像度に依存しない
  • 不ぞろの形状や細かい部分が多い複雑なシーンにはラスター画像を使用する必要がある

画像が、本当に、希望どおりの効果をもたらすのに最適な形式であることを確認したら、次に重要な選択肢は、適切な形式を選ぶことです。

 

ベクター画像の拡大図
ベクター
ラスター画像の拡大図
ラスター
  • ベクター形式では、線、点、ポリゴンを使って画像を表します。
  • ラスター形式では、長方形のグリッド内の各ピクセルの値を個々にエンコードすることで画像を表します。

形式ごとに長所と短所があります。ベクター形式は、単純な幾何学的図形(ロゴ、テキスト、アイコンなど)で構成される画像に最適です。解像度とズームの設定にかかわらず鮮明に結果が出力されるため、高解像度画面やさまざまなサイズで表示する必要があるアセットに理想的な形式です。

ただし、ベクター形式は、シーンが複雑な場合(写真など)には適していません。すべての形状を表す SVG マークアップの量が極めて多くなることがあり、「写真のようにリアルに」出力されない可能性があります。このような場合は、GIF、PNG、JPEG などのラスター画像形式や、JPEG-XR、WebP などの最新の形式のいずれかを使用することをおすすめします。

ラスター画像には、解像度やズームに依存しないといった同様の便利な特性はありません。ラスター画像を拡大すると、ギザギザしてぼやけた表示になります。そのため、ユーザーに最適なエクスペリエンスを提供するには、さまざまな解像度の複数のバージョンのラスター画像を保存することが必要になる可能性があります。

高解像度画面の影響

TL;DR

  • 高解像度画面では 1 つの CSS ピクセルに複数のデバイス ピクセルが使用される
  • 高解像度画像では、ピクセルの数とバイトの数を大幅に増加する必要がある
  • 画像を最適化する手法は解像度にかかわらず同じである

画像ピクセルの話をする場合は、ピクセルの種類、つまり CSS ピクセルとデバイス ピクセルを区別する必要があります。1 つの CSS ピクセルに複数のデバイス ピクセルが含まれていることがあります。たとえば、1 つの CSS ピクセルが 1 つのデバイス ピクセルにじかに対応することもあれば、1 つの CSS ピクセルが複数のデバイス ピクセルでサポートされていることもあります。要するに、デバイス ピクセルの数が多いほど、画面上の表示コンテンツの精度は高くなります。

CSS ピクセルとデバイス ピクセル

高 DPI(HiDPI)画面では美しい結果が出力されますが、言うまでもなく 1 つの代償を伴います。デバイス ピクセルの数が多いという点を利用するためには、より精細な画像アセットが必要です。うれしいことに、ベクター画像は解像度にかかわらず鮮明にレンダリングできるため、この処理に最適です。より詳細にレンダリングするには処理コストが高くなる可能性がありますが、ベースとなるアセットは同じで、解像度には依存しません。

一方、ラスター画像はピクセル単位で画像をエンコードするため、より一層難しくなります。つまり、ピクセルの数が多いほど、ラスター画像のファイルサイズも大きくなります。たとえば、100x100(CSS)ピクセルで表示される写真アセット間の違いを検討してみましょう。

画面解像度 合計ピクセル数 圧縮前のファイルサイズ(4 バイト/ピクセル)
1x 100 x 100 = 10,000 40,000 バイト
2x 100 x 100 x 4 = 40,000 160,000 バイト
3x 100 x 100 x 9 = 90,000 360,000 バイト

物理的な画面の解像度を 2 倍にすると、水平方向のピクセル数 x 2 に垂直方向のピクセル数 x 2 を乗算するため、合計ピクセル数は 4 倍に増加します。つまり、「2x」の画面は単なる 2 倍に終わらず、必要なピクセル数は 4 倍になるわけです。

では、これは実際にはどういう意味でしょうか。高解像度画面では美しい画像を出力でき、製品の特徴としては優れていますが、高解像度画面には高解像度の画像も必要です。ベクター画像は解像度に依存せず、常に鮮明な結果が出力されるので、可能な限りベクター画像の利用をおすすめします。ラスター画像が必要な場合は、画像ごとに複数のバージョンを用意して最適化します。もっと詳しく説明しましょう。

ベクター画像の最適化

TL;DR

  • SVG は XML ベースの画像形式である
  • サイズを削減するには SVG ファイルを縮小化する必要がある
  • SVG ファイルの圧縮には GZIP を使う

最新のブラウザはすべて SVG(Scalable Vector Graphics)をサポートしています。これは、2 次元グラフィック向けの XML ベースの画像形式です。SVG マークアップはページに直接埋め込むことも、外部リソースとして使用することもできます。さらに、SVG ファイルはほとんどのベクターベースの描画ソフトウェアで作成できます。また、お気に入りのテキスト エディタで手作業で直接作成することもできます。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

上記の例では、シンプルな円形が黒の輪郭線に赤い背景でレンダリングされます。これは Adobe Illustrator から書き出されたものです。おわかりのように、このファイルには、レイヤ情報、コメント、XML 名前空間など、ブラウザでのアセットのレンダリングには必要ない多くのメタデータが含まれています。このため、svgo のようなツールを使って SVG ファイルを縮小化することを常におすすめします。

たとえば、svgo を使用すると、Illustrator で生成された上記の SVG ファイルはバイト数が 470 から 199 に減り、サイズが 58% 縮小されます。さらに、SVG は XML ベース形式なので、GZIP 圧縮を適用して転送サイズを縮小することもできます。サーバーが SVG アセットを圧縮するように設定されていることを確認しましょう。

ラスター画像の最適化

TL;DR

  • ラスター画像はピクセルのグリッドである
  • ピクセルごとにカラー情報と透明性情報をエンコードする
  • 画像の圧縮では、さまざまな技術でピクセルあたりの必要なビット数を削減して画像のファイルサイズを縮小する

ラスター画像はピクセルからなる単なる 2 次元グリッドです。たとえば、100x100 のピクセル画像は 10,000 個のピクセルが並んだものです。さらに、各ピクセルには「RGBA」値が保存されています。(R)は赤のチャンネル、(G)は緑のチャンネル、(B)は青のチャンネル、(A)アルファ(透明性)のチャンネルです。

内部処理で、ブラウザはチャンネルごとに 256 の値(シェード)を割り当て、チャンネルあたり 8 ビット(28 = 256)、ピクセルあたり 4 バイト(4 チャンネル x 8 ビット = 32 ビット = 4 バイト)に変換されます。そのため、グリッドの寸法がわかれば、ファイルサイズを簡単に計算できます。

  • 100x100 ピクセルの画像は 10,000 個のピクセルで構成される
  • 10,000 ピクセル x 4 バイト = 40,000 バイト
  • 40,000 バイト/1024 = 39 KB

^

寸法 ピクセル数 ファイルサイズ
100 x 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

100x100 ピクセルの画像で 39 KB というサイズは大きい数字のようには見えませんが、画像が大きくなるとファイルサイズは急成長し、画像アセットのダウンロードに時間もコストもかかるようになります。うれしいことに、これまで説明してきたのは「圧縮前」の画像形式についてです。画像のファイルサイズを縮小するにはどうしたらよいでしょうか。

1 つの簡単な戦略は、画像の「ビット深度」をチャンネルあたり 8 ビットからさらに小さいカラーパレットに縮小することです。チャンネルあたり 8 ビットであると、1 つのチャンネルに 256 の値が割り当てられ、合計 16,777,216(2563)色になります。では、パレットを 256 色に減らしたらどうなるでしょうか。RGB チャンネルには合計 8 ビットのみで済むため、ピクセルあたり 2 バイト削減できます。つまり、元のピクセルあたり 4 バイトの形式から 50% の圧縮となります。

圧縮の結果

次に、ピクセルに保存されているデータを最適化したら、もっと細かい分析が可能となり、隣接するピクセルも確認できるようになります。結局のところ、空、繰り返しのテクスチャなど、多くの画像、特に写真では、隣接するピクセルの色が似ています。この情報を有効に活用すれば、圧縮ツールは「デルタ エンコード」を適用でき、ピクセルごとに値を保存するのではなく、隣接するピクセルとの違いを保存できるようになります。隣接するピクセルが同じであれば、デルタは「ゼロ」で、1 ビットを保存するだけで済みます。しかし、これで終わりではありません。

人間の目は色によって感度のレベルが異なります。色のパレットを小さくしたり大きくしたりすることで、この点を考慮するようにカラー エンコードを最適化できます。 「隣接する」ピクセルで 2 次元のグリッドは構成されます。言い換えれば、各ピクセルには複数の隣接するピクセルがあります。この点を活用してデルタ エンコードをさらに改善できます。 隣り合うピクセルのみを確認するのではなく、隣接するピクセルの範囲を拡大して確認すれば、その範囲ごとに異なる設定でエンコードすることができます。他にもさまざまな技術があります。

おわかりのように、画像の最適化はまたたく間に複雑になり(見方によっては楽しいですが)、学問や営利目的の研究が活発な分野です。画像が占める容量は大きいため、優れた画像圧縮技術の開発には大きな価値があります。詳しくは、Wikipedia のページをご覧ください。また、実践例については、WebP 圧縮法に関するホワイトペーパーをご覧ください。

繰り返しますが、すべて便利である反面、非常に学術的でもあります。いったいどのようにこの技術を使ってページ上の画像を最適化できるのでしょうか?新しい圧縮技術を発明できる立場にないことは確かですが、重要なのは問題の形、つまり RGBA ピクセル、ビット深度など、さまざまな最適化手法を理解することです。各種のラスター画像形式の説明に入る前に、こうした概念をすべて理解し、頭に入れておくことが大切です。

ロスのない画像圧縮とロスの多い画像圧縮

TL;DR

  • 人間の目の仕組みのため、画像はロスのある圧縮の対象として最適である
  • 画像の最適化とは、ロスのある圧縮とロスのない圧縮の作用である
  • 画像形式の違いとは、画像を最適化するためにロスのあるアルゴリズムとロスのないアルゴリズムのどちらをどう使うかの違いによるものである
  • すべての画像に対して最適な形式や「画質の設定」は 1 つとしてない: 特定の圧縮ツールと画像のコンテンツの組み合わせごとに生成される出力は異なる

ページのソースコードや実行可能ファイルなど、特定の種類のデータの場合は、圧縮しても元の情報が変わらず、失われないことが大切です。データが 1 ビットでもなくなったり間違っていたりすると、ファイルの中味の意味がまったく変わり、もっと悪ければ、完全に壊れてしまうこともあります。画像、音声、動画など、その他の種類のデータの場合は、元のデータの表現と「ほぼ」合っていればまったく問題ありません。

実際、人間の目の仕組みにより、画像のファイルサイズを縮小するために各ピクセルの情報の一部を捨ててしまっても、通常はまったく差し支えありません。たとえば、人間の目は色によって感度が異なるため、わずかなビット数でエンコードできる色もあります。そのため、通常の画像最適化パイプラインは基本的に次の 2 つの手順で構成されます。

  1. 一部のピクセルデータを取り除く「ロスのある」フィルタで画像を加工する
  2. ピクセルデータを圧縮する「ロスのない」フィルタで画像を加工する

1 つ目の手順は省略可能です。正確なアルゴリズムは特定の画像形式によって異なりますが、重要なのは、どの画像もロスのある圧縮手順を実施してサイズを圧縮できる、ということです。実際、GIF、PNG、JPEG など、さまざまな画像形式の違いは、ロスのある手順とロスのない手順を適用する際に使う(または省略する)具体的なアルゴリズムの組み合わせにあります。

では、ロスのある最適化とロスのない最適化の「最適な」設定とはどのようなものでしょうか。その答えは、画像のコンテンツや、ファイルサイズとロスのある圧縮による出力結果のバランスの取り方といった独自の基準によって異なります。ロスのある最適化を省略し、複雑な細かい点まで厳密に伝える必要がある場合もあれば、画像アセットのファイルサイズを縮小するためにロスのある最適化を積極的に適用できる場合もあります。独自の判断と状況を考慮する必要があります。万能の設定は 1 つとしてありません。

「Web 用に保存」機能

実践例として、JPEG などのロスのある形式を使用する場合、通常、圧縮ツールにはカスタマイズ可能な「画質」の設定が表示されます(Adobe Photoshop の「Web 用に保存」機能で表示される画質スライダーなど)。通常、1~100 の値で、ロスのあるアルゴリズムとロスのないアルゴリズムの具体的な組み合わせの内部処理を制御します。満足のいく結果になるよう、お持ちの画像でさまざまな画質の設定を試し、思い切って画質のレベルを下げてみましょう。ほとんどの場合、表示される結果は非常に良好で、ファイルサイズも大幅に削減されます。

適切な画像形式の選択

TL;DR

  • 適切な汎用の形式を選択することから始める(GIF、PNG、JPEG
  • 形式ごとに最適な設定を試して選択する(画質、パレットサイズなど
  • クライアントが最新の場合は WebP アセットや JPEG XR アセットの追加を検討するサイズ変更した画像

さまざまなロスのある圧縮アルゴリズムとロスのない圧縮アルゴリズムの他、画像形式ごとに、アニメーション チャンネル、透明性(アルファ)チャンネルなど、対応する機能は異なります。そのため、特定の画像の「適切な形式」を選択するとは、希望どおりの結果が表示され、しかも機能要件を満たす形式を選択する、ということです。

形式 透明性 アニメーション ブラウザ
GIF あり あり すべて
PNG あり なし すべて
JPEG なし なし すべて
JPEG XR あり あり IE
WebP あり あり Chrome、Opera、Android

幅広くサポートされている画像形式は、GIF、PNG、JPEG の 3 つです。この 3 つの形式の他に、WebP、JPEG XR などの最新の形式にも対応しているブラウザもあります。最新の形式では、全体的な圧縮機能が向上し、機能の数も増えています。では、どの形式を使えばよいのでしょうか。

「Web 用に保存」機能

  1. アニメーションが必要ですか。必要であれば、GIF が唯一の選択肢です。
  2. GIF ではカラーパレットが最大で 256 色に制限されるため、ほとんどの画像で色の選択肢を抑えることができます。さらに、パレットが小さければ PNG-8 で画像の圧縮性が向上します。このため、GIF が適切な選択肢になるのはアニメーションが必要な場合のみです。
  3. 最高の解像度で精細さを維持する必要がありますか。必要な場合は、PNG を使用してください。
  4. PNG では、カラーパレットのサイズ選択以外は、ロスのある圧縮アルゴリズムは適用されません。このため、最高画質の画像が出力されますが、他の形式よりもファイルサイズが著しく大きくなるという代償も伴います。慎重に使用してください。
  5. 画像アセットに幾何学的図形で構成された画像が含まれている場合は、ベクター(SVG)形式に変換することを検討しましょう。
  6. 画像アセットにテキストが含まれている場合は、よく見直してください。画像内のテキストは、選択も、検索も、「ズーム」もできません。カスタムの外観を(ブランディングなどの理由で)出力する必要がある場合は、代わりにウェブフォントを使用してください。
  7. 写真やスクリーンショットのような画像アセットを最適化していますか。最適化している場合は、JPEG を使用してください。
  8. JPEG では、ロスのある最適化とロスのない最適化を組み合わせて画像セットのファイルサイズを削減します。JPEG の画質レベルをいくつか試して、アセットの最適な画質とファイルサイズのバランスを見つけてください。

最後に、最適な画像形式とアセットごとの設定を決めたら、WebP や JPEG XR でエンコードしたバージョンを追加することを検討してください。この 2 つの形式はどちらも新しいため、残念ながら(まだ)すべてのブラウザでサポートされているわけではありませんが、最新のクライアントであれば著しい削減を実現できます。たとえば、WebP では、平均で、同等の JPEG 画像よりファイルサイズを 30% 縮小できます。

WebP も JPEG XR も幅広くサポートされていないため、適切なリソースを提供するにはアプリケーションやサーバーに別のロジックを追加する必要があります。

  • JPEG XR や WebP の配信を含め、一部の CDN では画像の最適化をサービスとして提供しています。
  • オープンソースのツール(Apache や Nginx 向けの PageSpeed など)を使えば、適切なアセットの最適化、変換、提供を自動化できます。
  • 別のアプリケーション ロジックを追加することで、クライアントを検出し、サポートされている形式を確認して、利用できる最適な画像形式を提供できます。

最後に、Webview を使ってネイティブ アプリケーションのコンテンツをレンダリングする場合は、クライアントを完全に制御できるため、WebP を使うだけで済みます。Facebook、Google+ など多くのサービスでは WebP を使って画像をすべてアプリケーション内で配信しています。容量を削減できる価値があることは確かです。WebP について詳しくは、2013 年度 Google I/O の WebP: Deploying Faster, Smaller, and More Beautiful Images のプレゼンテーションをご覧ください。

ツールとパラメータの調整

すべての画像に万能な画像形式、ツール、最適化パラメータ セットは 1 つとしてありません。満足のいく結果にするには、画像のコンテンツと画像の表示要件やその他の技術要件に応じて、形式やその設定を選ぶ必要があります。

ツール 説明
gifsicle GIF 画像を作成して最適化する
jpegtran JPEG 画像を最適化する
optipng ロスのない PNG の最適化
pngquant ロスのある PNG の最適化

各圧縮ツールのパラメータを思い切って試してみましょう。画質レベルを下げ、どのように表示されるかを確認し、調整を繰り返してください。適切な設定が見つかったら、サイト上の他の同様の画像にも適用できます。ただし、すべての画像を同じ設定で圧縮しなければならないわけではありません。

サイズを変更した画像アセットの配信

TL;DR

  • 画像のサイズを変更して配信することは、最も単純で最も効果的な最適化の 1 つである
  • オーバーヘッドが高くなるので、大きいアセットにはよく注意する
  • 表示サイズに合わせて画像のサイズを変更することで不要なピクセルの数を削減する

画像の最適化は次の 2 つの基準に要約できます。各画像ピクセルをエンコードする場合に使うバイト数を最適化すること、そして合計ピクセル数を最適化することです。画像のファイルサイズは、合計ピクセル数に、各ピクセルをエンコードする場合に使うバイト数を乗算した値に過ぎません。それだけのことです。

このため、最もシンプルで最も効果的な画像の最適化手法の 1 つは、アセットを希望するサイズでブラウザに表示する場合に必要以上のピクセルを使わないことです。簡単に聞こえるかもしれませんが、残念ながら、ほとんどのページの多くの画像アセットがこの基準を満たしていません。通常、添付されているアセットは大きく、アセットを縮小し(これは、CPU リソースの無駄使いにもつながります)、解像度を下げて表示する処理はブラウザまかせです。

画像のサイズ変更

不要なピクセルを使用している場合のオーバーヘッドは、ブラウザに画像のサイズ変更を行ってもらわなければならないだけでなく、ページのレンダリングに必要な合計バイト数を削減して最適化する大きなチャンスも逃しています。さらに、サイズ変更は、ピクセル数の分だけ画像が縮小されるという作用だけでなく、画像の実サイズにも関係します。

実サイズ 表示サイズ 不要なピクセルの数
110 x 110 100 x 100 110 x 110 - 100 x 100 = 2100
410 x 410 400 x 400 410 x 410 - 400 x 400 = 8100
810 x 810 800 x 800 810 x 810 - 800 x 800 = 16100

上記の 3 つのすべてのケースで、表示サイズは画像の実サイズより「10 ピクセル小さいだけ」ですが、実サイズが大きくなるほど、エンコードして添付しなければならない余分なピクセルの数は著しく増加します。このため、すべてのアセットを正確な表示サイズで配信できないかもしれませんが、不要なピクセルの数を最小限に抑え、特に大きいアセットは表示サイズにできる限り近づけて配信することが必要です。

画像の最適化チェックリスト

画像の最適化は芸術でもあり科学でもあります。つまり、画像を最も適切に圧縮する方法について明白な正解がないという点では芸術であり、画像のサイズを大幅に削減できる非常に高度な技術やアルゴリズムがたくさんあるという点では科学です。

次に、画像の最適化に取り組む際に覚えておくべきおすすめの方法を紹介します。

  • ベクター形式を優先する: ベクター画像は解像度やスケールに依存しないため、複数のデバイスに対応する必要がある場合や高解像度の環境に最適です。
  • SVG アセットを縮小化して圧縮する: XML マークアップはほとんどの描画アプリケーションで生成されますが、削除できる不要なメタデータが含まれていることがよくあります。サーバーが SVG アセットの GZIP 圧縮を適用するように設定されていることを確認してください。
  • 最適なラスター画像形式を選ぶ: 機能要件を判断し、それぞれの特定のアセットに適した形式を選択してください。
  • ラスター形式に最適な画質設定を試す: 思い切って「画質」設定のレベルを下げましょう。ほとんどの場合、表示される結果は非常に良好で、ファイルサイズも大幅に削減されます。
  • 不要な画像メタデータを削除する: 多くのラスター画像に、地域情報、カメラ情報など、アセットに関する不要なメタデータが含まれています。適切なツールを使用してこのデータを取り除いてください。
  • 画像のサイズを変更して配信する: サーバー上の画像のサイズを変更し、「表示」サイズが画像の「実」サイズにできる限り近くなるようにします。画像が大きいと画像をサイズ変更する際にオーバーヘッドが著しく増加するため、特に注意してください。
  • 自動化、自動化、自動化: 自動化のツールやインフラストラクチャに予算をかけ、画像アセットのすべてが必ず最適化されるようにしてください。