PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ：スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!
こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。 画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ･･･。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。 「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。 圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。 画面遷移は一切ありません。 すげーサイズダウンします これは実際にサイズダウンしてみた結果。 左が元画像で右がTi
ノイズがはいった画像をさくっと作れるジェネレータ『NoisePNG』 | 100SHIKI
シンプルだが便利そうなのでご紹介。 NoisePNGを使えば、ノイズがはいった画像を作ることができる。 ベースとなる色、ノイズのサイズや量などを指定することが可能だ。 サイトの背景画像やらデスクトップの壁紙などに使うことができるだろう。 まぁ、それだけだが覚えておいても損はないですな。
PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
