画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」 | bl6.jp
imgViewer2は画像のズームとパン機能を備えたjQueryプラグインです。Googleマップのように、スクロールやボタンから画像の拡大・縮小ができたり、ドラッグしながら拡大した画像を移動できたりといったことが可能です。 以下のページからimgViewer2の実際のデモ動作をチェックできます。なお、こちらはFixed size imageになります。 デモ デモページに表示されている画像内にある「+」と「-」ボタンから、画像を拡大したり縮小したりできます。そのほか、Googleマップのように上下にスクロールすることでも拡大・縮小が可能です。 拡大された画像は、ドラッグすることで好きな位置に移動させることができます。サクサクと動作するのでとても使い勝手がいいですね。 またタッチにも対応しており、スマホからだとピンチアウトやピンチインを行うことで画像の拡大・縮小ができます。もちろん「+」「
[WordPress]Ver5.3メディアアップロード時の強制リサイズ問題と解決方法 | Re35
はじめに Ver5.3より前のバージョンでは、アップロードした画像は、フルサイズとして保存されるものは強制的に圧縮やリサイズは行われませんでした。 例えば一眼レフで撮影した幅4000pxの画像をアップすると、 フルサイズ4000px / 大サイズ2000px / サムネイル 600pxのような状況に応じての使い分けができていました。 しかし、ver5.3からは一辺が2560pxより大きい画像の場合は2560pxにリサイズされ、画像のファイル名に”-scaled”が付与されるようになりました。 Ver5.3ではフルサイズが強制的に2560px以下になってしまう 私のような一眼レフが趣味の人や、元の画質で提供したいと思う人にとっては、間違いなく厄介な仕様変更です。 しかもリサイズ時間がかかるため、アップロードに時間もかかります。 海外の方も戸惑っているようです。以下WP質問サイト（英語） ht
![[WordPress]Ver5.3メディアアップロード時の強制リサイズ問題と解決方法 | Re35](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfe50ec5078549cff7c7d151bb5cc52ac2dd3dea/height=288;version=1;width=512/https%3A%2F%2Fre35.org%2Fwp-content%2Fuploads%2F062A1989.jpg)
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
EWWW Image Optimizer の設定方法と使い方
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressで多くのコンテンツを投稿するようになると、自然と扱う画像の枚数も増えて行くことだろう。画像ファイルはサイトの表示速度を低下させるという問題がある。サイトの表示速度が遅いと、ユーザビリティが下がり、離脱率が大きくなってしまう。 だからと言って、コンテンツの画像の数を減らすのはナンセンスだ。 そこで利用するのが、画像のサイズを圧縮してくれる「EWWW Image Optimizer」というプラグインだ。 今回は、EWWW Image Optimizerの設定方法と使い方を紹介していく。
『waifu2x』とは？AIで画像を補完&拡大する便利ツール | Ledge.ai
この画像、もーちょい大きいの無いのかなぁ…。 無理に拡大してもドットがガッタガタになっちゃうしなー。 あー、JPEG圧縮かけすぎて色壊れとる！修正めんどくさいー！ こんなシーンで困った経験、誰にでも多少はありますよね。今回ご紹介するツールなら、その問題を完全にこの世から無くすことも可能… かも知れません。 画像をぶっ壊さずに、AIによる自動補完で美しく拡大してくれる無料ツール『waifu2x』が大幅にアップデート。リリース当時にはイラスト（2次元画像）オンリーだった仕様から 本格的に写真画像にも対応 し、精度もアップしてくれたのです。 ※リリースは7月くらいだったみたいですが waifu2xとは？つまり何をどーしてくれるツールなのか。 waifu2x 簡単に機能を説明すると、要するに『画像を拡大したときに足りなくなる色情報を人工知能が予測して補完。いい感じに拡大処理を実行してくれる無料オン
Html2Canvasでwebページのスクリーンショットを取ろう
JavsScriptを使って、スクリーンショット及びファイル保存を行う方法について、調べてみました。 以下まとめておきます。 1、html2canvas html2canvasをつかって、画面キャプチャ及び、キャプチャした画面をダウンロードする サンプルをつくってみました。 まず、次のサイトからhtml2canvas.jsを取得します。 https://github.com/niklasvh/html2canvas/releases (1) HTML スクリーンショットのimgをクリックしたら、プレビューダイアログを表示して、キャプチャした画面を表示して、ダウンロードの<a>タグを表示して、クリックしたら、ファイル保存するHTML ファイルのサンプルです。 ※svgをHTML内で使うときは、html2canvas.svg.jsも定義してください。 <!DOCTYPE html> <html
Googleが低解像度画像を爆速で高画質化する機械学習を使った技術「RAISR」を発表
毎日ウェブ上では無数の写真がシェアされていますが、アップロードされる写真の解像度は撮影機材によってさまざまで、低解像度の画像は時に引き延ばされてジャギーまみれになることがあります。据え置き機・モバイル機ともに高解像度ディスプレイの普及が進む中で、「見やすい低解像度画像」が必要とされつつあるのですが、機械学習を用いた新技術「RAISR(Rapid and Accurate Image Super-Resolution)」によって、リアルタイムで「低解像度画像の高品質バージョン」を生成できるようになります。 Research Blog: Enhance! RAISR Sharp Images with Machine Learning https://research.googleblog.com/2016/11/enhance-raisr-sharp-images-with-machine.
[Bootstrap] レスポンシブイメージを常に正方形に | きほんのき
Twitter Bootstrapでレスポンシブ画像を常に正方形にする方法のメモです。 HTML <div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> CSS .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position:absolute; } これでimgタグの高さが横幅にあわせて変化し、常に正方形になってくれます。なお、横長画像の場合は下が
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
Compassで簡単にCSSスプライトを実現 - 過去記事 - [SMART]
簡単なCSSスプライトの作成 CSSスプライトは、ページ読み込みを高速化する目的で使われるテクニックで、多数の画像を一枚画像にまとめて、サーバへのリクエスト回数を少なくします。 画像とCSSだけで実現できますが、1枚画像から一部分だけを表示する必要がるため、CSS側での作業が煩雑になりやすいのが難です。 Compassはこのスプライト用の1枚画像を自動で作成したり、CSS設定を出力したりしてくれます。 Compassによるスプライト生成は非常に簡単で、様々な利用方法をサポートしています。 スプライト画像の生成 まず、プロジェクトの画像ディレクトリにiconというディレクトリを作成し、そこにアイコンを保存します。 config.rb の images_dir に images を指定していれば、画像の保存パスは下記になります。 images/icon ここでは下記の画像を使います。 icon
まだTinyPNGで消耗してるの？「pngquant」+「Automator」で画像圧縮にかける時間を限りなくゼロにしよう！ - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2015-06-11 まだTinyPNGで消耗してるの？「pngquant」+「Automator」で画像圧縮にかける時間を限りなくゼロにしよう！ こんにちは。社内で最もカタチから入るWebデザイナー、アズマです。 最近は会社にコーヒーミルを持ち込んで手挽きコーヒーを淹れていますが、味の違いは完全にわかりません。意味ない。皆さん、デザインしてますか？ デザインはとても楽しいですね。 書き出したPNG画像を圧縮している時間を除けば。 画像圧縮にかける時間を圧縮したい！ ブラウザやアプリで表示する速さを少しでも上げてサービスの価値を高めるためには、 デザインしたファイルからPNGファイルを書き出すときに 圧縮して軽量化する必要がありますね。 圧縮率の高さとパンダのキモさに定評のあるTinyPNGなどのWebサービスを使っている方も多いのではないでしょうか。 ……が、しかし、この作業
EXIF情報を自動削除できるWordPressプラグイン「EWWW Image Optimizer」 | 妄想コバンザメ
EXIF情報を自動削除できるWordPressプラグイン「EWWW Image Optimizer」 投稿日:2014/09/16 最終更新日:2014/09/16 EXIF情報を自動削除する WordPress プラグインでは、ほとんどの場合「EXIF-Remove-ImageMagick」が紹介されている。 シンプルで使いやすいプラグインではあるが、プラグイン自体がかなり古い点、サーバに imagickモジュールが必要な点などから今回は見送ることにした。 代用としてインストールしたのが「EWWW Image Optimizer」であるが、EXIFの自動削除はもちろん、画像の圧縮も行ってくれて大変便利なプラグインなので最低限の設定を書いておきたい。 EWWW Image Optimizer の設定 EWWW Image Optimizer は手動アップロードの必要が無い為、通常のプラグイ
jQuery Plugin - 画像の拡大・縮小と移動（パン）を実装 - pan and zoom
画像の拡大・縮小と移動（パン）を実装するプラグイン「pan and zoom」を紹介します。 jQueryプラグイン「pan and zoom」このプラグインを使えば、指定した画像の拡大や縮小を行うことができます。 また拡大した画像を移動するカメラのような操作「パン」も行うことができます。 画像メインのサイトにおもしろい効果を付加することができますね。 それではデモページで画像の拡大・縮小と移動を行ってみてください。 「pan and zoom」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="pan and zoom のデモでーす。"> <title>pan and zoom - imageCloud</title>
jQuery Plugin - 画像のドラッグを実装 - JQ Image Drag
画像のドラッグを実装するプラグイン「JQ Image Drag」を紹介します。 jQueryプラグイン「JQ Image Drag」このプラグインを使えば、要素を指定するだけで簡単に画像のドラッグを実装することができます。しかも、ドラッグした距離（px）まで表示してくれます。 画面に入りきらない大きな画像をドラッグで表示させるユーザー補助や画像の一部をあえて見せないようにしてユーザーのドラッグで衝撃画像が！みたいなネタとして使えるかもしれません。 デモの画像をドラッグしてみてください。 「JQ Image Drag」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="description" content="jQuery Tridのデモでーす。"> <tit
サムネイル（アイキャッチ）画像のトリミング範囲を手動で決められるWordPressプラグインPost Thumbnail Editor | mono-lab（モノラボ）
WordPressにはアップロードした画像から、異なるサイズのサムネイルが自動的に作られます。 サムネイルは、元となる画像の左上を基準にトリミングされる為、 自分が見せたい被写体が画像の右下等にある時は、希望通りのサムネイルにはなりません。 Post Thumbnail Editor を利用すれば、トリミング範囲を手動で決める事ができますので 被写体をサムネイルの真ん中に持ってくることが可能になります。 使い方は非常に簡単です。 プラグインを有効化後、サムネイルを作り直したい記事の編集画面へ移動します。 編集画面の「アイキャッチ画像」欄をみると「Post Thumbnail Editor」という文字が表示されていますので、 クリックしてサムネイル画像の編集画面へ移動してください。 画像編集画面の右側に表示されている一覧が、 利用しているテーマおよびWordPressのメディア設定画面に登録
retina.js – Retina用に高解像度の画像を表示するJavaScript – creamu
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. とのことで、ページロード時に高解像度の画像があるかをチェックして、ある場合はそれを表示するようです。 retina.js is a JavaScript serves a high-resolution version of an image for a retina display. When your users load a page, r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://tacs-port.tech/blog/wp/blog-136/
Rename image uploads with width in filename
Safari 8 でサポートされたAPNG（アニメーションPNG）づくりにFlash Proをおすすめする理由
JPEGmini
