透過PNGをSVG+JPGに変換するスクリプト
witten by DEFGHI1977@xboxlive 変換前(透過PNG画像) ファイル: サイズ:Byte 変換後(SVG+JPG画像) JPG品質:% サイズ:Byte(%) これは何？ 本スクリプトは，透過PNG画像を同等のSVG画像に変換するものです．元画像をより軽快なJPG画像としつつ，透過部を定義できることことから昨今注目を集めているテクニックです．本スクリプトでは元画像をトリミングしている他，マスク画像を8階調(3bit)のPNG画像としているので，透過部の形状を維持しつつファイルサイズを大幅に縮小することに成功しています． ※似たスクリプトとしてはZorroSVGがありますが，こちらではfilter要素を使っていて見た目上は，似たようなものです．が，マスク画像がJPG形式なので，品質を落とすにつれ境界部のノイズが目立ちやすくなります．この点を改良したものがこのスクリプ
JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる！
WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
PNG vs SVG for sprites
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
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 フォーマッ
2万個以上のPNG形式画像のアイコンを見つけることができる「PNG Factory」
フォルダアイコンやAppleアイコンなどスタンダードなものから、NARUTO、スーパーマリオシリーズ、サウスパークまで、あらゆる種類のアイコン2万個以上の中から好みのPNGアイコンを選択してダウンロードできるのが「PNG Factory」。アイコンセットの種類や作者・カラーなど、検索条件も変えることができ、商用利用可能なアイコンだけを探しだすことも可能です。 PNG Factory - You want cool icons ? We have some ! http://www.pngfactory.net/ アクセスした時はフランス語で表示されているので、トップペー左上の「en」から英語表示に変えます。 トップページの下部には「BROWSE」「SEARCH」「SHERE」という3つのボタンが表示されています。まずはBROWSEをクリック。 すると、アップロードされた順にアイコンがずらっ
tips - GIMPでJPEGの蚊を退治して"PNG"化する : 404 Blog Not Found
2012年09月05日03:00 カテゴリTips tips - GIMPでJPEGの蚊を退治して"PNG"化する このためだけにGIMPをインストールしておく価値あり。 可逆対非可逆 我々がふんだんに画像や音楽や動画をネットでやりとりできるのは、非可逆圧縮(Lossy compression)のおかげ。これがなかったらとうの昔にネットはパンクしています。静止画や音声はとにかく、動画ともなれば無圧縮ではネットどころかハードディスクすらついていけないほど。 うぶんちゅ! 瀬尾浩史 たとえば以下の画像。片方が可逆圧縮(Lossless compression)のPNG、そしてもう片方が非可逆圧縮のJPEGで圧縮してありますが、どっちがどっちだかおわかりいただけますか?画像をクリックした先に1246x1635ピクセルの元画像があるのでそちらも確認してみてください。 ぱっと見た目にはまるで同じ画像
PNG画像のファイルサイズが1/3に！PNG画像を超軽量化する「ImageAlpha」｜男子ハック
仕組みをよく理解できていないのですが、ImageAplphaは色数を減らしてファイルサイズを軽量化してくれるアプリのようです。 詳しい人がちゃんと解説してくれると嬉しいです。無知でごめんなさい。 さらには透過PNGの透過も維持したままにできるそうなので、これは是非試さないと損。 参考：透過を保ちつつpngを高圧縮するMacの無料アプリImageAlpha。素でIE6対応 以下のキャプチャ画像をサンプルに試してみました 上の画像をサンプルにファイルサイズの軽量化をImageAlphaで試してみました。 最初の状態でファイルサイズは579KBです。 PNGファイルをアプリケーションにドラッグ＆ドロップします。 画面下部にImage sizeとしてどのくらい軽量になったかが表示されます。 保存しようとすると以下のような画面が開きます。 注目すべきは「ImageOptim」にそのまま送ることもでき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNGイメージの品質を損なわずにファイルサイズのみ削減する「PNGGauntlet」NOT SUPPORTED