画像最適化戦略 Lazy Loading 編 | blog.jxck.io
Intro 長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。 ここでは、特に画像 <img> に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解説する。 画像最適化シリーズ第 5 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 > 画像最適化戦略 Lazy Loading 編 Lazyloading 画像や iframe の埋め込みは、読み込むサイズも大きく、処理が同期であるため、レンダリングのボトルネックになりやすく、それらが多いページでは初期表示の遅延の原因となることが多くあった。 特に縦に長いページでは、最初にユーザが見えている領域 (Above the Fold) では表
さくらインターネットとピクシブが業務提携し、画像の変換・配信サービス「ImageFlux」を提供 | さくらインターネット
さくらインターネットとピクシブが業務提携し、画像の変換・配信サービス「ImageFlux」を提供 〜ファーストユーザーとして、メルカリが利用開始〜 自社運営のデータセンターでインターネットインフラサービスを提供するさくらインターネット株式会社（本社：大阪市中央区、代表取締役社長：田中 邦裕）とイラスト投稿・交流サイト「pixiv」を運営するピクシブ株式会社（本社：東京都渋谷区、代表取締役社長：片桐 孝憲）は業務提携し、画像処理や画像配信において必要となる画像変換機能とコンテンツ配信をワンパッケージ化したサービス「ImageFlux（イメージフラックス）」を2016年12月13日より提供開始します。また、サービス契約前に全ての機能を試すことができる「無料トライアル」を併せて提供します。 「ImageFlux」は、レンタルサーバーやクラウドなどのインターネットインフラサービスやコンテンツ配信な
ワークフローにおける画像の最適化 - 1000ch.net
2016.07.26ワークフローにおける画像の最適化画像の最適化をビルドプロセスでやるのか、コミット前にやるのかという話。 ビルド時の画像の最適化ビルドプロセスに画像の最適化を行うことはしばしばある。 Gulp や Grunt のプラグインとしては sindresorhus/gulp-imagemin や gruntjs/grunt-contrib-imagemin があったり、追加プラグインのインストールやオプションの設定が面倒な人のために、拙作の gulp-image と grunt-image などもある。その他の CSS や JavaScript といったアセットのビルドと併せて、こうしたツールを実行するのが一般的である。 👍 Pros最適化し忘れのリスクを防げる大抵の場合は glob でパス指定してあるはず?だし、少なくとも手作業よりは抜け漏れは少ない手動で行うという作業の手間
PNG 32bpp変換 | しぇ庫
なにこれ 画像ファイルを32bpp形式のPNGに変換するためだけのツールです。 TwitterにアップロードしてもJPEG変換されないPNGを作成できます(2016/02/21現在)。 ダイアログからの読み込み、コピペ、ドラッグアンドドロップで操作できます。 Twitterの投稿欄へ直接ドラッグアンドドロップも可能です。 動作環境 .NET Framework 4 Client Profile 以降を導入済みの Windows 更新履歴 ver. 0.1 (2016/02/21) 公開 節操無く使うのは避けましょう PNGは重くなりがちなので、帯域の浪費、表示速度の低下、通信料金の増加に繋がる場合があります。 アート作品など、画質が特に重要なケースに絞ってお使い頂くことをお勧めします。 PNGと、(高品質で出力された)JPEGの違いは多くの普通の人には 分かりません 。 JPEGで投稿する
Pixel-fitting - Dustin Curtis
May 9, 2012 Pixel-fitting Note: This article contains non-retina images, which are not pixel-fitted. The irony is not lost on me. In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific sizes. Several people asked me why I had done this instead of including a vector graphic, and the reason is actually quite important. This is
もうサムネイルで泣かないための ImageMagick ノウハウ集 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちわ、アプリケーション基盤チームの青木(@a_o_k_i_n_g)です。好きなみかんは紅マドンナです。 今回は、サイボウズのサムネイル事情について記事を書きたいと思います。サイボウズに限らず通常の Web アプリケーションでもサムネイル作成はよくあると思いますが、ハマりどころが多く涙しているサムネイリストも多いかと思います。これからの時代を生きるサムネイリストが快適なサムネイルライフを送れるよう、知見を共有したいと思います。 弊社では画像変換ツールに ImageMagick を用いており、従って本知見は ImageMagick 固有のものがほとんどです。 画像比較は人間の眼で行うべし サムネイル周りに何か修正を入れたら修正前後の画像を比較しましょう。機械によるバイト列の比較では画像の良し悪しがわかりません。頼れるのは人間の眼だけです。肉眼で確認しましょう。 比較できるツールを作ると良
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
The "Blur Up" Technique For Loading Background Images | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Emil Björklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop. Here, Emil explores a p
二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]
こんにちは、エンジニアのみどです。 ピクシブは、イラスト1枚で簡単にオリジナルグッズが作れるサービス pixivFACTORY を開発しています。 そのpixivFACTORYのプレビューに焦点を絞った勉強会を社内で行いました。 今回は、その勉強会の内容を公開したいと思います。 プレビューとは pixivFACTORYでは、グッズの仕上がりのイメージを確認する機能を提供しています。 この機能は、チーム内でプレビューと呼ばれていて、pixivFACTORYの売りのひとつになっています。 今回の勉強会では、ピクシブのエンジニアがこのプレビューに関する技術やノウハウについて発表を行いました。 pixivFACTORYのプレビューを支える技術 まず、私がアプリケーションサーバ側の処理について発表しました。 ImageMagickやBlenderといったソフトウェアをどのように使い分けているかが見所
![二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c01c6645554c7603a1d377f33f0b20f7b90482f0/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5f602570d6d440e71f2bc42a0cde8d2078e2ffd6%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20150924%252F20150924161502.png)
［CEDEC 2015］テクスチャの最適品質をソフトで分析？ 「グランツーリスモ」のポリフォニー・デジタルが公開した分析ツールの威力とは - 4Gamer.net
［CEDEC 2015］テクスチャの最適品質をソフトで分析？ 「グランツーリスモ」のポリフォニー・デジタルが公開した分析ツールの威力とは ライター：西川善司 ポリフォニー・デジタルといえば，レーシングゲームのトップブランドであるグランツーリスモシリーズの開発を手がけるゲームスタジオとして名高い存在だ。筆者の場合，初代PlayStation時代の隠れた名作「オメガブースト」にも相当な思い入れがあるのだが，知りませんかそうですか……。 それはさておき，このポリフォニー・デジタルが，CEDEC 2015で「フーリエ変換を用いたテクスチャ有効解像度推定とその応用」と題した，かなりユニークな技術セッションを行っていた。 このセッション，ポリフォニー・デジタルが手がけたゲームには直接関係しないのだが，ゲーム開発だけでなく，映像や写真の品質という観点でも興味深い内容であったので，その概要をレポートしたい
The Art of PNG Glitch
Overview PNG is an image format that has a history of development beginning in 1995, and it is still a popular, long living format. Generally, it is known for its features such as lossless compression and the ability to handle transparent pixels. However, we do not look at image formats from a general point of view, but rather think of ways to glitch them. When we look at PNG from the point of vie
素早く画像書き出しできるillustrator向けスクリプト - Two hats
12/11追記・・・JPEG書き出し追加とファイル名の拡張子が重なる場合のバグを修正しました。 9/10追記・・・保存先指定と、オブジェクト名からファイル名を付ける機能を追加しました 以前、画像切り出し用のスクリプトを作成しましたが、スクリプトの宿命というか実行するたびに「ファイル＞スクリプト＞何々スクリプト」という操作の手間があってビミョーに使いにくい操作性になっていました。 なんとかもっと簡単に書き出しできるようにならないか・・・と色々と調べていくうちに、スクリプトだけでもExtensionのような常駐型のウィンドウで作れるということが分かり、これを使ってより使いやすいスクリプトとして作り直しました。 このスクリプトのコンセプトは「とにかく、手間なく素早く書き出す！！」です。設定や書き出す前の下準備などは最小限に抑え、ワンクリックで書き出せる！ぐらいの気持ちで設計しました。UIもかなり
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
フーリエ変換と画像圧縮の仕組み
第2回 プログラマのための数学勉強会で発表した資料です http://maths4pg.connpass.com/event/11781/Read less
Responsive Images 101, Part 2: Img Required
One of the main reasons why we need solutions for responsive images is because the <img> element is insufficient. It only has one src and we need multiple sources. Given that fact, it may be surprising that we’re going to start by talking about the <img> element instead of the new, shiny toys like <picture> and srcset. No matter what responsive images solution you use, <img> is required. The <img>
HTML5 まぐろーだー
更新履歴 2015-03-16 文書を作成 2015-03-15 初版公開 これは何? いわゆるHTML5対応のブラウザの機能だけを利用して、MAGフォーマットの画像を表示するスクリプトです。 何がうれしいの? unlzh.jsと組み合わせて、パソコン通信時代の、改変せずに転載することのみが認められている書庫に含まれた画像をWeb上で展示したいなどの非常に微妙な用途くらいしか思いつきません。 (2015-03-17追記) Intel MacではPixelCatでもMAGを開けないらしいので、最近のMacでMAG画像を見たいけどツールがないという向きには有用かもしれません。WindowsではGVが普通に使えるのであまりありがたみがないと思いますが。 技術情報 システム要件 以下のようなWeb標準仕様をサポートしたブラウザであれば動くはずです。 HTML Canvas 2D Context 型
ブラウザ上で画像処理 ～漫画のコマを領域分割する～ - pixiv inside [archive]
はじめに こんにちは、pixiv でアルバイトをしていた arayuji です。 今回はこれまでやってきたことのまとめとして、漫画やイラストに対する画像処理についてご紹介します。 一口に画像処理といっても様々なものがありますが、ここでは漫画のコマや白黒のイラストを簡単に領域分割する手法についてお話しします。 基本的な画像処理から高度な最適化処理まで、すべての処理をブラウザ上で 実現しました。 実際のコードも、pixiv/manga-segment · GitHubにあるので、興味がある方は見てみてください。 デモ トップに載せた画像が動作イメージなのですが、わかりにくいと思うのでデモを用意しました。（Chrome 40 / Firefox 35 / IE 11 で動作確認しましたが、IE では非常に遅いので注意してください） 右側のパレットで色をひとつ選んで、左側の画像の上にマウスで線を描
アプリで利用する画像について - クックパッド開発者ブログ
ユーザーファースト室のhidaka（@kaa）です。 クックパッドアプリ内では元々同じレシピの画像を画面、環境によって様々なサイズで表示しています。 レシピの検索結果でのサムネイルや、レシピ詳細画面、写真の拡大表示時などなど。 その際、端末の解像度にあわせ無駄のないよう、表示領域にあわせて画像をリクエストしていました。 *画像配信にはtofuという配信システムが稼働しています http://www.slideshare.net/mirakui/ss-8150494 これでそれぞれの端末にあわせた画像を配信していましたが、今年あたりからさらに最適化が必要になってきました。 問題1 画面密度の上昇 端末のスペックが上がることにより、１インチあたりのピクセル数が増加しました。 retinaと言われていたiPhone 5で326dpiだったのが去年あたりからの高解像度端末の幅1440pxの機種(a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
Engadget | Technology News & Reviews
