PNGをWebPへ、透過を保ったまま軽くなるファイル

かさばるPNGを、透過を保ったまま速く読み込まれる引き締まったWebPに置き換えましょう。

またはここに画像をドロップ

PNGをWebPに変換する手順

PNGをWebPに変換する手順

絵をドロップ枠へ放るか、クリックして一つ選びます。ファイルが着いた途端に処理が立ち上がり、押すべきボタンはどこにもなく、ありふれた絵ならまたたく間に片付きます。あとはダウンロードの合図で、元の名前のまま末尾だけ変えたWebPが書き出されます。1 枚なら変換はブラウザ内で動き、何枚か渡せばまとめて当社のサーバーへ上がります。同じ筋道がインストール抜きで携帯にも机上の端末にも応じます。もう一枚なら、続けて次のPNGを落とすだけ。動くPNGを差し出しても残るのは先頭の一コマだけで、ここで生まれるWebPは流れる連なりではなく一枚の止まった絵だからです。

透明なピクセルがWebPへ通り抜ける

透明なピクセルがWebPへ通り抜ける

八ビットぶんのアルファの層がWebPの内に住みつくので、PNGの澄んだ点はどれもWebPで同じだけ澄んだまま降り立ちます。白く塗られるものはなく、切り抜きの周りに輪郭の影も浮かばず、あとから手直しに回す必要もありません。透けを抱えたPNGからの行き先にJPGではなくWebPを推す根拠が、まさにここにあります。JPGはアルファを持たず、澄んだ点を一色で埋めるほかないのです。看板絵、記号、品物の抜き、画面の下絵、丸い角の取り込み画像、透ける土台に乗るものなら何でも、傷ひとつなく渡ります。そのための切り替えなど存在せず、ただ起こります。アルファを背負うことがWebPの成り立ちに織り込まれているからです。

PNGからWebPへ移る理由

PNGからWebPへ移る理由

得られるのはまず、透けも仕上がりも崩さずに大幅に身軽になったファイルです。公式に示された目安に従えば、欠落のないWebPは見合うPNGの四分の三ほどの目方に縮み、透けを抱えた欠落ありのWebPは三分の一前後まで沈みます。身軽な絵はそれだけ早く現れ、検索の順位に響くと知られるCore Web Vitalsの一角、すなわち最大要素の描画時間に効いてきます。PageSpeed Insightsは次の世代の形式を促すくだりで古いPNGをわざわざ取り上げ、移し替えれば指摘は消えます。読み手の側でも案ずるには及びません。主だった四つの閲覧ソフトはいずれも追加の支度なくWebPを表示できるからです。

品質設定と非可逆の取り引き

品質設定と非可逆の取り引き

AralumaはWebPを、写真にも図版にも釣り合うよう調えた無劣化すれすれの設定で記します。だからふだん眺める大きさでは元のPNGとそっくりです。この線で踏みとどまるWebPは理屈のうえで非可逆で、完璧な可逆の写しに比べわずかな細やかさを譲っています。看板絵、記号、画面の部品、写真といったほとんどのウェブ仕事では、その差は目に入りません。一点ごとの正確さが問われる場面、たとえば医療の撮像や保存用の原盤では、PNGを抱えWebPは書き出し役に回してください。写真ならおおむね五割から七割の目減りが望め、WebPがPNGに対して元から持つ仕組み上の利が、その上にさらに重なります。

PNG が実際に変換される場所

PNG が実際に変換される場所

これは渡す枚数で分かれます。1 枚の PNG を変換すると作業の全部がタブ内で、ブラウザ自身の画像エンジンで、あなたの端末上で起こり、何も上がらず、ファイルについて何も書き留められません。自分で確かめてください、DevTools を開き、その 1 枚を変換する間ネットワークパネルを開いたままにして、それを運ぶ送信リクエストがゼロであることを数えます。ひとつかみをまとめて変換すると当社のサーバーへ上がり、全部を巡って 1 つのダウンロードを返します。そのダウンロードは約 2 時間で当社のサーバーから片づけられ、保存した瞬間に自分で消せます。こうして 1 枚はブラウザを決して出ず、まとめての処理はあなたが持ち帰る物を組み立てるのに要る間だけ当社のサーバーに留まります。

元のPNGが今も正しい場面

元のPNGが今も正しい場面

WebPは方々へ届きますが、すべての扉が開くわけではありません。ひと握りの製作ソフト、印刷の流れ、社内の文書の仕組みは、なお今もPNGを欲しがります。一部のOSはPNGの放り込みを難なく受け取りますが、WebPには差し込みの部品をねだります。机上のソフトで何度も開いて手を入れる下書きには、可逆のPNGを原盤に据えることで、ほどいては組み直す巡りの目減りの積み重ねを避けられます。WebPはウェブ向けの書き出しに任せ、PNGは元手のまま置いておきましょう。そして逆走してWebPをPNGに戻したくなったら、webp-to-pngの道具がその往復を肩代わりします。

