Photoshop×FirefoxでのPNGの変色を回避

この記事は約2分で読めます。
記事内に広告が含まれています

Photoshop Elementsで作ったPNG画像がFirefoxでも変色しないようにする方法
イメージ

こんにちは、さち です。

先日、Photoshop Elements で画像を作成していました。
完成してPNGで保存してサーバにアップロードしFirefoxで表示を確認してみると
どうも白色の発色がおかしい…。

カラーピッカーで色を拾ってみると
「R250 G255 B255 (#faffff)」となっており微妙に赤味が弱くなってしまっています。

今回は、この問題の解決方法を紹介していきたいと思います。

スポンサーリンク

保存方法で色が変わる

テスト  テスト
上の2つの画像の背景の白色は
IE などのブラウザでは全く同じ色で変色はないと思いますが
Firefox では左側の画像(保存→PNG)は変色してしまっていると思います。
(変色した状態をキャプチャしたものがトップにある画像)

Photoshop Elements には
「ファイル」メニューに「保存」と「Web用に保存」という2種類の保存方法があり
このどちらを使うかによって Firefox での発色が変わってきます。

原因はICCプロファイル?

この問題は「ICCプロファイル」によって起こっている気がします。

「保存→PNG」と「保存→PNG-24」では
ICCプロファイルの扱い方に違いがあるようで
これが原因で保存方法によって発色に違いが出るようです。

「カラープロファイルって何?」という方はこちらの記事を見てみて下さい。

白をちゃんとした白で発色させるには

比較
前述の項を読んできた方はすでにお気づきだと思いますが
白色をちゃんと白色として発色させるためには
画像をPNGとして保存する際に「Web用に保存」を選択します。

通常のPNGでの保存は「PNG-24」がそれに当たるので
これを選択して保存しましょう。
操作画面

「保存」から保存する際にも
「ICCプロファイル」という項目があるにはあるのですが
「PNG」を選択するとなぜかグレーアウトしてしまい設定できなくなってしまいます。

2種類の保存方法で画像の色が変化してしまうというのは
ちょっとややこしいですね…。

コメント

"),m.no_overlay||s.append("
");var c=s.find("img:first"),d=s.find("img:last");s.append("
");var l=s.find(".twentytwenty-handle");l.append(""),l.append(""),s.addClass("twentytwenty-container"),c.addClass("twentytwenty-before"),d.addClass("twentytwenty-after");var i=s.find(".twentytwenty-overlay");i.append("
"),i.append("
");var a=function(t){var e,n,i,a,o=(e=t,n=c.width(),i=c.height(),{w:n+"px",h:i+"px",cw:e*n+"px",ch:e*i+"px"});l.css("vertical"===r?"top":"left","vertical"===r?o.ch:o.cw),a=o,"vertical"===r?(c.css("clip","rect(0,"+a.w+","+a.ch+",0)"),d.css("clip","rect("+a.ch+","+a.w+","+a.h+",0)")):(c.css("clip","rect(0,"+a.cw+","+a.h+",0)"),d.css("clip","rect(0,"+a.w+","+a.h+","+a.cw+")")),s.css("height",a.h)},o=function(t,e){var n,i,a;return n="vertical"===r?(e-v)/p:(t-w)/f,i=0,a=1,Math.max(i,Math.min(a,n))};g(window).on("resize.twentytwenty",function(t){a(e)});var w=0,v=0,f=0,p=0,y=function(t){(t.distX>t.distY&&t.distX<-t.distY||t.distX-t.distY)&&"vertical"!==r?t.preventDefault():(t.distXt.distY&&t.distX>-t.distY)&&"vertical"===r&&t.preventDefault(),s.addClass("active"),w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height()},h=function(t){s.hasClass("active")&&(e=o(t.pageX,t.pageY),a(e))},u=function(){s.removeClass("active")},_=m.move_with_handle_only?l:s;_.on("movestart",y),_.on("move",h),_.on("moveend",u),m.move_slider_on_hover&&(s.on("mouseenter",y),s.on("mousemove",h),s.on("mouseleave",u)),l.on("touchmove",function(t){t.preventDefault()}),s.find("img").on("mousedown",function(t){t.preventDefault()}),m.click_to_move&&s.on("click",function(t){w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height(),e=o(t.pageX,t.pageY),a(e)}),g(window).trigger("resize.twentytwenty")})}}(jQuery)
タイトルとURLをコピーしました