PNG軽量化の減色と圧縮について | GREE Engineering
このテーブルの番号は 1 Byte になっているため、0-255 の 256 個しか登録できません。そのため、画像で使用されている色が 256 個より多い場合は、なんとかして 256 個にしなくてはいけません。 この「なんとかして 256 色にする」というのが減色処理で、なるべく元の画像からの変化を分からないようにしながら色を減らしていくためのアルゴリズム実装です。（この記事では減色アルゴリズムについての説明は省略します。） テーブルを作成したら、画像のそれぞれのピクセルを RGB 形式からテーブルの何番目の色を使うかに置き換えます。 上図のように、1 ピクセルあたり 24bit 必要だった画像が 1 ピクセルあたり 8bit になったので、データサイズは大体 1/3 になります。 （パレットのデータに最大 3 Byte * 256 = 768 Byte 必要とか、同じように圧縮されないと
Guy Podjarny「Responsive Web Designなサイトは遅い、と言っておこう」 - 以下斜め読んだ内容
Guy's Pod 2012.10.9のブログエントリ 追記 元エントリが更新されてたので、修正 Guyのプレゼン動画聞き齧った内容も少し反映 Guy's Pod » Blog Archive » Responsive Web Design is bad for performance. There, I said it. 世界のトラフィックの数割を捌くAkamaiの中の人によるResponsive Web Designネタ Guyはモバイル向け速度計測ツール作ってたblaze.ioのCTOだった人 blaze.io自体は2月にakamaiに買収された RWDに期待してる、人にも勧めてる けど認めるべき事実としてRWDは遅い、最適化してもどうにもならない部分残る その上でRWDでいくのに必要なこと、考えるべきこと、etc.を綴ったエントリ RWDが引き起こす速度低下は軽減できるがゼロにはな
Dev.Opera — CSS3 vs jQuery Animations
IntroductionFlash originally paved the way for us to feature more than just text and images on web pages. It allowed developers to include animations and other rich effects on web pages, leading to a much more colourful and varied user experience. However, Flash was plagued by a number of issues like security, long loading times on mediocre networks, etc. Then came JavaScript libraries like jQuery
svgを使って図案とレイアウトとを分離する
svgは画像の表現形式であると同時にグラフィックを描くためのプログラム言語とも言えます．そのために，svgを手書きする場合に便利な機能が沢山定義されており，上手く組み合わせることで煩雑な作業を大幅に簡略化すると言ったことも可能です．ここではuse要素とスタイルシートとを組み合わせて基本となる図案とレイアウトとを分離し冗長なコードを省く方法について紹介します． 例えばトランプを思い浮かべて下さい．トランプのカードには4種のスート（マーク）と13種の位が存在しており，全部で13×4の52種類のカードが存在します．ここで同じ位のカードはマークが異なるだけで同じレイアウトとなっている点に着目します． 素朴に考えると，全部で52種類のカードをデザインすれば良いのですが，同じレイアウトなのだから何らかの方法で作業を簡略化したいところです．そこでsvgの機能を使ってスートの部分とレイアウトの部分を分離し
cron等をつかって外部のAPIに問い合わせる場合は、毎時0分を避けるのが大人のマナー - blog.nomadscafe.jp
なんかtwitterで書いたらウケたっぽいので cronをつかって外部のAPIに問い合わせる場合は、毎時0分をさけるのオススメ！！！！お兄さんとの約束だ！！！ — masahiro nagano (@kazeburo) August 9, 2012 某サービスのAPIへの問い合わせ件数を調べると、毎時 0分台(0秒から59秒)のアクセスは1分から59分までの1分間の平均アクセス数の5倍から8倍にもなります。 これはおそらく、crontabの設定が 0 * * * * /path/to/call_foreign_api になっていることが多いからじゃないかなぁと思うのです。 その結果、サーバのロードアベレージは このように毎時0分だけ跳ね上がってしまいます。サービスを快適に提供できなくなる可能性があるので、APIの利用を制限したり、サーバを追加しなければなりません。これはサービス利用者、サー
文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ
HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Web フォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Web フォントを作ってみるまずは簡単に日本語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン
FOUT
Flash of Unstyled Textの頭文字をとってFOUTと呼ばれる現象がある。FirefoxでWebフォントの読み込みが完了するまで別のフォントが使われる現象のことで、後にSafariやChrome、Internet Explorerで起こるようになった読み込みの完了まで空白になる現象のことも含めてFOUTと呼ぶことが多い(気がする)。このWebサイトでも起こっていて、それについて聞かれたのでさらっと書いてみる。 この現象の原因はCSSの処理やWebページのレンダリングと並行してWebフォントのHTTPリクエストが行われることにあるので、仕様と言って良い。起こらないようにするにはWebフォントの読み込みが終わるまで他の処理をブロックするとかしないといけないため、改善される可能性はあるけどまず直ることはない。日本のWebサイトではあまり起こらないように感じるのは、Webフォント自
SVG Stacks | simurai
Image sprites are wildly used for downloading lots of icons or UI elements all at once with just a single HTTP-Request. But they are somewhat cumbersome to use because you have to calculate the background-position offsets. You can’t easily add, remove or reorder them with recalculating. Or change the size without a neighbour peeking in from the side. How could it be solved? Well, by stacking them
ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
OptiPNGにメタデータ削除機能が付いた
OptiPNGが0.7にバージョンアップして、待望のメタデータを削除する機能がついた。これでpngcrushいらなくなるかも。0.7では他にlibpngの脆弱性についての対応もなされているので、使用している人は更新するべき。 オプション名は-stripで、それに続けて削除したいチャンク名を指定する……ということになっているが、今のところはallというキーワードでの全削除しかできないようで、これとこれだけ削除とかはできない。 $ optipng -strip all test.png ざっと試した所、pHYs (アスペクト比やDPI)やiCCP(カラープロフィール)、cHRM(ホワイトバランス)あたりは削除されたので、オプションから想像できる通り必須チャンクとtRNS以外を削除するんじゃないかと思う。つまりpngcrushで言うところの-rem allb相当な感じなので、これをメインに使って
uupaa looper 見っけたよー - latest log
(ε・◇・)з hasOwnProperty を使った for in ループより 20%～84% 低コストな、うーぱー式 ループのご紹介だよ～ Object.keys を使い、key を列挙することで、hasOwnProperty を使った for in ループよりも速くなります。 var keys = Object.keys(obj), i = 0, iz = keys.length; for (; i < iz; ++i) { var key = keys[i]; var value = obj[key]; ... ベンチマーク http://jsperf.com/perf-for-in-loop-vs-pre-enum-keys-for-loop/8 Browser for_in_hasOwnProperty loop uupaa-looper Chrome 16.0.912.77
文字コードを意識すべし
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 現在のWebブラウザというのは、いろんな外部コンポーネントも使って作ってるわけなんだけど、例えば、HTMLを解析しながら文字コードを変換なんてしてたら複雑になりすぎてバグを増やすきっかけになってしまう。HTMLパーサーに渡される時点で特定の文字コードで渡すようになってる。そのため、文字コード変換はオープンソースだったらlibicuのようなものを利用したりする (WebKitは現にlibicu使ってる) し、プロプラであっても、Internet ExplorerのようにブラウザじゃなくてOSのコンポーネント(MLANG.DLL)を使ってたりする。ちなみにMozillaではuconvと呼ばれるライブラリを自分たちでメンテナンスしてる。 また、現在のWebブ
Closure Stylesheets で CSS を最適化する (1) - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 これまで Closure Library を使っていろいろと開発をしてきましたが、 CSS の扱いについてはいつも不満でした。 JavaScript コードについては Closure Compiler との組み合わせで極限まで最適化できるのに、 CSS についてはほとんどサポートがなく、仕方がないので自作の Rakefile と YUI Compressor を使
CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、
Big Sky :: IEとFirefoxとChromeをたった10分でチョッパヤにする方法
追記 anekosさんから、Chromeは「--disk-cache-dir=r:/ram みたいにオプションつけて起動すれば、キャッシュディレクトリ指定できる」と教えて貰いました。毎度指定してないとダメらしいですが、ショートカット等で運用すればjunction要らない子ですね。 IEとFirefoxに関しては難しい事はしないし誰でも出来る。この記事読む時間も合わせて10分程度あればIE、Firefoxを高速化出来る。Chromeは少し敷居が高いけど中級者レベルなら出来るはず。 以下、Windows初心者は最後まで読んでからやるべし。あと動作がおかしくなったとしても自力で直せる片が対象です。 まず、これを入れる。 ドライバーダウンロード RAMDISK ユーティリティー | BUFFALO バッファロー お客様が以下のダウンロードソフトウェア使用許諾契約に同意する場合にのみ、お客様はダウン
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
JavaScriptの文字列を反転する１０の方法とそのパフォーマンス - 風と宇宙とプログラム
はじめに JavaScriptで文字列を反転する１０の方法を（無理矢理？）思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。 文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(reverse)機能はない。Arrayのreverseはあるのに、Stringのreverseがないのはどうしてなのだろうか。 各ブラウザとそのバージョンは以下の通り： Chrome Firefox Opera Safari IE 13.0.782.112 m 6.0 11.50 5.1(7534.50) 8.0.7600.16335 rev01: C言語的発想 空の配列を作って、そこに元の文字列の後ろから１文字つづ入
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
「JavaScriptと性能についての本当の話」をしよう。ダグラス・クロックフォード氏
JSONの発見者でJavScript界の重鎮であるYahoo!のダグラス・クロックフォード（Douglas Crockford）氏。米オライリーが主催するイベント「Velocity 2011」で、セッション「JavaScript & Metaperformance」を行いました。 いまWebブラウザ間でJavaScriptエンジンの性能競争が行われていますが、その影響とこの先の展望について語っています。JavaScriptプログラマなら必見の内容を、公開されたビデオを基に紹介しましょう。 JavaScript & Metaperformance これから、JavaScriptと性能についての本当の話をしよう。 JavaScriptはみなさんご存じかな？ いまや世界で最もポピュラーになったプログラミング言語だ。 JavaScriptは、Javaからシンタックスを、Schemeからファーストク
Windows 7でペンタブレットを使ってお絵かきする時のレスポンスを改善する - 投げっぱなし日記
ずっとXPを使い続けてきましたが、とうとうWinsdows 7を入れました。全般的になかなか快適なのですが、やはりXPとは勝手が違ってとまどうこともちらほら。 その一つがペンタブレットです。 OSでサポートするのは良いんだけど、なんだかもっさりというか手ぶれ補正がかかってる感じというか。SAIなんかで描いているときもそうですが、特にWeb上のお絵かきツールで描こうとすると、いわゆる「入り」の部分でペンが引っかかる。おまけに波紋のエフェクトが出てカーソルが見づらい…。 これじゃまともにお絵かきできない、困ったなあ…。よくよく挙動を観察していると、長押ししたときにくるりん、と出てくるあの機能がお邪魔になってる可能性大です。 というわけで、色々いじってみたので手順を載せておきます。今回扱う設定変更点は大きく分けて2つ。1つめは「ジェスチャー設定を見直してペンタブレットの動作を改善する」、2つめは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