使い方

  1. PNGを渡す

    PNG をページへ滑り込ませるか、ピッカーで探します。透けた部分も一緒に来ます。1 枚変換すればあなたのマシンに留まり、複数枚を落とせば当社のサーバーへ上がってまとめて扱われます。

  2. くつろぐ

    あなたはそれ以上何もしません。普通の画像は指を持ち上げるくらいの速さでWebPになり、変換の段も、道中で回るスピナーもありません。

  3. 縮むのを見る

    結果はどれくらいの大きさで出たかを伝えます。澄んだところは澄んだまま残り、WebPは始めたPNGより目に見えて軽いはずです。

  4. WebPを手元に

    ダウンロードを一押しで書き出し、古い名前、新しい.webpの末尾。並んでいるものがもっと?それぞれをページに放れば、一つずつ通り抜けます。

よくあるご質問

PNGからWebPへ変換すると透過は保たれますか?

守られます。完全なアルファの層をWebPが構えているので、PNGの澄んだ切れ端はWebPになっても澄んだまま居続けます。透けたPNGから踏み出すたびに行き先としてWebPがJPGを上回る訳が、その一事に尽きます。JPGはアルファを欠き澄んだ点を一色で塗るほかありませんが、WebPは見つけた姿のまま抜きを置きます。透ける土台に乗った看板絵、記号、品物の写し、画面の部品、それらが余計な手間も求めずまるごと渡ります。

なぜPNGをWebPに変換するのですか?

透けも見栄えもどちらも保つ、引き締まったファイルのためです。Googleの目安では、可逆の側が同じPNGよりおよそ二割六分軽く動き、アルファ込みの非可逆の側は三分の一近くへ落ち着きます。引き締まった絵は早く届き、それがGoogleが順位に重みを置くCore Web Vitalsの尺度Largest Contentful Paintを後押しします。PageSpeed Insightsは絵の点検の中で、新世代の形式の好機としてPNGを指し示しさえします。加えて、ChromeやFirefoxからSafari、Edgeまで、名の通ったブラウザはどれも手助け抜きでWebPを読み取ります。

PNGからWebPへの変換で品質は落ちますか?

Aralumaが用いる無劣化すれすれの設定なら、写真も図版もふだん眺める大きさで元のPNGとそっくりです。ここに踏みとどまるWebPは理屈のうえで非可逆なので、ほんのひとつまみの細やかさが、より小ぶりなファイルへ向かいます。看板絵、記号、写真といった日々のウェブ用途では、その差は目に入りません。一点ごとの正確さや保存の仕事には、PNGを抱えWebPを配り役の写しとして扱ってください。変換はあなたのPNGに指一本触れず、もとのまま端末に腰を据えています。

WebPはPNGよりどれくらい小さいのですか?

示された目安によれば、欠落のないWebPは同等のPNGの四分の三あたりの目方にとどまり、透けを伴う欠落ありのWebPはおよそ三分の一まで沈みます。実際の比は描かれている中身しだいで揺れ、広い空白と一色のかたまりを抱えた図ほど大きく得をし、隅々まで描き込まれた写真は控えめながらも値打ちのある削りに落ち着きます。どちらに転んでもWebPの方が軽く、透けはそのまま生き残ります。

ここでPNGをWebPに変換するのは安全ですか?

1 枚を変換するか複数枚を変換するかによります。1 枚の PNG はブラウザの中で直接組み直されるので、そのファイルは送られず、DevTools を開いて変換の途中でネットワークパネルを見れば、送信される画像リクエストが出ないことで確かめられます。複数枚をまとめて変換すると当社のサーバーへ上がってまとめて扱われ、そのダウンロードは約 2 時間で片づけられ、保存したらすぐ自分で取り除けます。どちらにしても、あなたのダウンロードを組み立てる以上に画像が残ることはありません。

WebPはすべてのブラウザで動きますか?

実のところ、行き渡っています。Safari 14が2020年に登場してChrome、Edge、Firefoxに連なると、生のままの読み取りはどこにでも届きました。それらを束ねれば人が現に手にするほぼすべてのブラウザになります。例外は本当に年季の入ったものと、組み込みの一部の表示器で、それらを抱えうる相手には、PNGが用心深い選びのまま残ります。ここ五年のブラウザにいる人なら、誰でも引っかかりなくWebPを得ます。個々の事情を確かめたければ、caniuse.comのWebPの欄が後ろ盾の様子を広げてくれます。

詳細

良い円形クロップの背後にある技、フォーマット、小さな決定についてのチームからのメモ。

