オンラインイメージ最適化ツール
このオンラインイメージ最適化ツールは、画像最適化とファイル圧縮アルゴリズムを組み合わせて、画質を保ったままに、JPEG、GIFやPNGイメージを最小サイズに圧縮する賢いツールです。Optimizillaは、可能な限りの画像圧縮率かつ画質維持を実現。他のサービスやソフトウェアを凌ぐパフォーマンスです。 一度に最大20個までファイルをアップロードできます。アップロードが完了したら、サムネイルをクリックして、各イメージのクオリティ設定をして下さい。イメージ横のサイドバーで圧縮レベルを調節できます。調節後は、イメージを拡大縮小・移動させて画質を確認して下さい。
透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG
透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。
PNG画像をより美しく、より軽量に最適化するPhotoshopの機能拡張 -PNG Hat
Photoshopで作成したものをCSS3に書き出す「CSS Hat」、Subtle Patternsのパターン素材を簡単に利用できる「Subtle Patterns」、各ソーシャルメディアのテンプレートを1クリックで作成できる「Social Kit」などをリリースしているmadeby sourceから、これもまた便利なPhotoshopの機能拡張がリリースされたので紹介します。 PNG Hatは有料の機能拡張で、機能はそのお値段以上の価値がある優れものですよ！ PNG Hat PNG HatはWin/Mac対応、Photoshop CS5以降で利用できます。 PNG Hatの主な特長 PNG Hatの利用シーン PNG Hatのインストール PNG Hatの他のレビュー記事 PNG Hatの主な特長 PNG Hatは、PhotoshopでのPNG, JPEGの書き出しを強力に最適化する機
JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる！
WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
画像圧縮サイト／TinyPNG
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
ie8でもやっぱりpngfix - markup おぼえがき
ふわふわ浮いたpng画像がfadeしたりするようなパララックスを作っていて、なぜかIE7/8上の一部のPNGだけ、おかしな具合に透過が真っ黒になってしまった。 「アルファチャンネル対応したんちゃうんかい」と怒りつつ、バグフィックスの方法はないものかググッた結果。 IE8でもやっぱりpngFixするしかない！ という結論でございました。うぬぬ。 $(function() { if(navigator.userAgent.indexOf("MSIE") != -1) { $('img').each(function() { if($(this).attr('src').indexOf('.png') != -1) { $(this).css({ 'filter': 'progid:D
IE-winで透過PNGを利用する方法 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 サンプルは透過PNG。テキストの上に、透明度36%の矩形を重ねてある。IE6とFirefoxでは見え方が違うことが解るだろうか？ 左がIEで見た場合、右がFirefoxで見た場合。バージョン６までのIEはPNGのアルファチャンネル（半透明）に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。 #overlay { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizi
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.
悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん！ と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity
透過PNGがｊQueryアニメーションでopacityを使うとIE8だけ黒く塗りつぶされて表示されてしまいます。対策として、pngFixを施したりDD_belatedPNGやjQuery.belatedPNGをやってみたのですがだめでした。（IE6と7は対象外なので考えておりませ...
透過PNGがｊQueryアニメーションでopacityを使うとIE8だけ黒く塗りつぶされて表示されてしまいます。 対策として、pngFixを施したりDD_belatedPNGやjQuery.belatedPNGをやってみたのですがだめでした。 （IE6と7は対象外なので考えておりません。） 黒く塗りつぶされてしまうpng画像は、主にテキストをpng画像として保存したものです。 今後のIE対策としてもクリアしておきたいところなので、ご教授して頂ければ幸いです。よろしくお願い致します。
optipng home page
optiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information. This program also converts external formats (BMP, GIF, PNM and TIFF) to optimized PNG, and performs PNG integrity checks and corrections. If you wish to learn how PNG optimization works, or to know about other similar tools, see the PNG Tech article A guide to PNG optimization. DOWNLOAD opti
アニメーションgifならぬアニメーションjpg/png
今日（2011/5/11）のgoogleロゴはダンスのアニメーションになってて、 それがとてもキレイでかっこいいアニメーションだったので、 自分もアニメーション用のjsをちょこっと書いてみた。 「Google」の6文字が踊る――マーサ・グレアムさん生誕記念のホリデーロゴ この人がロゴのアニメーション作ってた人。 ほんと細部までキレイなアニメーション。このアニメーターのモーション技術すっげぇ。。 んで、googleロゴの中身見てみると、gifアニメかと思いきやpngのポジションをずらす方法を取ってて これがネタばらしの一枚絵。 そういえば、一昨日公開された、thaのFRAMED*のページでも使われてたなぁ、これ。と思い、 普通にjs書ける人には一瞬でできるだろうから関係ないけど、 この1枚絵さえ作れれば、誰でもアニメーションgifならぬ、 アニメーションjpgとか、アニメーションpngつくれ
DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする - orangain flavor
はじめに DD_belatedPNGを利用すると、IE6でPNGファイルを透過させることが出来ます。 DD_belatedPNGはITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」で解説されているように、簡単にそして高速に透過PNGを表示できるという特徴があります。 しかし、ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点で解説されていますが、次のような問題点があります。 ここで、img要素に使用する際のいくつかの注意点を。 ただimg要素にpng画像を使うだけなら、上記で何の問題もありません。 しかし、png画像のimg要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。 たとえば、png画像のimg要素を<a>要素で囲んでリンクボタンとして、img要素をロールオーバーさせたい場
【ケータイ】画像のファイルサイズを50%削減するひと手間
こんにちわ。最近ソーシャルアプリやるようになったやしこです ソーシャルゲームはいま一番アツい分野！いろいろなゲームが群雄割拠です。 でも画像が重くてさくさく連打できないとゲームの爽快感が半減してしまいます。悲しいけどこれ携帯なのよね。 なるべくストレスフリーのみんなに優しいデザインをした〜い！ そんなユーザーにもエンジニアにもモテる爆軽画像への研究・発見報告です 基本の基本 画像の重さは１画面合計100k以内 PNGは使えないとおもっておk 画像にwidthとheightを指定しないのは死亡フラグ 元画像が複雑な場合ライブトレースで爆軽に 私が現在担当している英雄になりたい！は魅力的なキャラクターたちが登場する戦争ゲームです 繊細なキャラクターデザインでそれが重厚な世界観を作り出す大事なキーになっています ところがアニメ塗りと違って色数が多すぎて減量に不向きです。どうしても重くなってしまい
だんだん小さくなるドット柄の背景パターンを制作してくれる「Dotted Background Generator」
TOP > WebService > だんだん小さくなるドット柄の背景パターンを制作してくれる「Dotted Background Generator」 WEBデザインの印象を決定付ける大きな一つの要素の一つに背景があります。様々な背景素材やジェネレーターがWEB上で公開されていますが、今日紹介するのはだんだん小さくなるドット柄の背景パターンを制作してくれる背景ジェネレーター「Dotted Background Generator」です。 上記のように上部から下部に向ってだんだんと小さくなっていくような背景を簡単に作る事ができます。 詳しくは以下 使い方は至って簡単でドットのカラーと、背景色、そして高さを指定すればOKです。色はカラースライダーなどは実装されていませんので、指定する必要があります。また選べるカラーはドット、背景ともに2色までとなっています。背景色は2色選んだ場合はA
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEでpngを使った際に起きる不具合を防ぐプラグイン
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌
jmblog.jp - 角丸にチャレンジ - 透過PNG画像＋CSS編