今回紹介するのはShopifyに画像や動画をアップロードしようとした際の容量上限についてとその解決方法です。
Shopifyのストア構築をしていると稀に非常にサイズが大きいファイルをストア内で使いたい場面に出会います。それが動画であったり、とても高画質の画像だったりするのですがそのままShopifyのファイル管理からアップロードしようとしたらサイズ超過でエラーが出てしまった。。なんてことになります。
そうなってしまった際に考えられる解決方法を書いていきます!
Shopifyでのファイルサイズの上限
まずShopifyにあげられるファイルのサイズには上限があります。
| ファイルのサイズ | 最大20MB |
| 解像度 | 最大20mega pixel |
この上限を超えてしまうとエラーとなってしまい、Shopifyにファイルをアップロードすることができません。
画像でしたら、ほとんどの場合問題なくアップロードできるのですが動画や重いファイル、画素数の高いカメラで撮影した画像などは引っかかる時があります。
ちなみにShopifyにアップロードできるファイルの種類としては
- GIF
- JPG
- PNG
などの種類をはじめHTMLファイル以外であればどのようなファイルでもアップロード可能になります。(トライアル中の場合は制限あり。)
この中でも今回は画像や動画にフォーカスを当てて解決できる方法を模索してみました!
Shopifyで使用するファイルサイズが上限になった際の解決方法
それではShopifyにファイルをアップロードしようとしたら、サイズ超過でアップロードできなかった!
となった場合にどのような解決策があるのかをみていきます。
具体的な解決方法としては
- 画像を圧縮する
- 画像をリサイズする
- 動画は外部サービス仕様して埋め込む
という方法が考えられます!早速それぞれ見ていきましょう。
画像を圧縮してファイルサイズを減らす
まず最初に行いたいのが画像を圧縮して上限20MBに引っかからないようにすることです!
僕がよく使用しているのが下記の圧縮サービスです。

ここに画像をアップロードして、調整を行うとある程度の画質を保ったまま70%ほどサイズが小さくなったりするので本当におすすめです!
20MB以下になるように画質の調整を行った後に画像を再度ダウンロードする。そして再度Shopifyにアップロードするとエラーが出ないはずです。
画像リサイズして画像のサイズでエラーが起きないように対応する
次に画像の容量を20MBにしたのにまだエラーが出てしまう、、、という人向けです。
その場合容量が20MB以下でも画像サイズが異様に大きいのが原因かも知れません。Shopifyは画像の容量20MBの他に解像度の制限もあるのです。
そんな人は先ほどのサービスSquooshを使用して『Resize』を行ってみてください!Resizeで画像の大きさを調整するとエラーが解決できます。
動画は外部サービス使用して埋め込むことでアップロードをしない
最後に動画で20MBを超過してしまった場合です。というより動画をShopifyにアップロードしようとするとサイズ超過でエラーが起きる場合がほとんどかと思います。
動画ってすごく容量が大きいですからね。。
なのでその時はYouTubeやVimeoなどの動画投稿サービスを使用して動画をYouTubeなどにアップロードしましょう!そしてShopifyサイトに埋め込むという解決方法が一番現実的です。
[Shopify]ストアで使用する画像や動画ファイルサイズ上限とその突破方法 まとめ
以上、Shopifyでファイルアップロードする場合の上限とその解決方法でした!このどれかの方法でエラーを回避できたら嬉しいです。
動画や画像は、最近の高価なカメラで撮るとサイズが結構大きかったりするので割とサイズ超過でエラーになってしまう場面も多くあるかと思います。その時は上手にサイズ調整するか他の代替方法でささっと解決してしまいましょう!
最後までお読みいただき、ありがとうございました!それでは本日も良い1日を!



![[React] React Hooks のはなし。](http://ec-penguin.com/cdn/shop/articles/early-morning-7525151_1920_grande.jpg?v=1667630718)
![[React] ライフサイクルのはなし。](http://ec-penguin.com/cdn/shop/articles/deer-7508187_1280_grande.jpg?v=1667626423)
![[Shopify]ストアに絶対に入れたい!おすすめ『絞り込み検索機能』アプリ](http://ec-penguin.com/cdn/shop/articles/milky-way-6657951_1280_grande.jpg?v=1633862228)
![[Shopify App] PageFlyを使用してノーコードでお洒落なLPを作成する方法](http://ec-penguin.com/cdn/shop/articles/plant-5643271_1280_grande.jpg?v=1605355173)
![[Shopify]個人でECサイト商品撮影するなら必須の背景紙シート【おすすめ3選】](http://ec-penguin.com/cdn/shop/articles/2021-06-15_22.21.38_grande.png?v=1623763402)
![[Shopify]バレンタイン用のLP(ランディングページ)を無料ノーコードで制作する方法](http://ec-penguin.com/cdn/shop/articles/rose-3063283_1280_grande.jpg?v=1631631509)