pixivのサムネイル事情 - pixiv inside [archive]
この記事はピクシブ株式会社Advent Calendar 12/10の記事です。 こんにちは、インフラチームの@harukasanです。 さて、今日はpixivで使用しているサムネイル変換サーバについて紹介しようと思います。 pixivにはたくさんのサムネイルがある pixivにはうんざりするほどたくさんの種類のサムネイルがあります。 これは対応しているプラットフォームが多く、また画面毎にもサイズが異なるからです。 PC版であるwww.pixiv.netだけでも10種類以上のサムネイルが使用されています。 また、サムネイルにはアスペクト比を固定したものと、スクエアにクロップした2種類があります。 (Ugoira Tech Talks: Ugoku Backendより) 従来の方法ではこれらのサムネイルをアップロード時に生成していたため、サムネイル生成を非同期化するなどして対応していました。
![pixivのサムネイル事情 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7795bb63b5f0ec25d6ef004b131815b4baf0e9f/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fharukasan%2F20141210%2F20141210214738.png)
JPEG画像の約半分のファイルサイズで同品質のものを表示できる画像形式「BPG」が誕生、実際に使ってみるとこんな感じ
同品質のJPEG画像と比較するとファイルサイズを約半分以下に縮小できる新しい画像形式が「BPG」で、FFmpegやJavaScriptだけで動くLinux「JSLinux」などを開発したFabrice Bellard氏が開発した画像形式です。ただサイズが軽いというだけではなく、グレイスケール・YCbCr＝4:2:0・4:2:2・4:4:4・RGB・YCgCo・CMYKなどの色空間をサポートし、アルファチャンネルや可逆圧縮にも対応しています。 BPG Image format http://bellard.org/bpg/ BPGが他の画像形式と比べてどれくらい優れているのかを比較できるのが以下のページ。2種類の画像形式で同程度のファイルサイズの画像を表示させており、「mozjpeg」とBPGとで同じ画像を比較すると、BPG画像の鮮明さが際立ちます。 BPG Image Comparison
画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
Ajaxによるmultipart/postでの画像ファイルアップロード
<?php $textUpload = ""; if ($_FILES['userfile']): $uploadfile = __DIR__ . '/uploads/image.jpg'; if (move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile)) { $textUpload = "File is uploaded"; } else { $textUplaod = "Upload fail"; } endif; if (preg_match('/^text\/html/', $_SERVER['HTTP_ACCEPT'])) : ?> <pre> <?php echo $textUpload; ?> </pre> <form enctype="multipart/form-data" action="/uplo
Breathing Halftone
Breathing Halftone Images go whoa with lots of floaty dots Made for Yaron Install breathing-halftone.pkgd.js breathing-halftone.pkgd.min.js Usage // get the image // jquery var img = $('#hero img')[0]; // or vanilla JS var img = document.querySelector('#hero img'); // init halftone new BreathingHalftone( img, { // options... }); Browsers that do not support <canvas> will fall back to the original
CSS and jQuery Image Comparison Slider | CodyHouse
Image Comparison Slider A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. When you create a product page, there are some effective UX solutions that can be used to make the user 'feel' the product. A comparison image slider is one of those. If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display res
イケてる！レスポンシブ、タッチフレンドリーのライトボックス系jQueryプラグイン「Image Lightbox」
As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but... 画像読み込み中のローディングデザインがイケメンです。実際の動きはDEMOページをどうぞ。 基本的な使い方このライトボックスは以下3つの手順で実装出来ます。 表示したいimg要素を用意するImage Lightbox用のCSSを貼り付ける（ソースファイルをダウンロードして）プラグインの読み込み、実行公式の説明を参考に、デフォルト設定での使い方について記述しておきます。 しかし冒頭で述べたように、公式の説明のままでは動かなかったので僕が実装出来たときのソースコードを書きます。もし動かない方は参考にしてみて下さい。 表示したいimg要素を用意するimg要素を用意し、そのim
jQThumb by pakcheong
Welcome to jQThumb Official Demo Page. This is a jQuery & Zepto plugin that creates thumbnails from images proportionally and also a fallback for background-size in older browsers. As many of you may know that "background-size: cover;" would solve most of the major issues when dealing with thumbnails. But background-size: cover; does not work in older browsers like IE6, 7 and 8 therefore this is o
Connect Images
Empowering Visual StorytellersJoin A Community That Values Your Craft. Monetize Your Visual Works Globally. Empowering Visual StorytellersJoin A Community That Values Your Craft. Monetize Your Visual Works Globally. Today's marketplaces for visual media, especially photography, are widespread and changing constantlyWe constantly monitor the market and its players, like you’d expect from your finan
JavaScriptで画像のファイルタイプをバイナリレベルで判別するには？
JavaScriptで画像のファイルタイプを取得することは結構簡単にできる。問題は、その取得できるファイルタイプが拡張子に依存していることだ。 つまり、本来「DOC」ファイルであるにも関わらず拡張子を「JPG」と偽装すれば、ブラウザは「JPEG」と返してくる。あまりにも甘すぎるじゃないか。 そこで、JavaScriptでファイルタイプをバイナリレベルで判別することができるかどうかやってみたら、できた。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Deep Image FileType Check</title> </head> <body> <h1>Deep Image FileType Check</h1> <h2>(binary level)</h2> <input type="file" id="fileSe
株式会社Qript グループ統合に関するお知らせ
このたび弊社を含む Penseur（パンスール）グループ傘下の事業再編にともない、2022年4月1日をもって、株式会社Qriptは株式会社Penseurへ吸収合併され、新たな歩みを進めることとなりました。 2000年に創業し本日に至るまで、多くの皆様からのご愛顧に対し、社員一同、深く感謝するとともに心より御礼申しあげます。 なお、弊社の既存事業・業務はすべて株式会社 Penseurにて継続してまいります。 事業再編により、新たな体制をもって総力を結集することが可能となり、今後さらに高付加価値のサービス提供が可能になると考えています。 今後も皆様のご期待に添えますよう全力を尽くしてまいりますので、引き続き、何卒ご指導ご鞭撻を賜りますようお願い申し上げます。 2022年4月1日 株式会社Qript 代表取締役 寺嶋正浩 株式会社Qript グループ統合に関するお知らせ（PDF） ※株式会社Qr
バイナリデータのヘッダを正規表現でチェック
概要 データの準備 実際の話1 ^^; バイナリエディタで開く Emacs をバイナリエディタとして使う JPEG, PNG, GIF 画像を見てみる. JPEG 画像を見てみる PNG 画像を見てみる GIF 画像を見てみる 数々のファイルのヘッダを確認する 正規表現作成 概要 あるファイルが画像データであるかどうかを判定するために, そのファイルのヘッダ部を正規表現でチェックするという方法がある. 例: Hatena::Diary - Web アプリ開発 独習メモ - 画像ファイルタイプ自動判別 この例では, JPEG 画像ならば /^\xFF\xD8/, PNG 画像ならば /^\x89PNG, GIF 画像ならば /^GIF8[79]a/ という正規表現によって チェックを行っている. では, あまり広く使われていないようなバイナリファイルのヘッダを 正規表現でチェックできるように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://iamapioneer.com/plugins/skippr/
http://www.iamapioneer.com/plugins/rollerblade/
Image Lightbox, Responsive and Touch‑friendly by Osvaldas Valutis
[CSS]画像をかっこよく表示し、操作が気持ちいいインタラクションを楽しめる -Fluid twisting image 3D