WebPがPNGより小さくなる仕組み
WebPは二つの別個の働き方で巡ります。可逆の働きは、場所と色の見当を、PNGのDEFLATEに勝るエントロピーの段に組み合わせ、Googleが示した目安で並の絵におよそ二割六分ましな締め込みへ落ち着きます。非可逆の働きは、動画の現場から区画ごとの変換を取り入れ、目がやっと気づく程度の細部を捨てつつ、見えるものは抱える造りです。絵がアルファを背負うとき、WebPはそのアルファを別の道で可逆に締め、RGBの中身は非可逆に扱います。だから透けを伴う非可逆のWebPは、見栄えが同じでもPNGの三分の一近くに仕上がれます。PNGのDEFLATEは可逆しか知らず、非可逆の道が結ぶ知覚上の取り引きには手が届きません。その造りの裂け目こそ、大きさの差の元です。
アルファチャンネルを詳しく
どちらの形式も画素ごとに八ビットぶんの透き通り具合を背負い、まるきり澄んだ底からびっしり詰まった天井までの濃さを書き留められます。端末の絵を扱う仕掛けが古い形式を新しい形式へ組み替えるとき、画素ごとの赤緑青と透き通りの値を読み取り、その透き通りをRGBの扱いに左右されぬまま締めの段へ直に流し込み、欠けなく抱え込みます。こうして底に届いた澄んだ画素も、その狭間のどこかの半端な画素も、天井に届いた詰まった画素も、それぞれ新しい絵で寸分たがわぬ居場所を占めます。ゆるやかに落ちた陰や、澄んだ下地の上に角をならした文字をまとった図柄では、その儚げな縁の柔らかさが一筋も失わずに移ります。古い写真の形式にはこの芸当が叶いません。容れ物に透き通りの欄を設けず、何かを書く前に絵を下地の色合いへ押し合わせねばならないからです。
Core Web Vitalsと画像形式の選択
最大要素の描画時間という指標は、画面の枠内に最も目立つ部位が現れ切るまでの間合いを測ります。読み物の多くではその部位が冒頭の大きな絵にあたり、検索側はこの数字を上位表示の手掛かりの束へ取り込みます。古いPNGはひとえに目方の重さからこの指標を落としがちで、四千画素級の写真なら何メガにも膨れる一方、ほぼ欠落のないWebPに置き換えた同じ絵は桁違いに薄くなります。診断ツールは次世代の形式の助言の中でこの点を名指しし、退場させるべき相手としてPNGを挙げます。最初に目に入る道筋へ居座るPNGを身軽な形式へ差し替える一手は、計測される速さを底上げするうえで群を抜く効き目を持ちます。普及の歩みも安心材料で、主要四ブラウザは2011年から2020年にかけて順々にこの形式を取り込み、後発のものも土台の刷新を機に追随しました。
非可逆の出力とほぼ無劣化の設定
WebPは0から100までの出来栄えのつまみを差し出し、数が高いほど細部を多く抱え、その分だけバイトを費やします。Aralumaはそのつまみを、写真、画面の図版、記号という見慣れたウェブの区分をまたいで、忠実さと大きさの折り合いを取るために選んだ無劣化すれすれの一点で留めます。この一点で書き出しは、ふつうの画面までの隔たりでは元のPNGと見分けがつきません。厳密には真に可逆な記しに比べビットの細やかさがいくらか滑るので、ほどいたWebPと元のPNGをバイトずつ照らせば小さな数の隙が浮かびますが、写真の素材ではどれも人の見える境目の下に座ります。医療の撮像、衛星の絵、可逆が動かぬ掟となる保存の場では、PNGを抱えWebPを下書きの写しではなく、ひとえに配りの書き出しとして扱うのが正しい一手です。
メタデータの振る舞い
PNGをWebPへひっくり返すと、書き出しからEXIF、IPTC、XMPの欄が掃き出され、これは三つの大きなブラウザの心臓のどれもが行います。色の覚え書きは、それらが道を分ける場所です。ChromeとSafariはsRGBの札をWebPに乗せたまま抱え、Firefoxは何もかも、ICCの覚え書きまで片づけます。だから組み直されたWebPはどこでもsRGBとして安んじて読まれますが、元のPNGに座る広い色域の札、Display-P3、Adobe RGB、ProPhoto RGBは、Firefoxを越えては長らえません。その隙は色が要のプロの現場で噛みつくので、本物の色の忠実さが連れ立つべきときは、ICCの中身を狙って記す変換の道具を選ぶか、その用に拵えた覚え書きの編集役であとから札を押し直してください。
PNGを残すときとWebPで足りるとき
見極めは手早く済みます。絵がいずれウェブのページやアプリへ向かい、見る側が2020年から先のどのブラウザかなら、WebPが正しい書き出しです。Figma、Sketch、Affinity Designerといった製作ソフトの内で開く要があるなら、まずあなたの正味の版でWebPの後ろ盾を確かめてください。まちまちだからです。印刷へ向かうなら、ほとんどの印刷RIPがWebPを素通りするのでPNGかTIFFに寄りかかってください。メールで出ていくなら、メールの道具が今どきの形式にどれほど気まぐれかを思えばPNGが堅い賭けです。そして幾度も手を入れて記し直す下書きなら、PNGを原盤に抱えましょう。無劣化すれすれの出来栄えのWebPは申し分のない配りの形式で、PNGは保管と手直しにはより良い一本のまま残ります。整った流れはPNGを元手に抱え、ウェブへはWebPを送り出します。