画像ファイルの最適化とスプライト画像の作り方 | さくらのナレッジ
Webサイトの最適化において、最も手軽にできて効果的なのは画像ファイル関連の最適化である。主に2つの最適化方法があり、1つは画像ファイル自体のファイルサイズを小さくして通信帯域を節約すること。もう1つは画像をまとめることによって通信回数を減らすことだ。それぞれのポイントや作業方法を解説していこう。 最適化できる画像はどのくらいある？ Webサイトの各ページには何かしらの画像ファイルが使われている。これらに改善の余地があるかどうかは、GoogleのPageSpeedなどの診断ツールを使って簡単に把握できる（参考：「PageSpeedを使ってWebサイトを最適化・高速化しよう」）。サイト運営でこれまでとくに画像最適化について意識していなければ、「？%サイズを縮小できる」「画像ファイルをまとめる」などのアドバイスを受けることだろう。 ファイルサイズを小さくできるPNG形式 一般に利用されている、
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
お手軽に画像の読み込みをハンドリングする、今どきな方法 - latest log
2008年のエントリ http://d.hatena.ne.jp/uupaa/20080413/1208067631 のリニューアル版です。 (ε・◇・)з o O ( 2018年頃にでも、もう一度調べて書きたいと思います。
JavaScript製の顔認識ライブラリがすごい | DECONCEPTER
JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング（Tracking in image）ビデオの顔認識トラッキング（Tracking in video）認識顔に別の顔を乗せてマスキング（Face masking）認識した顔のデフォルメ（Face deformation）の4つがあります。 デフォルメとマスキングが特に面白いのでお試しあれ。 ちなみにおっぱいを顔として認識してもらおうとしたら怒られました。
アップロードした写真（画像）が回転して表示されるのを直す方法 - Qiita
iPhoneからWebでHTMLのフォームから写真をアップロードしてもらったときなど、画像が回転して表示されてしまう場合があるようです。原因はExifのOrientationの値が「1」以外になっていること。 画像の向きの情報がExifに埋め込まれているけれど、ファイル自体は回転していない（＝撮影した向きになっていない）ために表示がおかしくなるのです。 ブラウザーの仕様によりますが、ExifのOrientationの値を無視して、ファイルを表示しようとすると撮影した向きとは合わない表示になってしまうことになります。 解決するには、アップロードされたときにExifのOrientationを見て、サーバー側で画像を回転させてしまうのがオススメ。回転して、ExifのOrientationの値を正しい向きに補正します。 以下、PHPのimagick拡張を使った場合の例。 <?php $imagic
VisualSeeker V2 - ウェブ類似画像検索
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN研究所の成果である"画像特徴による画像検索技術"を利用した画像検索サービス「VisualSeeker」。 リニューアルした「VisualSeeker V2」では、ウェブ上の一般の画像を検索対象に広げたほか、"領域指定検索"の機能を追加。より多くのシーンで利用できるようになりました。 「VisualSeeker V2」の機能について ウェブ上にある画像をキーワードで検索。検索結果からさらに、選んだ画像によく似た画像を、さまざまな方法で検索できます。 【1】類似画像検索 画像から抽出できる特徴のほか、Yahoo!画像検索で使われているテキストの情報を利用することで、精度の高い検索が可能に。 また、お手持ちの画像
テキストや画像にぼかしを入れて興味をそそれるjQueryプラグイン「SPOILER ALERT!」
twitter facebook hatena google pocket 人間、隠されているものって気になりますよね。 jQueryプラグインのSPOILER ALERT!は、テキストや画像に簡単にぼかしを入れられ、クリックで表示させられます。 sponsors 使用方法 SPOILER ALERT!からファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="spoiler.js"></script> <script type="text/javascript"> $(function(){ $('.class名').spoilerAlert({ max: 10, //ぼかし範囲 partial: 4, //ぼかしの度合い hintText:"やらしい人で
身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識 | DevelopersIO
こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具
Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
PHP Image Workshop - PHP class using GD library for image processing
PHP Image Workshop is an open source class using GD library that helps you to manage images with PHP. This class is thought like photo editing software (Photoshop, GIMP...): you can superimpose many layers or even layer groups, each layer having a background image. It makes the class the most flexible ever ! It is thought to do simple tasks like creating thumbnails or pasting watermarks and also t
Jcrop - Deep Liquid
Jcrop » the jQuery Image Cropping Plugin Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or blo
OSSの類似画像検索プロジェクト Apache alike のご紹介 - 株式会社ロンウイット
alike での類似画像検索の主要な部分は上記の既存OSSを利用しているため、alike 自身は非常にコンパクトな構造になっています。下図にalikeのアーキテクチャを示します。 Apache alikeのデモ 下記のリンクをクリックすると、類似画像検索を体験できます。リンクをクリックして表示された画面の一番上の画像が「検索元」の画像で、2番目以降の画像が検索元と似ていると判断された類似画像一覧です。Luceneにより「似ている順」に表示されています。 http://rondhuit-demo.com/p/alike/ukbench/full/ukbench01700.jpg http://rondhuit-demo.com/p/alike/ukbench/full/ukbench01990.jpg http://rondhuit-demo.com/p/alike/ukbench/full
計量学習を用いた画像検索エンジンとアニメ顔類似検索v3について - デー
まだgithubにはpushしていないのですが、さいきょうの組み込み型画像検索エンジンotamaに計量学習を用いて与えられたデータにあった画像間の距離関数を学習してそれを使って検索するというドライバを入れたので、先行的なデモとしてアニメ顔類似検索v3を作ってみました。 計量学習は、ベクトル間の距離の計り方を機械学習で決めるみたいな分野です。 アニメ顔類似検索v3 AnimeFace Search v3 - Otama LMCA_VLAD_HSV Driver randomボタンを押すと顔画像がランダムに出るのでどれかクリックするとそれをクエリに検索します。color weightは色の重みを調節するパラメーターで、1にすると色だけで検索します。0にすると形状やテクスチャだけで検索します。結果画像の上の数字は類似度的なもので、その横のgglは元画像をGoogle Search by Imag
画像の MIME タイプを判定する
画像の拡張子は pathinfo もしくは SplFileInfo、POST リクエストであれば $_FILES[‘userfile’]['type’] から取得することができるが、どれも偽装が可能なので、セキュリティチェックのためには使えない。 PHP 5.3 以降であれば Fileinfo モジュールが標準関数になったので、ポータビリティの点でこれが推奨される。このモジュールは BSD や Linux のfile コマンドに使われるライブラリである。ソースコードはFine Free File Command で配布されており、Wikipedia によれば1973年から存在する歴史のあるコードである。BSD ライセンスであるために PHP コアに取り込むことができたようだ。 PHP 5.2 以前であれば GD モジュールの getimagesize 関数も選択肢にある。「安全な Web
jQueryで異なる大きさの画像をリサイズ&中央表示する | ryodesignblog
やりたいこと なんかよく分からん説明で申し訳ないですが…。 つまりどういうことをやりたいかというと、WordPressのトップページや記事一覧ページなどで画像のサムネイルを表示するときに、画像をいい感じにリサイズして配置したい、ということです。 つまり…どういうことだってばよ…？ 画像のリストがある状況 画像でリストを作る感じです。複数のliタグの中にそれぞれ大きさの異なる画像があるという状況。liの幅と高さは400x200pxとします。 そのままリサイズすると…？ imgの横幅を400pxにリサイズするとします。例えば800x600pxの画像は400x300pxにリサイズされて、ちゃんと表示されます。 でも、800x300pxの画像だと、400x150pxにリサイズされて、50pxの余白ができちゃうわけですね。 これを解決したいなぁと。 画像が横長の場合 先ほどの800x300px
男性歓喜！クリックするとおっぱいが揺れる·oppai.js MOONGIFT
oppai.jsはタップ（クリック）するとおっぱいが揺れる画像を作り出すJavaScriptライブラリです。 Webというのは基本的に静的なものが多いので、一部でも動いているとインパクトがあります。アニメーションGIFしかり、動画しかり、そしておっぱいしかり。 何もしていない場合 ちょっと揺れているのが分かるでしょうか？ こんな女性のサンプルも。 こちらはちょっと貧乳…？揺れが小さいようななんというか。 oppai.jsはおっぱいの位置を四角で定義するようです（いや、おっぱいは丸いよ、丸いんだよという意見はさておき）。そして当然右と左があるので個別に定義します。後はお気に入りの写真と右乳、左乳をパラメータに渡すだけで動くおっぱい画像のできあがりです。 追記：しかもスマートフォン（iPhoneで確認）だと加速度センサーによって振ると揺れるアクション付きです！これはぜひiPhoneでばんばん揺
PHPの画像処理ライブラリ「DmImage」を公開しました - demouth::blog
PHPで画像処理といえば GD ImageMagick 辺りを使うのが一般的でしょうか。軽いノリで小さいアプリを実装する時はGDをが向いてると思います。 でもGDってなかなかクセがありませんか？何が違うのか分からない様な似た名前の関数があったり、半透明画像を扱う際は必ず呼ばないといけない関数があったり、テキストの描画が面倒、色の指定が面倒、など。 その辺のややこしい処理をラップして、よく使う機能を実装したライブラリ「DmImage」を作りました。 このライブラリを使うと色々出来ますが、 画像リサイズ ファイル出力 DataSchemeURI変換 ActionScriptやCanvasAPIの様な図形描画、色指定 Instagram風の画像加工 フォントのバンドルによる綺麗なフォント描画 辺りが特徴になるかと思っています。 では、早速使い方の説明です。 使い方 使い方1 〜 画像の表示 サイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
Copy as Markdown
