WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

  • twitter WIING WebServiceCloud
  • Instagram WIING WebServiceCloud
  • facebook WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME 〉Photoshop 〉透過できないPNGファイルの編集方法と解決策

2022.07.07 Thu

透過できないPNGファイルの編集方法と解決策

Web制作

透過できないPNGファイルの編集方法と解決策のイメージ画像

ダウンロードしたPNG画像がおかしい

Webデザインのご依頼を頂く場合にご提供いただけるロゴマーク画像などのタイプ種別は、パスデータ(伸縮しても画像劣化しない)から小さい透過なしのロゴ画像まで、実にさまざまです。

先日、リニューアルデザインをご依頼いただいた対象サイトのロゴマークを既存のサイトからダウンロードしました。
PNG画像形式でしたが、元データをもらう連絡をした場合、返答まで数日かかる場合があり着手が送れる可能性もあるため、暫定で既存サイトのロゴをそのまま使用させていただくことが多いためです。

ところが既存サイトからダウンロードしたPNG画像をPhotoshop内に配置したところ、ジャギー(ギザギザ)が多く発生していました。

透過PNG画像なのでコピーペーストですと背景色情報がべた塗りされてしまうため、ブラウザで画像単体でプレビューして確認し、あらためてダウンロードしたので問題ないと考えていたのですが、ピクチャビューアで表示しても綺麗に透過状態だったので、Photoshopに配置した特定条件でのみ、画像が劣化してそのまま使用できない状態でした。

以前にも、このようなPNG画像があった気がしたのですが、そのときどのように対処したのか記憶がなかったため、今回は綺麗に透過されないPNG画像の特徴と対処方法、原因などについて学習してみます。


調査と解析

既存サイトに表示されているPNG画像は、綺麗に透過されて画像単体で表示させても透過領域(PNG24の場合は厳密には透過ではない)も認識されています。

ダウンロードした場合には、透過情報も正常に認識されてPhotoshopなどの編集ソフトで開いた場合でも、通常は同じ状態で表示されます。

今回の場合は、ダウンロードしたPNGファイルのロゴマークをPhotoshopで開いた時だけ、ジャギーが発生して、そのまま使用できる状態ではありませんでした。

  • ピクチャービューアなどで表示しても綺麗に透過しています

ただ、Photoshopで開いたときにジャギーが発生した部分は、よく確認してみるとドロップシャドウで半透明の領域であることがわかりました。PNG8で透過画像を書き出した場合と同じと想像してもらえるとわかりやすいでしょう。

事実関係の整理
  • ブラウザ、ピクチャービュアーでは正常に表示される
  • Photoshopではジャギーが発生する

以上のことから、このPNGファイルが通常の出力ではなく、何かしらのデータ編集情報の過不足があることが予測されます。

画像ファイルの状態を把握できたので、対処方法としてはPhotoshopでも綺麗に配置できるロゴマークのPNGファイル形式に修正すればよいのですが、当社では常に複数の解決方法を準備できるように心掛けています。この段階では2つの解決方法の選択がありました。

クライアントにWebデザインを確認いただくうえで、この粗い画像では心象も良くないことが予想されるので、多少日数がかかることがあってもオリジナルのロゴデータを提供してもらうことにします。

ロゴ部分のみであれば仮当てのままにして全体デザイン制作を進めることができるので、正式なデータを受け取った段階で反映することにしました。

複数の解決策を準備しておくと比較的問題は顕在化しない

データがないという事実

ロゴマークの元データを提供いただけるようにクライアントに連絡します。
この場合、ほかの質問事項があればあわせて質問するようにし、なるべく往復回数を少なくすることでクライアントの負担を軽減し制作進捗の効率化を図ります。

ところが、クライアントに確認をしたところ元のロゴデータは手元になく、制作元とも連絡がつかないということでした。

Webサイトのリニューアルなどにおいては、わりと多いのが元の編集用データがない、または所在がわからない、元の制作事業者と何らかの理由によって連絡がつかないなどの事例があります。

Web事業者の中には、編集手数料を目的としている場合があるため、元の編集データは成果物に含めなかったり、別途買取を請求するような契約をしている場合がありますが、いずれにしても、ある程度の割合で元データの入手は不可能であることが判明しました。

当社の場合は、最終納品時に成果物データ一式を納品しているので、できるだけクライアントが運用管理や修正時に困らないように配慮させていただいておりますが、事業運営上さまざまな営業スタイルがありますので、あくまでも成果物や納品データ形式の正当性や優劣を意図するものではございませんので、誤解のないようにご理解ください。

  • とにかく、元データはない

現状だと、2つの解決方法のうち1つを断念しなければならなくなりました。
もう一つの方法は、あまり推奨できる方法ではないため、再度、解決方法を模索することになりました。

元データがなくてもなんとかなると楽観的

比較的新しく作成されたデータ

クライアントから元データの入手が不可能となりましたので、再度、既存サイトからダウンロードしたPNGファイルを検証します。

