Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
pngに関するtytoのブックマーク (13)
-
tyto 2014/05/28
-
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
-
画質を下げずに画像のファイルサイズを圧縮できる「PNG Minimizer」
サイト訪問者のストレスを軽減するために、サイトの表示速度はなるべく速くしたいものです。しかし昨今、メディアのジャンルあるいは記事の内容によっては、画像や動画などのリッチコンテンツがないと、ある場合と比較して直帰率の増加、滞在時間の減少などを招く傾向にあります。（当ブログ調べ） このジレンマを解決するには、画像のファイルサイズを圧縮して、ページ読み込みの負荷を減らしてあげる必要があります。この手のサービスにはYahoo! Smush.it™やCaesiumといったのようなものもありますが、今回は画質を保つだけではなく、画質をどれくらい落とすか調整しながらファイルサイズを圧縮できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 画質を落とさずにファイルサイズを圧縮 「PNG
-
-
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
-
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要素をロールオーバーさせたい場
-
-
-
AKIBE - 最近のクロスブラウザコーディング
Webページをコーディングする際に、昔から一番コストがかかる作業が各ブラウザへの対応です。 昔からWeb制作をしてきた人は、クロスブラウザ 、主にIEへの対応で苦労しないデザインとかタグの組み方のノウハウが蓄積していると思います。 IE6を基準に、無理なデザインはしない 透過PNGは使わない 各OS標準・共通の書体以外は全部画像にする ブラウザごとにCSSを細かく分ける 最新のCSSハックを研究・勉強する IEで使えないCSSセレクタは無いものとする つい最近まで、こんなセオリーがまかりとおっていました。 しかし今は、Javascriptのライブラリを使う方法が主流になりつつあります。シェア的にももう問題ないですし、何より簡単です。 IE9.js http://code.google.com/p/ie7-js/ IE5.x〜のIEをHTML5、CSS3に対応させ、さらにいくつかのバグも除
-
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定します。リピートにも対応。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 合わせて読みたい：DD_be
-
[CSS]IE6にも対応したテキストリンクをPNG画像に置換するスタイルシート
PNG image replacement in links demo IE6への対応に加え、下記の配慮もされたものとなっています。 画像オフの場合は、リンクはテキストで表示。 CSSオフの場合は、リンクはリストで表示。 画像オフでCSSオフの場合は、リンクはリストで表示。 HTMLは下記のように各ラベルに透過gifが配置されています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="backing"> <ul id="imgReplacement"> <li class="home"><a href="#url1"><img src="ir/trans.gif" width="0" height="0" alt="" />HOME</a></li> <li class="products"><a href="
-
jquery.pngFix.js - PNG 透過ライブラリ Windows IE 5.5 & 6 (IE PNG Fix)
jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6. Features unobtrusive script, simple to setup works now also with CSS-Backgrounds (but scaling backgrounds) works with PNG-Images within Links TITLE, ALT, CLASS and STYLE-Attributes are considered This page uses jQuery Version Version
-
DD_belatedPNG: better PNG background-image support in IE6
Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. I stumbled upon the notion that PNG images show up correctly in a VML fill element while working on DD_roundies. Thereafter, some Googling revealed that a few people had already known about this. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript fi
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました