HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
レスポンシブ・デザインを説明するGIFアニメ | ビジュアルシンキング
「レスポンシブ・デザインとは？」を説明する9つのGIFアニメーションが、FastCompanyが運営するCo.Designの記事に掲載されていました。 9 GIFs That Explain Responsive Design Brilliantly | Co.Design 見習いたい表現なので、取り上げます。 たとえば、画面幅の考え方は。 image by Froont デスクトップファーストとモバイルファーストの違いは？ image by Froont それぞれのGIFアニメーションのサイズは、数百キロバイトに抑えてあり、アニメーションは9つありますが表示するのにストレスは少ないです。 わかりやすく情報を伝えられるだけではなく、記事を読む側の利便性からしても、動画を9つ使うよりもGIFアニメーションを使うことに意味がありますね。
ついにGIFに代わる新しいアニメーション画像フォーマットが誕生か
X Window System上で動作するデスクトップ環境「GNOME」の開発者であるJasper St. Pierreさんが、GIFに変わる新しいアニメーション画像フォーマット「XNG」を開発し、長らく使用されてきたGIFアニメーションに取って変わる可能性があります。 XNG: GIFs, but better, and also magical | Clean Rinse http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/ GIFはシンプルなアニメーションに使うのに適していますが、LZW圧縮形式は少し古く、カラーパレットの色の数にも256色という制限があります。GIF以外のアニメーションフォーマットにはAPNGやMNGがあるものの、サポートするブラウザが限定されているなど、ユーザーを満足させるものに
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
最短1分！ URLに「gif」と書き足すだけでYouTube動画をGIF化できるサービス「gifyoutube」がすっごい便利
「YouTubeの動画の一部をGIFにして貼り付けたい！ でも自分で作るのってけっこう面倒」――。そんな人のために、1分程度の作業でYouTubeの動画からGIFアニメを作ることができる「gifyoutube（https://www.gifyoutube.com/）」というツールが登場しました。会員登録もソフトのダウンロードも一切不要で、思いついたときにパパッと使えます！ YouTubeの動画から、ブラウザ上で簡単にGIF動画が作れる「gifyoutube」 使い方はいくつかありますが、簡単なのは、GIF化したい動画を開いて、URLの「https://www.youtube.com」の部分を「https://www.gifyoutube.com」に変えるだけ。「youtube」の部分に3文字足して「gifyoutube」にすればいいわけですね。 あとは動画を確かめながら頭出しする場所と動画
ほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！｜男子ハック
Webサービスほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！2014年6月13日1 @JUNP_Nです。オンラインで利用することができる無料のWebサービス「Compressor.io」はJPG、GIF、PNG、SVGの画像をビックリするほど軽量化してくれます。面倒なアカウント登録などもなしで、画像をドラッグ&ドロップだけで使えて超便利！ 無料で多様な画像ファイルに対応しているのが嬉しい画像軽量化サービス！Compressor.io - optimize and compress your images and photos オフラインではJPEGの画像軽量化には「JPEG mini」を利用、それ以外の画像については「ImageOptim」を利用していたのですが、これだけではGIF動画の軽量化がもの凄く難しい。 関連：1
Twitterでgifアニメを動かせるようにした - razokulover publog
GIFMAGAZINEで投稿されたgifアニメをTwitter上で動くようにした。 元々Twitterではgifアニメの再生に対応していないので、通常ならばTwitterでgifアニメをみることはできない。 そのgifアニメがどのように動くか確認するためには、別途貼ってあるリンク先のサイトへ飛ぶなどしないといけない。 サイトへのアクセスという点ではそれでいいのかもしれないけど、ユーザー体験としてはくそ。 だからとにかくTwitterのタイムライン上で動くgifアニメを実現したかった。 そういうわけで、GIFMAGAZINEで投稿したGIFアニメをリンク先へ飛ぶこと無くTwitterのタイムライン上で動かせるようにしようと考えた。 TwitterにはTwitter cardをという仕組みがあってこれを利用する。 Twitter cardというのはTwitter上でシェアしたサイトのリンク先に
こんなことできるの知ってました？ GIFアニメーションをカーソルの動きでコントロールする -GIFCTRL
背景いっぱいに表示されたアニメーションGIFの上でマウスのカーソルを動かすとそれに伴ってアニメーションをコントロールする「GIFCTRL」を紹介します。 GIFCTRL ※画像表示はランダムです。 そのまま表示していてもアニメーションGIFなので動きますが、カーソルでアニメーションをコントロールすることができます。 カーソルを動かすと、おねえさんがちらちら誘惑しますｗ
JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる！
WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
動画をアニメーションGIFに変換するウェブアプリケーション作った - hitode909の日記
rokugaっていうウェブアプリケーションを作った．ブラウザ上で動画をアニメーションGIFに変換できる．Google Chromeでもちょっと動くけどSafariで見るのが良い． http://rokuga.herokuapp.com/ 使い方 こんな感じで，動画をドロップしてくださいとか言ってる． 1コマずつ出てきて，このコマとこのコマ，この速さ，みたいな指定ができる． 完成したアニメーションGIFは名前を付けて保存しましょう． 特徴 ブラウザで再生できる動画なら何でも変換できる Macなら動画はQuickTime Playerで撮れるので気軽に使える リアルタイムにプレビューしながら仕上がりを確認できる コマ送りは逆再生，行ったり来たり，シャッフルに対応 Herokuで動かしたらCPUが遅くて動画の変換にす時間かかる git cloneしてローカルで動かすとちょっと速い ソースコード→
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
GIPHY | Search All the GIFs & Make Your Own Animated GIF
GIF画像にさまざまなアニメーション効果を加えられる『LooGix』 | 100SHIKI
Togetterオリジナル