モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
Scrollbear -- Make your blog more smooth!
Scrollbear Scrollbear is a tool that maintains the container scroll position when images loaded. Scrollbear is suitable in blog platforms where exist many photos and images. When images loaded, the scroll position will jump and cause a unfriendly experience. Scrollbear will trace the container height and maintain the scroll position when the images loaded and container height change. Demo Installa
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
ブラウザ上で画像処理 ～漫画のコマを領域分割する～ - pixiv inside [archive]
はじめに こんにちは、pixiv でアルバイトをしていた arayuji です。 今回はこれまでやってきたことのまとめとして、漫画やイラストに対する画像処理についてご紹介します。 一口に画像処理といっても様々なものがありますが、ここでは漫画のコマや白黒のイラストを簡単に領域分割する手法についてお話しします。 基本的な画像処理から高度な最適化処理まで、すべての処理をブラウザ上で 実現しました。 実際のコードも、pixiv/manga-segment · GitHubにあるので、興味がある方は見てみてください。 デモ トップに載せた画像が動作イメージなのですが、わかりにくいと思うのでデモを用意しました。（Chrome 40 / Firefox 35 / IE 11 で動作確認しましたが、IE では非常に遅いので注意してください） 右側のパレットで色をひとつ選んで、左側の画像の上にマウスで線を描
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
Web Worker を使って web ページ内の画像を zip してダウンロードする - おなか周りの脂肪がやばい
クロスドメイン制約がない状況で、Web ページ内に表示されている画像を一括で zip してダウンロードしたいみたいな欲求ありませんか。私にはありました。 ありがたいことに jsZip というライブラリがあり、これを使えば JavaScript で zip ファイルを作成することができます。手順としては以下のような感じでしょうか ダウンロードしたい画像の url 一覧を作る 画像をすべてダウンロード 完了したら画像データを jsZip で zip する zip したものを blob にして、ダウンロード用のリンクを作る ご存知のようにブラウザの JavaScript はシングルスレッドで動作しており、JavaScript で時間のかかる処理を行うとユーザーの操作がブロックされます。jsZip による zip 処理もファイル数が少ないうちはいいのですが、ファイル数が増えてくると結構時間がかかっ
JavaScript GIF Encoder “GifWriter.js” 0.1.0 をリリースしました - ひだまりソケットは壊れない
2013 年 4 月 22 日に JavaScript の GIF Encoder ライブラリをリリースしました。 TypeScript で書いてます。 ダウンロードとデモ 次のページからダウンロードできます。 Web 上で動くデモもあります。 GifWriter.js — GIF Encoder written in TypeScript TypeScript で書かれたソースコードは GitHub のリポジトリに置いてます。 Repository on GitHub : nobuoka/GifWriter.js · GitHub クラス 主要なクラスは次の 2 つです。 vividcode.image.GifWriter vividcode.image.MedianCutColorReducer vividcode.image.GifWriter vividcode.image.Gif
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
riaxdnp.jp - このウェブサイトは販売用です！ - riaxdnp リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
Пин Ап Казино — Официальный сайт Pin Up Casino: вход в личный кабинет
Дата начала работы казино ПинАп Начало работы казино Пин Ап отсчитывается с 2016 года. Владеет казино компания Company Limitted. Дата запуска совпадает с получением лицензии от известного регулятора азартных игр Кюрасао. Pin Up казино работает с данной лицензией и на данный момент. Благодаря наличию лицензии, виртуальное игорное заведение смогло расширить свой ассортимент азартных игр и привлечь б
DEfusion.org.uk » JavaScript Image Cropper UI, using Prototype & script.aculo.us
JavaScript Image Cropper UI, using Prototype & script.aculo.us This is a page from my old blog This page was imported from my old Wordpress Blog (which I stopped updating in 2011) and are here mainly for posterity. Although I have tried to clean things up there will be broken links and potentially other issues. About The JavaScript image cropper UI allows the user to crop an image using an interfa
FN1205002 - PreloadJSで外部画像ファイルの読込みを待つ - HTML5 : テクニカルノート
PreloadJSは、画像のほか、サウンドやJavaScriptなどの外部データを読込んで、その経過や完了を捉えて処理するためのライブラリです。本稿では、画像ファイルの読込みを待って、その画像にもとづく処理を加えてみます。 なお、読込み待ちのない外部画像ファイルの扱いについては、「EaselJSで外部ビットマップファイルを読込んで回す」をご参照ください。 01 外部画像ファイルを読込んでCanvasの中央に表示する PreloadJSのライブラリは、予めサイトからダウンロードして、適切な場所に保存しておいてください(図001)。本稿では、HTMLドキュメントと同じ階層に、ダウンロードしたpreloadjsフォルダが置いてあるものとします。 図001■PreloadJSライブラリのJavaScriptファイル まずは、PreloadJSのプリロードなしに、外部画像ファイルを読込んでCanva
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Holder.js - image placeholders in browser
webmobile – Pixel/iPhone/amazon/SIMの使い方！
http://mezzoblue.github.io/PaintbrushJS/