透過PNGをSVG+JPGに変換するスクリプト
witten by DEFGHI1977@xboxlive 変換前(透過PNG画像) ファイル: サイズ:Byte 変換後(SVG+JPG画像) JPG品質:% サイズ:Byte(%) これは何？ 本スクリプトは，透過PNG画像を同等のSVG画像に変換するものです．元画像をより軽快なJPG画像としつつ，透過部を定義できることことから昨今注目を集めているテクニックです．本スクリプトでは元画像をトリミングしている他，マスク画像を8階調(3bit)のPNG画像としているので，透過部の形状を維持しつつファイルサイズを大幅に縮小することに成功しています． ※似たスクリプトとしてはZorroSVGがありますが，こちらではfilter要素を使っていて見た目上は，似たようなものです．が，マスク画像がJPG形式なので，品質を落とすにつれ境界部のノイズが目立ちやすくなります．この点を改良したものがこのスクリプ
ZorroSVG - Put a Mask on it
The small print ZorroSVG has some minor pitfalls you should be a aware of: It only runs on browsers that support SVG 1.1 - which all the latest browsers do. Right now there are some subtle brightness differences in semi-transparent areas (maybe you can spot them in the example image's soft shadow). They might be gamma or color-profile related and I am still trying to improve on this. Some (older)
pngquant — lossy PNG compressor
pngquant is a command-line utility and a library for lossy compression of PNG images. The conversion reduces file sizes significantly (often as much as 70%) and preserves full alpha transparency. Generated images are compatible with all web browsers and operating systems. Features High-quality palette generation using a combination of vector quantization algorithms. Unique adaptive dithering algor
インターレースPNG
PNGファイルを書き出す時にインターレースPNGにすると、ファイルサイズ増えるけど、表示の体感は速くなる。また、ウェブページにおいては最初に画像の大きさ分だけ確保されるので、リフロー(レイアウト)を抑止できる。レスポンシブ・イメージとまでは言えないけど、多少はみんなに公平に優しい気がするので、ファイルサイズをケチらずに、すべてインターレースPNGにしてしまうのが良い気がする。デメリットも特に知らない。 新たなPNGファイルならば書き出し時にインターレースPNGにすれば良いけど、既存のものを手作業で修正しようとなると面倒くさい。optipngにインターレースPNGに変換するオプションがあるので、それを使って処理すると良い。 $ optipng -i 1 -strip all *.png ついでに消し忘れているかもしれないメタデータの削除も行うと、ファイルサイズが節約できて幸せ。メタデータの削
php-ext-zopfliでPNG画像を再圧縮 - pixiv engineering blog
MacBook Proを買ったのはいいもののそろそろLinuxに戻りたくなってきたbokkoです。 今回は先月末にGoogleから発表・公開されたばかりのzopfliの紹介と、 そのPHP拡張であるphp-ext-zopfliにPNG画像を再圧縮する関数を追加した時の話をします。 zopfli zopfliはzlibと比べて3〜8%ほど圧縮率が高く、 それでいてgzipやzlib等で広く使われているdeflateアルゴリズムと互換性のある圧縮アルゴリズムです。Google CodeでCによる実装が公開されています。 繰り返しになりますが、単にdeflateアルゴリズムよりも圧縮率が高いだけでなく、 deflateアルゴリズムと互換性がある、つまりzopfliで圧縮したものは従来のgzipやzlibで展開できるというのがミソです。 zopfliによるPNG画像の再圧縮 PNG画像はデータ部分
ファイルサイズを考慮した Canvas の保存 : document
12月18 ファイルサイズを考慮した Canvas の保存 こんにちは、18 日以降の Graphical Web Advent Calendar が空いているので、場をつなぐ意味も込めて簡単な記事を投稿させていただきます。 先日の記事では PNG の仕様について書きましたが、その知識をさっそく生かす事ができます。 また、この記事では HTMLCanvasElement を省略して Canvas と表記させていただきます。 Canvas#toDataURL() さて、一般的に Canvas の描画状況を保存しようと思うと、Canvas#toDataURL メソッドを使用すると思います。 ですが、このメソッドで保存された画像がどのようになっているかご存知の方はあまりいないと思います。 まずは、以下のコードで簡単な Canvas 描画を行ってみます。 function draw1(target
PNG 画像の解析と最適化ツール : document
12月16 PNG 画像の解析と最適化ツール はじめに この記事は Graphical Web Advent Calendar の 16 日目の記事として書かれました。 Graphical Web ということで、PNG フォーマットの簡単な説明と Web ブラウザ上で動作する PNG 解析ツールを作ったので使い方と解析結果の見方について書いていこうと思います。 また、人気のある PNG 画像最適化ツールがどのような最適化を行っているのか調べていきます。 PNG の仕様に入る前に ここから、PNG の仕様について最低限の説明を書いていきます。 PNG の最適化や検証するときに必要になるので、退屈かもしれませんが軽く目を通してください。 以下の項目について、なんとなく分かれば良いです。 シグネチャ 必須チャンクの役割 IHDR PLTE IDAT IEND PNG 仕様概要 PNG フォーマッ
PNG軽量化の減色と圧縮について | GREE Engineering
このテーブルの番号は 1 Byte になっているため、0-255 の 256 個しか登録できません。そのため、画像で使用されている色が 256 個より多い場合は、なんとかして 256 個にしなくてはいけません。 この「なんとかして 256 色にする」というのが減色処理で、なるべく元の画像からの変化を分からないようにしながら色を減らしていくためのアルゴリズム実装です。（この記事では減色アルゴリズムについての説明は省略します。） テーブルを作成したら、画像のそれぞれのピクセルを RGB 形式からテーブルの何番目の色を使うかに置き換えます。 上図のように、1 ピクセルあたり 24bit 必要だった画像が 1 ピクセルあたり 8bit になったので、データサイズは大体 1/3 になります。 （パレットのデータに最大 3 Byte * 256 = 768 Byte 必要とか、同じように圧縮されないと
OptiPNGにメタデータ削除機能が付いた
OptiPNGが0.7にバージョンアップして、待望のメタデータを削除する機能がついた。これでpngcrushいらなくなるかも。0.7では他にlibpngの脆弱性についての対応もなされているので、使用している人は更新するべき。 オプション名は-stripで、それに続けて削除したいチャンク名を指定する……ということになっているが、今のところはallというキーワードでの全削除しかできないようで、これとこれだけ削除とかはできない。 $ optipng -strip all test.png ざっと試した所、pHYs (アスペクト比やDPI)やiCCP(カラープロフィール)、cHRM(ホワイトバランス)あたりは削除されたので、オプションから想像できる通り必須チャンクとtRNS以外を削除するんじゃないかと思う。つまりpngcrushで言うところの-rem allb相当な感じなので、これをメインに使って
Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ニュースのデザイナーの黒田・由衛です。 Yahoo!ニュースが2009年4月27日にリニューアルしました。今回のリニューアルでは、お客様に快適にサイトを利用していただけるよう最速でページを表示させることに重点をおきました。 お客様がウェブを閲覧するのは1日の中のほんの限られた時間です。その貴重な時間を割いてYahoo!ニュースに来ていただくわけですから、1ページでも多くの記事を「読みやすく」「ストレスなく」見ていただけるようにするのが、Yahoo!ニュースがお客様にできる最高のおもてなしだと考えています。そこで、今回のリニューアルでは、サイトデザイン側からのアプローチとして以下の2点の施策を行いました。 １
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
