クリエイティブ

【検証】PhotoshopでWeb用に保存できない原因と書き出し形式

Web用に保存するエラー画面

Web用に保存できない場合は、Photoshopのサイズ制限を超えている場合を先ず疑ってみる必要があります。

続いて、macOSとPhotoshopのバージョンによる衝突が原因でエラーになるケース。

また、アクションで一気にバッチ自動処理でWeb用に保存しているのに、ファイルが書き出されないといった様々な状況で「できない」となってしまう原因を探ってみます。

画像サイズ(ピクセルサイズ、カンバスサイズ)とファイルサイズは別ですので、混同しないでくださいね。

「Web用に保存(従来)」と「書き出し形式」では、新しい「書き出し形式」の方がファイルサイズをほんの少し小さくできたり、@2xなど拡大に対応、SVG書き出しもできたりします。

Web用に保存する意味

Web用ですので、元画像をファイルサイズを小さく圧縮したり、画像に付随するデータをクリーンな状態にすることで軽量するために行いますよね。

Web用に保存しないと、画像に撮影向きデータが残っており、PCブラウザでは正常な向きなのに、iPhoneなどスマホでみると縦写真が横に傾いている状態を解消できたりします。

解像度を72ppi(pixel/inch)に統一するためにWeb用に保存する場合もありますね。

Web用といっても、そのまま掲載するため以外にも使うことがあるということ。

画像サイズが大きすぎる状態を、そもそもWebで扱うこと自体が好まれません。

商品販売の特にリッチなコンテンツページならまだわかりますが、一般的なWebサイトに使う画像はできるだけ小さくしたいところ。ページ表示速度の向上にもつながります。

スマホページの書き出しやカンプで、すごく縦長の画像を扱う場合もあると思います。

Photoshopには画像サイズによる保存制限が、ぼんやりと存在しています。

今回、検証してどこまでが限界なのかを試してみようと思います。

Adobe Photoshop 2020(バージョン21.1.1)で検証します。余談ですがAdobe Photoshop CC 2019まで、CCがあったのに2020からとれました。

画像サイズが大きすぎる検証

大きすぎる場合は、状況により自動的に画像サイズが縮小される仕組みになっています。

  • 縦を30000px以下にしたら保存できた
  • カンバスサイズを8129px以下にしたらWeb用に保存できた!

などの声があります。

縦横8129pxを超えると縮小されるとなると、30000(3万)pxは、なぜできたのってなります。

3:2写真

Web用に保存

30000×20000 エラー
29000×19333 エラー
28000×18666 Web用に保存できた

書き出し形式

12000×8000 自動縮小された

スマホカンプ

iPhoneに多い幅375px、2倍である750pxで検証。

Web用に保存

750×31000 エラー
750×30000 Web用に保存できた

書き出し形式

750×66000 エラー
750×65000 書き出しできた

比率がわかる画像にするとこのように
Web用に保存と書き出し形式の検証画像

書き出し形式のエラー画面
不明なエラーが発生しました。

結果

スマホカンプでWeb用に保存の場合、確かに30000px以下にすると可能になることがわかりました。

しかし、書き出し形式はこのスマホカンプ用にも調整されているかのように、約65000pxまで対応していることが判明。

ピクセル総数でいうと3:2画像の時「Web用に保存」の方が多いことになりますが、30000pxが限度なので現状は書き出し形式にしましょうということですね。

macOSとPhotoshopのバージョンコンフリクト

macOS 10.15 CatalinaとPhotoshopで、相性の衝突がありWeb用に保存できない現象は、Photoshopバージョン21.xから解消されました。

OSが主であり、アプリケーションが従であることがほとんどです。

OS側がセキュリティを強化するなどして、ソフトウェアが使えなくなる場合があるので、不具合を事前に調査してからOSアップデートを行う必要があります。

8bitに変更

32bitや16bitを、8bitに変更することによってWeb用に保存できる場合があります。

イメージ > モード > 8 bit/チャンネル

から、変更が行なえます。

アクションで一気にWeb用に保存

バッチ処理で自動に書き出す時に、幅を1000pxに統一してWeb用に保存というアクションを組んでも保存されていない原因。

これは単純にWeb用に書き出すフォルダを別フォルダにして、元画像は保存しないで閉じることで可能になります。

アートボードの余白の部分が出てしまう

Web用に保存にすると、Photoshopのアートボード形式で作成している場合はその余白も出てしまって余白をなくす保存ができないと思われる方もいます。

アートボードは、Photoshop CC 2015の時に「書き出し形式…」と同時にリリースされた機能で、Illustratorのように脇にアイテムをおいて置けるのが特徴。

アートボードで作成した場合は、書き出し形式にすることが必須となります。従来のWeb用に保存は全く無視されていて余白がPNGですとそのまま出てしまいます。

PhotoshopでIllustratorのように空いたところに見える形で置いておけるのは非常に便利な機能ですが、アートボードから外れるとアートボードフォルダから出てしまったり、半分以上はみ出す配置だとアートボードから外れたりと、なかなかまだIllustratorを超える便利さとはいかないところがあります。

環境設定をリセット

まれに、環境設定をリセットしたり、レイヤーを統合してPSDを軽くすることでエラーがでなくなることもあるようです。

経験したことはありませんが、マシンに搭載するメモリや仮想ディスクを引き上げることでも、この手のメモリー不足によるエラーは解消できると思います。

まとめ

今回まとめた画像サイズ検証を踏まえて、保存できないエラー原因が見つかりましたでしょうか。

いろんな状況でフォトショWeb用に保存「できない!」となってしまう場合がありましたね。

スライスでWeb用に保存を使っている古いやり方以外は、多彩な方法のある書き出し形式の方が現在は便利と感じています。