もうサムネイルで泣かないための ImageMagick ノウハウ集 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちわ、アプリケーション基盤チームの青木(@a_o_k_i_n_g)です。好きなみかんは紅マドンナです。 今回は、サイボウズのサムネイル事情について記事を書きたいと思います。サイボウズに限らず通常の Web アプリケーションでもサムネイル作成はよくあると思いますが、ハマりどころが多く涙しているサムネイリストも多いかと思います。これからの時代を生きるサムネイリストが快適なサムネイルライフを送れるよう、知見を共有したいと思います。 弊社では画像変換ツールに ImageMagick を用いており、従って本知見は ImageMagick 固有のものがほとんどです。 画像比較は人間の眼で行うべし サムネイル周りに何か修正を入れたら修正前後の画像を比較しましょう。機械によるバイト列の比較では画像の良し悪しがわかりません。頼れるのは人間の眼だけです。肉眼で確認しましょう。 比較できるツールを作ると良
WebPでモバイルアプリの通信量を劇的に削減する - クックパッド開発者ブログ
モバイルファースト室の @slightair です。 クックパッドの iOS/Android アプリは、少し前のバージョンからWebP形式の画像をサーバから取得して表示するようにしています。 この記事では、なぜ画像形式をWebPに切り替えたのか、また切り替える上で注意した点などを説明します。 Cookpad アプリと画像 クックパッドのアプリはユーザさんに投稿していただいたレシピを表示するアプリケーションです。その性質上、レシピ画像や調理手順、検索画面のサムネイルなどたくさんの画像をサーバから取得して表示する必要があります。 画像の数が増えたりサイズが大きくなればなるほど通信量が増えます。最近はスマートフォンの画面サイズがどんどん大きくなっているので、それに合わせて取得する画像を大きくしていくとさらにファイルサイズが増え、通信量も増えていってしまいます。 サーバとやりとりするデータが多くな
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
GIFアニメ生成にImageMagickはオワコン、情強は高速なGraphicsMagickを使う - 海峡
大した話ではないけれど、GIFアニメをコマンドラインから作るならGraphicsMagickが便利なので共有します。 MP4の動画ファイルからGIFアニメを作ろうとすると、まずffmpegで動画を画像に分割してそれからimagemagickでGIFに結合するという方法があります。 % ffmpeg -i hoge.mp4 -r 2 %04d.png % convert *.png hoge.gif複数枚の画像をimagemagickでGIFに結合するのが実は結構時間がかかるため煩わしいことが多いです。場合によっては、数十秒かかったりする。 ImageMagickのfork版であるGraphicsMagickを使うと高速にGIFアニメを生成することができます。 GraphicsMagickのほうが3~4倍速い GraphicsMagickを使えばImageMagickよりも3~4倍高速にGI
セクシー女優で学ぶ画像分類入門
2. 解析動機 2013年5月18日Tokyo WebMining #26 2 最後の春だし画像処理の勉強でもしとくか 後輩からAV女優の類似画像検索の話を聞く （ぱろすけ 2012） DMMにはアフィリエイトあったよな これでウェブサービス作れば儲かるかも 決して下半身からの要望で解析したのではありません http://blog.parosky.net/archives/1506 3. 計算環境 2013年5月18日Tokyo WebMining #26 3 使用言語：Python ２．７ （少しだけR） 使用モジュール：Numpy, Scipy, OpenCV 科学技術計算用のライブラリ MATLABにできることは大体できる numpy.ndarray 型付き多次元配列 numpy.linalg 線形代数計算 scipy.cluster 今回はこれのk-means法を使用
Web上で画像の範囲を指定できる·imgAreaSelect MOONGIFT
imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。 ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。 一例です。 選択されていない場所はグレーになるので分かりやすいです。 各ポイントの数値が取れます。 imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。 imgAreaSelectはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る
画像の専門家も「魔法のようだ」と驚愕！ ピンぼけ写真を修復できるプログラムが開発される | ロケットニュース24
画像の専門家も「魔法のようだ」と驚愕！ ピンぼけ写真を修復できるプログラムが開発される 2012年10月26日 わーん、街で偶然アイドルを見かけたから急いでカメラのシャッター切ったら案の定ピンぼけして、どこかのおばちゃんみたいに見えるわーっ！ 街の名前が書かれた看板の字すらボケすぎて何がなんだかわからんわーっ！ これじゃ何の証拠にもならへんやーんっ!! そんなアナタの切実なお悩みが近々解消されるかもしれないから、ピンぼけデータもしっかり保存しておくといいかもしれぬぞ。 というのも、ピントや手ぶれなどでぼやけている写真を修復してくれるプログラム「SmartDeblur」がプログラマーVladimir Yuzhikov氏によって開発されたというのである。 例えばピンぼけした風景の元画像と、処理後の画像を見てみると、その差は歴然！ それまで何がなんだか区別できなかったボケボケの風景が、プログラム
JPEGのフレームヘッダを読んでwidthとheightを取り出す - 昼メシ物語
突然ですが、JPEG の構造はだいたい下記のような感じになってます。 今回は libjpeg 等のライブラリを使わずに、JPEGファイルから画像の width と height を取り出したいと思います。この width と height の情報は、上図におけるフレームヘッダセグメントに入っています。 基礎知識 フレームヘッダセグメント フレームヘッダセグメントの中身は、以下のとおりです。 データ サイズ（bit） フレーム開始マーカー 16 フレームヘッダのサイズ（byte） 16 サンプル精度 8 height 16 width 16 省略 あとは、サンプリングファクタとかが延々と続くんですが、今回は不要なので省略しています。 ヘッダセグメント フレームヘッダ以外のヘッダセグメントには、EXIFデータやサムネイルなど、画像のデコードに直接関係ないメタデータが入っています。 JPEGでは
PHPでレイヤー方式で画像を生成するavatar.phpが便利 - PHPに惚れました。
読者対象 ハンゲームやモバイルゲームサイトにあるようなアバターをPHPで作りたいって方におすすめです。 前振り アバターと言えば、帽子や服など、各パーツとなる透過画像を重ねて、 一枚の画像に見せるというのが一般的ですよね。 それをPHPで実現したライブラリを製作した方が居ました。 ソースコードのDL PHPスクリプトのDLは以下のサイトから。(英語) How to make custom avatars with PHP | BolducPress, a web design blogのThe Source Files下のリンク、 「Download the PHP and Photoshop Files」からDL出来ます。 利用方法 <?php include_once("avatar.php"); //インスタンス化 $avatar = new avatar; //出力時の画像の横幅の
サイト用の画像をブラウザ上で一括で最小化できる「Kraken.io」:phpspot開発日誌
Kraken | Online Image Optimization Tool サイト用の画像をブラウザ上で一括で最小化できる「Kraken.io」 使い方は超シンプルで、「Select Files from disks」をクリックすると、ファイルが複数選択できるダイアログが開くので一括で開くを押すだけで自動でアップロードが始まって、Ajaxで変換され、すぐにダウンロードできます。 複数ファイルの場合はZIPでまとめたアーカイブダウンロードも出来ます すぐにファイルが圧縮されダウンロードリンクと、ZIPで一括ダウンロードボタンが出ます 手元のJPEGで試したところそこまでクオリティは落ちませんでした。 速度に加え、転送料金がかかるサーバではサイズは非常に重要で、これらが簡単にブラウザだけで出来るってのは便利ですね 関連エントリ WordPressでのページ表示高速化の色々まとめ サイトのク
よくあるニーズを疎結合に。内部や外部の画像をリサイズや切り抜き、簡易加工を行うPHPスクリプト·TimThumb MOONGIFT
TimThumbは内部または外部の画像を取り込んでリサイズ、切り抜き、簡易加工を行うPHPスクリプト。 TimThumbはPHP製のオープンソース・ソフトウェア。Webサイトを作る際に重要な要素が画像だ。テキストが並んでいるだけでは重苦しいが、画像をうまくちりばめることで華やかに、見栄えのいいサイトに仕上がる。ユーザに画像をアップロードしてもらうサイトも多い。 リサイズ ユーザがアップロードしたり、外部にある画像を使う場合サイズがばらばらであったりして扱いが悪い。そんな画像を加工するのに使えるのがTimThumbだ。 TimThumbはPHPで画像のパスを指定してリサイズしたり、簡単な加工を行うソフトウェアだ。パスを指定することも、URLを指定することもできる。GDライブラリを使っているのでPHP側を対応させる必要がある。単純なリサイズだけでなく位置を指定した切り抜きもできる。 切り抜き
GIF画像から情報を抜き取るチュートリアル PHPでバイナリプログラミングその3
こんにちは、久保田です。 これまでの記事では、PHPでバイナリを扱うための基本的な事柄を扱ってきました。第一回では、PHPではバイナリをどのように扱えばいいのか、第二回では、そもそもバイナリの反対のテキストとは何か、ということについて記述しました。今回の記事では、例として実際にPHPでGIF画像をどのように解釈していくかを解説します。 バイナリを扱うコードを書く際の手順 ではGIF画像をPHPで扱う前に、まずは一般的にバイナリを扱うコードを書く際の手順の例を以下に大雑把に示します。 1. フォーマットに関する資料を集める 2. 資料からフォーマットを理解する 3. プログラミング言語で実際に扱ってみる バイナリファイルはその種類によって各々が違ったフォーマットを持っています。GIF画像とPNG画像にしても同じ画像ですが、当然ながら内部のフォーマットは全く違います。従って、自分がこれから扱い
SWFバイナリ編集のススメ第四回 (GIF) | GREE Engineering
こんにちは。メディア開発のよやです。 今回は、GIF 画像入れ替えについてお話します。(PNG 画像入れ替えは次の機会に) GIF の情報を格納できるタグ DefineBitsLossless, DefineBitsLossless2 が利用出来ます。(*1) DefineBitsLossless は、ビットマップ画像をシンプルに表現して Zlib 圧縮する形式です。 この DefineBitsLossless に透明度情報を加えたのが、DefineBitsLossless2 です。 GIF の特徴 (基礎知識) 可逆圧縮のフォーマットです。(JPEGと違って画像の細部が潰れません) 色テーブル(カラーマップ)を持ちます。いわゆるパレット(インデックスカラー)形式です。 最大256色まで扱えます。透明色(半透明はダメ)も扱えます。 (蛇足ですが) 複数の画像を格納してアニメーション出来ます
24種類の多彩な表示方法が楽しめるフリーの画像ギャラリー -Slideshow Box
HTML+JavaScript, HTML+swf, Flashで動作する、24種類の多彩な表示方法が揃った画像ギャラリーを紹介します。 HTML slideshows & Flash photo gallery templates _ Slideshow Box ※キャプチャは「24. Wall 3D」 まずは、その24種類の多彩な表示方法を紹介します。 特に目を惹いたのは、9, 12, 20, 22, 24です。
画像とかのパスを//で始めるのは何か問題があるのかな - Webtech Walker
知らなかったんだけど、画像のパスとかリンクとかhttp:を省略して//から書くことができるんですね。リンクだけじゃなくて画像とかも。そして//から始めると、今見てるページのプロトコルになるんですね（httpだったらhttp、httpsだったらhttpsってこと）。 <img src="//example.com/banner.gif" alt="banner /> 外部ドメインのバナーとか貼るときとかに全ページ共通でhttp://~と書いてるとhttpsのページでIEがエラー吐くんでhttpとhttpsで切り替えたりしてたんですけど、//から書けばいいんじゃないか疑惑。 これって何か問題あるのかな。ブラウザによって挙動がおかしいとか。問題無ければ使いたいところ。 追記：IEでリクエストが2回走ることがあるらしい。 CSS files downloaded twice in Internet
PHPライブラリ「Imagick」で携帯の機種に応じた画像を表示する
はじめに 画像処理を行うライブラリの1つにImageMagickがあります。 ImageMagickとは ImageMagick Studio LLC が開発する画像操作のためのソフトウェアで、GIF、JPEG、JPEG 2000、PNG、PDF、PhotoCD、TIFF、DPXなどの幅広いファイルフォーマットに対応しています。GPL互換性のあるライセンスで提供されています。 そして、ImageMagickの機能をPHPで利用するための拡張インターフェースがImagickです。PHPでこのImagickを使うと簡単なコードでImageMagickの機能を利用できます。 本記事ではImagickを利用して、アクセスしてきた携帯電話の機種に応じて画像を表示させる仕組みの構築例について説明します。 対象読者 PHPでのWebアプリケーション開発について基本的なことを理解している方 動作環境と開発
PHPのGraphicsMagickで画像を様々に加工するサンプルコード集:phpspot開発日誌
PHPのGraphicsMagickで画像を様々に加工するサンプルコード集がdevzone.zone.comで公開されています。 画像加工の基本〜フィルタをあてる等、完成後のイメージ付きでコードが公開されていてかなり便利。 そもそも、GraphicsMagickを使えば簡単なコードで高度な加工が可能ですが、サンプルコードもあれば高度な処理を素早く実施できますね。 画像の情報を得る 画像の伸縮 フレーム内に画像をまるめる 水平・垂直反転 画像に枠を付ける ぼかしフィルタ 渦巻きフィルタ 画像をイラスト調にする その他サンプルと、具体サンプルコードは以下のエントリを参照してください。 Manipulating Images with PHP and GraphicsMagick
PhotoshopのPSDファイルをPHPで画像に変換してブラウザに出力してしまう方法:phpspot開発日誌
PHP: Display Adobe PSD files on a web page PhotoshopのPSDファイルをPHPで画像に変換してブラウザに出力してしまう方法。 これは本当に驚きました。PHP PSD Reader というライブラリをインクルードするのですが、複数レイヤーから構成されるPSDも難なく画像にしてくれます。 複数レイヤー。「レイヤー効果」も適用してみました。 難なく画像化に成功してしまいました＾＾； ドロップシャドウ、枠線などの「レイヤー効果」もバッチリ。 スクリプトは超簡単で、imagecreatefrompsd という関数の返り値を imagejpeg などの画像出力関数に渡すだけです。 <?php // ライブラリを読み込み include_once('classPhpPsdReader.php'); // 画像用HTTPヘッダ header("Conten
サムネイル画像のいろいろなデザインスタイル
デザイナーのためのサムネイル画像のいろいろなデザインスタイルをTutorialFeedから紹介します。 12 Excellent Thumb Image Styles for Web Designers サムネイル画像のデザインスタイルは、左上から順に下記のようになっています。 Wide Border 白で縁取りをし、ボーダーを使用。 Sleek Border 細いボーダーを使用。 Sleek Border with Drop Shadow Sleek Borderにドロップシャドウを使用。 Behind Drop Shadow 画像が立っているようにドロップシャドウを使用。 Flip Shadow 画像がめくれているようにシャドウを使用。 Bottom Corner Cut 画像のコーナーをカットして使用。 Wide Rounded Border 広くて丸みがあるボーダーを使用。 Top
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか？［2011年7月現在］ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
