Magentoには画像を配置するためのディレクトリが標準では2箇所存在します。
1つは 「media」。もう1つは 「skin」。

2つのディレクトリはともに画像やCSS・JavaScriptファイルを配置できますが、本来の用途としては異なる役割があります。
このエントリでは、2つのディレクトリの違いと、ベストプラクティスとしての画像の配置方法について解説します。

mediaディレクトリとは

mediaディレクトリは、Magentoのソースツリーの中にある、トップレベルのディレクトリです。（ちなみにMagento2ではトップレベルから格下げされて、 pub/media に変更になります）
主に商品やカテゴリの画像を格納するために用意されているディレクトリなのですが、Magento Community Edition 1.4以降は、組み込みのWYSIWYGエディタ経由でアップロードする、CMSページや静的ブロックの画像の格納先としてもされています。

実はダウンロード商品のデータも保持している

mediaディレクトリには、ダウンロード商品の実データも保管されています。
ApacheやNginxの設定が適切であるならば、ブラウザからのアクセスはできないようになっているはずなので、基本は心配ありません。設定が不適切なサーバの場合は、URLを類推してファイルをダウンロードされる恐れがあります。 

skinディレクトリとは

skinディレクトリは、Magentoが使用するテーマの画像やCSS・JavaScriptファイルを格納するディレクトリです。
基本的にこのディレクトリにはブラウザ経由でのファイルアップロードはできないようになっていて、ファイルアップロードをしたい場合には、FTPやSFTPクライアントを使用する必要があります。

また、skinディレクトリはテンプレートやレイアウトXMLと同様に、フォールバックするように作られていて、使用中のskinにファイルがない場合は、標準skinにさかのぼって適用するようになっています。

ここはmediaディレクトリと大きく異なる点です。mediaディレクトリにはフォールバックの概念はありません。

CMSのWYSIWYGエディタと画像パスの関係

CMS機能（商品管理機能も同様）に搭載されている、WYSIWYGエディタでアップロード・挿入できる画像のディレクトリは、どのMagentoでも（カスタマイズしていなければ）「media/wysiwyg」となっています。

エディタで挿入した画像の処理

エディタの画像挿入ボタンで画像を挿入すると、

https://principle-works.jp/media/wysiwyg/inserted_filename.jpg

というようなタグがエディタ上のタグに入ります。
MagentoはCMSデータ上にこのような文字列があると、

http://yourdomain.com/media/wysiwyg/inserted_filename.jpg

というURLに変換します。 これは通常の動作です。
このタグを使用する範囲においては、mediaディレクトリがどこにあろうとも、Magentoが適切に処理をしてくれます。
ただし、1ページ毎にこれらの文字列を処理していくため、ページの表示速度が落ちる点に注意が必要です。 

静的URLを画像ファイルに使用する場合

システム設定で、WYSIWYGエディタの画像挿入機能の設定を変えることができます。
標準では前述のとおりmediaタグを挿入するのですが、設定を変更すると、静的にURLを挿入します。

この場合、mediaタグの変換処理はなくなりますが、コンテンツ上には画像のパスが静的に挿入されます。
もし万一、mediaディレクトリのパスが変更になった場合は、すべてのコンテンツに対し、画像のパスを変更しなければならなくなります。

パフォーマンスを取るか、メンテナンス性を取るかはサイトごとに決めるべきことですが、どちらにも一長一短があることは覚えておいたほうが良いでしょう。

skinの画像を使用したい場合

skin下に配置した画像をCMS機能で使用したい場合は、CMS上で以下のように書きます。

{{skin url='images/ph_callout_left_top.gif'}}

この場合、今現在使用しているテーマ、およびそのテーマのフォールバック先にあるファイルのURLをMagentoが自動的に生成します。わざわざフルパスを書かなくても済むようになっています。

ただし、フォールバック先にもファイルがない場合は、404エラーになってしまいます。

さらに衝撃的なことには、Magento2ではこのskinタグは廃止される予定になっています。
ですから、 skinに画像をおいていて、しかもそれをCMSで呼び出している場合には、Magento2にアップデートした際にトラブルが発生することはまず間違いないと言ってよいでしょう。

ベストプラクティスとしての画像の配置先

以上を踏まえると、ベストプラクティスとしての画像の配置先は以下のようになると私は考えます。

  • ボタンやアイコンといった余り頻繁に変わらない画像　→　skin下に手動でアップロード
  • バナーや見出し画像など頻繁に差し替わる画像　→　media下にエディタ経由でアップロード 

また、多言語運用などをしていくと、media下も整理が行き届かなくなってくる恐れがあります。
できれば最初から言語別や日付別、用途別にディレクトリを作成しておくことが望ましいでしょう。

なお、前述のとおりmediaディレクトリはMagento2で配置先が変わりますが、skinディレクトリも同様に変更を受けます。
Magento1.xからMagento2へのマイグレーションは商品・顧客・注文履歴データやエクステンションなどだけでなく、CMSページや静的ブロックの中のデータにも影響してきますので、今から少しずつでも良い形にしておくことをおすすめします。