状況として明白なので、以下の条件に合致する方法であれば解決可能です。

  • Photoshopでも綺麗な状態で透過PNGを表示させる

経験上、あまりこの手のPNG画像に遭遇する機会がすくなかったため、あまり深堀する必要がない事案と考えていましたが、今回はあらためて対処策を確立しておく必要があると感じました。

通常Web系の技術やバグ対策などは、1度切りで一生涯触れない内容もあるため、かなりイレギュラーな内容は回避しないほうが賢明な場合があります。
また、最新技術などのニーズは1~2年程度で喪失してしまう技術形態もあるため、最新の技術ばかり採用すると、だれも閲覧できないWebコンテンツを制作してしまう場合があるので注意が必要です。

  • 車も技術も3年落ちぐらいが最適

さて、再度既存サイトのロゴデータについて気になる点があったので、いつ頃制作されたデータであるかを調査しました。

調べたところ2年ほど前の新しいデータであることがわかりましたが、使いなれた編集ツールは5年以上使用されている方もいるので、編集アプリケーションによっては正常に開くことができる可能性を検証します。

  • そうです、PNGファイルといえばFireworks

幸いなことにFireworksはCDメディア形式で保有しているので、Fireworksで開いてみることにします。

別のアプリケーションで開くことで解決することがある

結果的に発売停止アプリケーションで編集

Adobe Fireworksは旧マクロメディア社により開発されたグラフィック制作編集ソフトです。
編集データの保存形式はPNG形式で保存可能で、Web向けには編集データを省いた画像情報のみのPNGファイルやJPEG、Gifファイル形式などで書き出すことが可能です。

後年Adobe社にマクロメディア社が買収されたため、一連のマクロメディアソフトはAdobe社に統合され、Fireworksは2013年のCS6で開発が終了しているソフトです。

アプリケーション自体はとても優れていたのですが、Adobe社に元々あるPhotoshopというグラフィックソフトとの競合面から、現在は開発も発売もされていないため、入手することは困難なアプリケーションです。

  • PNG形式の場合でデータがPhotoshopで正常に開けない場合はFireworksで一度開いてみる

というのは、以前はわりとやってきた記憶がありましたので、今回のロゴデータのPNGファイルを開いてみます。

結論からいえば、Fireworksでは綺麗に表示することができました。
ただ、編集データが付属していなかったので、PNG32形式で透過情報を付加して書き出すことで、Photoshopでも綺麗に配置できる透過PNGファイルを入手することができました。

Photoshopでは通常透過ファイルはPNG24で出力するのですが、PNG24はJPEG相当の色出力が可能なだけで、疑似的に透過領域を創り出している形式になり、Fireworksの場合はPNG32形式でないと、背景マットが付属して透過されません。

ファイルサイズはなぜか元ファイルよりもやや大きくなりました。

とりあえず問題は解決したのですが、Fireworksでの編集ファイルではないようだったので、やっぱり気になってしまいました。

たまに古いアプリケーションが役立つときがあります

原因解明と予測

さて、問題は解決したのですがPNGファイルに編集データが含まれていなかったことが気になります。

さらに元々のデータサイズが軽量であったので、Fireworksで書き出したのであれば、元データよりも軽量になるはずですが、元データよりも多少サイズアップしていた点が気になりました。

推測と考察
  • ブラウザやピクチャービューアでは綺麗に表示
  • Photoshopではジャギーが発生
  • Fireworksでは綺麗に表示されPNG32の書き出しが可能

以上の分析結果から、どうもPNGファイル自体が軽量化加工がされているのではないかと予測しました。

実は透過PNGファイルをさらに軽量化するオンラインサイトなども存在するため、ドロップシャドウ部の情報をブラウザ表示には問題なく削除できるような仕組みがあるのではないかと推測しました。

またも結論から言えばこの推測はおおよそ当たっていたようで、PNG32の透過情報を維持したPNG画像をオンライン軽量化出力をしたところ、また同じPhotoshopのみで綺麗に表示できないPNGファイルに変更されていました。

今回のロゴファイルが必ずしも軽量化加工されたとは断定できない点がありますが、付属するデータが削除された形式で出力されていたことのひとつの原因解明となりました。

PNG画像がもともとPNG8(ギザギザが残っている)形式であればすぐにわかるのですが、今回のようなケースだと、ほとんど発生しない事案のため、解決方法や原因解明に少し手間取ってしまいました。

ただ、今回ケーススタディとして記録記事として作成しましたので、今後透過PNGデータで問題がある場合は、解決方法のひとつの選択肢として参考にできる事例となりました。

困ったときに学習できることはとても多い
  • 3つ上行くWebクリエイトSITEs(サイツ)

    顧客満足度の高いHighデザインとSEO最適化軽量HTMLマークアップからドメインサーバー一式セット

WIING MEDIA twitter

WIING MEDIA facebook

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。