今回の記事はUIデザイナの Morino氏 からの寄稿です。 iOS 7が正式リリースされました。既にアップデートを行って実際に試されている方も多いと思いますが、今回はUIに大幅な変更が加えられたために、まだ操作に戸惑いのある方もいるのではないでしょうか。 特にiOS 7にしてから重く感じる、もっさりしているという意見もけっこう多いようです。iOS 7をしばらくいじってからiOS 6の端末を触ると、たしかにiOS 6の方がきびきび動いているように感じます。 今回は半透明やぼかし、視差効果などの画像エフェクトをふんだんに使用しているために画像処理の負荷が高いことも確かでしょう。しかし、全てが端末の性能のせいというわけでもないことを、今回はご紹介したいと思います。 頻繁に操作を行う以下の4つのシーンについて、ちょっとした比較検証を行いました。 ロック解除してから、ホーム画面のアイコンが全て出現
画像をもっとデリケートに扱う デリケートと言っても常に最高画質でやるべきなんてことを言うわけではなくて、 『こういう場合にはこういう画像』ということをしていくことが必要になると思います。 その引き出しをなるべく多く用意しておきましょう。 ファイルサイズとリクエストの天秤 Webのパフォーマンスにおいて、コスパが高いのはネットワーク部分です。 リクエスト数の削減 CSSとJSの結合 画像のCSSスプライト化 Keep-Aliveのon ローカルキャッシュ効かせる レスポンスサイズの削減 CSSとJSの圧縮 画像の圧縮・最適化 サーバーから返すリソースのgzip化 これらは比較的簡単に行うことが出来る上に、効果も大きいです。 しかしCSSとJSの結合と圧縮を行っても、画像が1ファイル300KBあったり、 更にそれが何ファイルもあったりしたらCSSやJSの最適化も 効果が小さいもの
動画ファイルの再生は今時のデバイスだとGPU的な何かにより再生支援が行われ、CPUへの負担は少なくなる。「じゃあそれアニメーションGIFにも効いたりするの？」と某所でピンク色の髪の毛の女の子が襲ってくるアニメーションGIFを見た時に疑問を持ったので、雑に調べた。 雑な検証にはRRRRRRRROLL_GIFのArchiveページを利用した。 Chrome 29: ひたすらCPUを消費し、まったくGPUを使わない Firefox 23: CPUとGPUをモリモリ使う Internet Explorer 10: 数個のアニメーションGIFだとほとんどCPUを消費しない IE10ではGPU使って再生しているような挙動だが、20程表示させるとCPUの負荷がどんどん上がる。負荷を減らす工夫がありそうではあるが過信はできなさそう。いずれにせよアニメーションGIFはモリモリCPUを使う可能性が高く、環境に
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting
WebGL を使えば、色の加算、減算、乗算といったブレンドモードが高速で処理できるというお話。 Canvas2D でもピクセルマニピュレーションができるので、様々なブレンドモードを自前で実装することができるのだが、ピクセル数 * 4色の処理負荷が CPU にかかるためパフォーマンスがよくない。しかし WebGL のフラグメントシェーダーを利用すれば色を高速で処理できる。 demo WebGL は簡単なことをするにも、初期化の処理が冗長なためコードは長くなってしまうが、実際は大したことはやっていない。 2つのトライアングルを用意する 2枚のテクスチャー画像を適用する フラグメントシェーダーでテクスチャー画像の色をブレンドする GLSL では、4成分 (Red, Green, Blue, Alpha) をそのまま足したり掛けたりすることができるので、ブレンドの公式に当てはめるだけで処理できる。
個人的には以下の様な理由から、data属性はJSから参照する変数の初期値としてのみ使用し、JSから直接状態を保持するための変数としては使用しないほうがいいと思っています。 Objectを保持できない JSのObjectは.toStringされた結果が保持されるため、JSの内部状態をそのまま保持できませんDOMアクセスが有るため遅い これに関してはベンチマークをとったわけではないですが、JS内で完結する変数アクセスに比べると速度的なペナルティはあると思います （data-*もCSSから参照できるからそのへんの解決もいるし） jQuery.fn.dataの実装はこれらの問題をある程度解決しているので、「HTMLElement毎の独自変数を保持したい」という場合にはjQuery.fn.dataかそれに近い実装を行うのがいいと思っています。
SVGOはSVGに不要なホワイトスペースの削除に留まらない最適化を行ってくれるステキなソフトウェア。ちょっと前までなかなか挙動不審だったので、利用を避けていたんだけどv0.3.7では安定している感じなのでまた使い始めた。デフォルトでは入力ファイルを上書きしちゃうのでバックアップを取るように心がけたい。 SVGOは大体において本当に素晴らしい効果を発揮してくれる。Data URIを使ってCSSに埋め込む時のようにファイルサイズがダイレクトに響いてくるケースには積極的に利用すると良い。デフォルトではviewBox属性消えちゃうとか「アレッ？」と思うところもあるけど、気になるなら残すように設定もできる。ドラッグ・アンド・ドロップでまとめてSVGOに通してくれるSVGO GUIとかもあるのでそんなに使い方は難しくない。 $ svgo -i test.svg -o - --datauri=base6
★追記： https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu のほうがブラッシュアップ版です WCAN 2013 Summer (7/6) で行われた、"High Performance Web Frontend…
Join the official community for Google Workspace administrators In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace. ______________ Learn about more Goo
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 昨年からちょこちょこコードを書いていて、たまに思い立ったように機能を追加していた画像最適化ツールのlightpngに1.0のタグを打ちました。だいたいやりたい機能は入ったかな、ということで。時間的にはこんな感じで進化してきました。 2012/5/17: ファーストバージョン。pngを読み込んで16ビットに減色機能 2012/6/14: クロスコンパイルでWindowsバイナリ生成 2012/6/16: jpeg読み込み。 2012/6/18: PVRTC/ATITCの生成。 2012/7/30: libpng/zlibの圧縮オプションをブルートフォースで最適化 2012/11/5: プレビューモード追加 2012/11/28: Mac OS 10.8上でも10.6から動くバイナ
MacBook Proを買ったのはいいもののそろそろLinuxに戻りたくなってきたbokkoです。 今回は先月末にGoogleから発表・公開されたばかりのzopfliの紹介と、 そのPHP拡張であるphp-ext-zopfliにPNG画像を再圧縮する関数を追加した時の話をします。 zopfli zopfliはzlibと比べて3〜8%ほど圧縮率が高く、 それでいてgzipやzlib等で広く使われているdeflateアルゴリズムと互換性のある圧縮アルゴリズムです。Google CodeでCによる実装が公開されています。 繰り返しになりますが、単にdeflateアルゴリズムよりも圧縮率が高いだけでなく、 deflateアルゴリズムと互換性がある、つまりzopfliで圧縮したものは従来のgzipやzlibで展開できるというのがミソです。 zopfliによるPNG画像の再圧縮 PNG画像はデータ部分
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
ドット絵におけるsvgのパフォーマンス検証
ここ数日ドット絵からsvgを生成するスクリプトを書いていたのですが，一点気になることがありました．生成するsvgの内容によって描画パフォーマンスに驚くほどの差が出たのです．となればその差はどこから生まれているのかに興味が湧いてきます．そこで今回はsvgの描画パフォーマンスについて検証してみましょう． ※検証コードへのリンクを追加しました． ドット絵をsvgに変換する意義 ドット絵と言えば，かつてファミリーコンピュータを代表とした家庭用ゲーム機におけるグラフィック表現として標準的なものでした．昨今では3dを主体としたグラフィックが主流となってしまいましたが，ドット絵のもつ独特な味わい深さから，今日でも一表現手法として様々な場面で利用されています． さて，本来ドット絵はラスタ画像として扱われることが多いのですが，これをsvgとする意味はあるのでしょうか？実は有るのです． ドット絵の特徴として，
12月18 ファイルサイズを考慮した Canvas の保存 こんにちは、18 日以降の Graphical Web Advent Calendar が空いているので、場をつなぐ意味も込めて簡単な記事を投稿させていただきます。 先日の記事では PNG の仕様について書きましたが、その知識をさっそく生かす事ができます。 また、この記事では HTMLCanvasElement を省略して Canvas と表記させていただきます。 Canvas#toDataURL() さて、一般的に Canvas の描画状況を保存しようと思うと、Canvas#toDataURL メソッドを使用すると思います。 ですが、このメソッドで保存された画像がどのようになっているかご存知の方はあまりいないと思います。 まずは、以下のコードで簡単な Canvas 描画を行ってみます。 function draw1(target
12月16 PNG 画像の解析と最適化ツール はじめに この記事は Graphical Web Advent Calendar の 16 日目の記事として書かれました。 Graphical Web ということで、PNG フォーマットの簡単な説明と Web ブラウザ上で動作する PNG 解析ツールを作ったので使い方と解析結果の見方について書いていこうと思います。 また、人気のある PNG 画像最適化ツールがどのような最適化を行っているのか調べていきます。 PNG の仕様に入る前に ここから、PNG の仕様について最低限の説明を書いていきます。 PNG の最適化や検証するときに必要になるので、退屈かもしれませんが軽く目を通してください。 以下の項目について、なんとなく分かれば良いです。 シグネチャ 必須チャンクの役割 IHDR PLTE IDAT IEND PNG 仕様概要 PNG フォーマッ
Best Mobile Apps – a Technological Advancement! In today’s time and age, when the whole world is global and evolves on a daily basis, being proactive and quick has never been more important. In the span of a century lots of devices have been created in order to help the modern man with all sorts of tasks across all industries. Nowadays things are different and with access to endless amounts of inf
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
このテーブルの番号は 1 Byte になっているため、0-255 の 256 個しか登録できません。そのため、画像で使用されている色が 256 個より多い場合は、なんとかして 256 個にしなくてはいけません。 この「なんとかして 256 色にする」というのが減色処理で、なるべく元の画像からの変化を分からないようにしながら色を減らしていくためのアルゴリズム実装です。（この記事では減色アルゴリズムについての説明は省略します。） テーブルを作成したら、画像のそれぞれのピクセルを RGB 形式からテーブルの何番目の色を使うかに置き換えます。 上図のように、1 ピクセルあたり 24bit 必要だった画像が 1 ピクセルあたり 8bit になったので、データサイズは大体 1/3 になります。 （パレットのデータに最大 3 Byte * 256 = 768 Byte 必要とか、同じように圧縮されないと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
