HTMLにimg要素で画像を表示する 2020年版 - Qiita
<img src="sample.jpg" srcset="sample@2x.jpg 2x, sample@3x.jpg 3x" alt="画像"> srcset属性を使うとRetinaディスプレイ/高解像度ディスプレイに対応した画像を置くことができる。 参考 レスポンシブ画像 - MDN レスポンシブ画像2: sizes属性 <img srcset="sample-320w.jpg 320w, sample-480w.jpg 480w, sample-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="sample-800w.jpg" alt="画像">
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
A Complete Guide for Responsive Images!
A responsive image is one whose size responds to changes in screen resolution. The concept of responsive images was triggered by the need to solve issues such as serving different image sizes to different devices, and manifested into using that flexibility for things beyond sizes, such as art direction, image types, and more. The responsive images specification was created only after the responsiv
Automatically Remove Backgrounds From Images | NVIDIA Technical Blog
Researchers from Adobe, the Beckman Institute for Advanced Science and Technology and University of Illinois at Urbana-Champaign developed a deep learning-based method that clips objects from photos and videos. Researchers have developed a number of different artificially intelligent programs to automatically subtract a background from an image, but most are based on colors. When presented with an
線画着色webサービスPaintsChainerを公開した - Qiita
http://paintschainer.preferred.tech こちらに先月記事にした線画の着色のデモを公開しました！！ 反響の大きかった皆さんに試していただけます！！（ちょっと期待値が上がり過ぎてないといいですがｗ） http://qiita.com/taizan/items/cf77fd37ec3a0bef5d9d 以前の記事『初心者がchainerで線画着色してみた。わりとできた。』はこちら。 ⇓そしてこちらがもじゃくっきーさんの使用例になっております。 GPUを使っている関係上アクセスが集中したりすると遅くなったりサーバーが落ちたりする可能性もありますが、生暖かく見守っていただければと思います。←たくさんの方に広まったこともあって、めっちゃ重くなっています。ぐぬぬぬ 画面はこんな感じっす。 線画ファイルを選択するととりあえず自動で塗ってくれます。 ※ただし、現状ではgifや
Lanczos関数による画像の拡大縮小
Lanczos関数を使って画像を拡大縮小すると、高品質な画像が得られるのだそうだ。 その仕組みを知りたいと思っていつも通りGoogleのお世話になったが、仕組みを解説した情報が見つからない。 見つかるのはLanczosという名前の紹介や、画像処理ソフトの紹介ばかり。 もっとも、探し方が悪いのかもしれないけど。 なぜ高品質な画像が得られるのか？ 他の方法とは何が違うのか？ 断片的な情報から調べていって、その理由が理解できた。 はっきり言ってこれを解説するのは難しい！ Lanczos関数 まずはLanczos関数について。 そもそもLanczosを何と読むのかが疑問だったが、ランツォシュと読むらしい。 数学者の名前。 Lanczos sinc関数とかLanczos窓関数とかLanczosフィルタとか、人によって色々な呼び方をしていて、正しい呼称がどれなのかはっきりしないが、Lanczos wi
Photoshopに慣れた人でも意外に知らない3つの圧縮モードの使い分け
Photoshopは画像の様々な加工ができるソフトです。 中でも拡大・縮小は、最もよく使われる機能の一つであり基本操作の一つです。 この画像のサイズを変える～リサイズの機能には、圧縮の仕方によって、ニアレストネイバー法、バイリニア法、バイキュービック法という3つのモードが存在しています。 Photoshopを使っている人でも意外と解りにくい画像の圧縮モードについて知っておくと良いでしょう。 シンプルに圧縮するならニアレストネイバー法 ニアレストネイバー法は、とてもシンプルな方法で圧縮を行うものです。 変更前と後の座標を、ピクセル単位で、計算・移動し、空いたところに変更前の色を割り当てています。 スポンサーリンク 元絵をそのまま拡大・縮小するイメージで捉えればいいかもしれません。 ドット絵の数を単純に増減して描き出すイメージの方式なので、色数は変わらず勝手に補正されることはありません。 色を
Google、機械学習で低解像度画像をシャープに見せる「RAISR」をサービスで実用化
米Googleは1月11日（現地時間）、表示する画像を高画質のままサイズを最高で75％削減できる機械学習採用の画像技術「RAISR」（Rapid and Accurate Image Super-Resolution）を、まずは「Google+」で採用したと発表した。将来的には他のサービスにも適用する計画という。 画像表示が速くなり、モバイルでの通信料も節約できそうだ。 RAISRは、Google Researchのリードサイエンティストであるペイマン・ミランファー博士が11月に発表した機械学習技術。従来の画質改善策である「アップサンプリング」（Photoshopなどで解像度を上げる機能）よりもシャープな結果を得られるとしている。
さらなる高みへ〜iOSのMERYでなめらかなスクロールを実現するためにやった4つのこと - peroli Developer's Blog
2016 - 07 - 01 さらなる高みへ〜iOSのMERYでなめらかなスクロールを実現するためにやった4つのこと list Tweet こんにちは。 iOS を主に担当していますアプリエンジニアのkazutoyoです。 MERYのアプリチームでは、チューニングを「さらなる高みへシリーズ」と名づけて、日々アプリの改善をしています。 今回はその中で行ったUITableViewやUICollectionViewのスクロール周りを滑らかにする改善についてやったことをご紹介したいと思います。 1. CALayerで角を丸くしている部分のパフォーマンスが悪い このようなカード型のViewが並んでいるCollectionViewがあったのですが、画像の角を丸くするのにCALayerで cornerRadius をつけているところのパフォーマンスがあまり良くないようでした。 これを次のようにCor
waifu2xとその派生ソフト一覧
最終更新: 2016/03/22 親子関係やコメント等は厳密なものではありません。詳しくは、リンク先でご確認下さい。 waifu2x http://ultraist.hatenablog.com/entry/2015/05/17/183436 https://github.com/nagadomi/waifu2x 作者: ultraist (@ultraistter) 本家。 ウェブサービス有。 計算に高性能サーバが必要なので、割安な使用料が時価のサービスを利用している。サーバの利用者が一時的に急増して使用料が跳ね上がると、サービスが一時停止することがある。 繋がらなくなったら、大体これが原因。数時間 - 数日待つか、下記のソフトウェアのいずれかをダウンロードして自分の環境で使いましょう。 (Windows 64bitかつGPUがnVidia製なら、Waifu2x-caffe。それ以外の環
無料で二次元画像を人工知能が補完してハイクオリティで1.6倍/2倍に拡大できる「waifu2x」
JPEG圧縮でノイズがのった画像やピクセルサイズが小さい画像は、拡大するとギザギザとジャギーがかかったような表示になってしまうことがあります。そのため、お気に入り画像の拡大画像が見つからない場合は、小さいサイズのまま保存しておくしかないわけですが、「できればこの二次元画像を拡大したい……！」というときに便利な無料サービスが、最新鋭の人工知能技術を使ってギザギザの画像でもノイズを除去してハイクオリティな画質で1.6倍～2倍に拡大できる「waifu2x」です。 二次元画像を拡大したいと思ったことはありませんか？ - デー http://ultraist.hatenablog.com/entry/2015/05/17/183436 waifu2x http://waifu2x.udp.jp/ waifu2xは、最新鋭の人工知能技術「Deep Convolutional Neural Networ
二次元画像を拡大したいと思ったことはありませんか？ - デー
うまくできましたか？ ボヤけたり、ギザギザになったりしませんでしたか？ waifu2xをお試しください。 (ブラウザの処理に影響されないようクリックで拡大おねがいします) waifu2xは、二次元画像を2倍に拡大するソフトウェアです。多くの二次元画像についてスゴイ級のクオリティで拡大できます。 waifu2xは、最新鋭の人工知能技術 Deep Convolutional Neural Networks を使って開発されました。 waifu2xの人工知能は、次の問に答えます。 いまから与える画像はある画像を半分に縮小したものである。縮小される前の画像を求めよ。 画像を拡大するのではなく、縮小される前の状態に戻します。 縮小されてないオリジナル画像を与えた場合も、やはり縮小される前の画像を答えます。 その画像は本来存在しないものですが、waifu2xはそれを想像で創ります。 二次元画像のJPE
アプリで利用する画像について - クックパッド開発者ブログ
ユーザーファースト室のhidaka（@kaa）です。 クックパッドアプリ内では元々同じレシピの画像を画面、環境によって様々なサイズで表示しています。 レシピの検索結果でのサムネイルや、レシピ詳細画面、写真の拡大表示時などなど。 その際、端末の解像度にあわせ無駄のないよう、表示領域にあわせて画像をリクエストしていました。 *画像配信にはtofuという配信システムが稼働しています http://www.slideshare.net/mirakui/ss-8150494 これでそれぞれの端末にあわせた画像を配信していましたが、今年あたりからさらに最適化が必要になってきました。 問題1 画面密度の上昇 端末のスペックが上がることにより、１インチあたりのピクセル数が増加しました。 retinaと言われていたiPhone 5で326dpiだったのが去年あたりからの高解像度端末の幅1440pxの機種(a
Xcode6でベクター画像を利用する。 - tomoyaonishiのブログ
Xcode6で密かにベクター画像が使えるようになっています。 これを使えば@1x, @2x, @3x画像を用意する煩わしさから解放されます！ 使い方は非常に簡単です。 PDF画像を@1xのサイズで書きだす。 AssetCatalogをクリックする New Image Setで画像セットを追加する 画像のようにAttributesのTypesをVectorsに変更する 作成したPDF画像を置く。 こうすれば後は今までと同じように画像を扱えます。 注意しなければいけないことは完全なベクター画像の対応というわけではなく、ビルド時に@1x, @2xなどの各PNG画像が書き出されるようです。ソースコード上で拡大や縮小ができるわけではないようです。 デザイナーの負担もエンジニアの負担もすごく軽くなりますね。 WWDC 2014 Session Videos - Apple Developer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canon breaks through with image sensor that can see in the dark
【エンジニアと人生】脳内プロトタイピングについて分析してみた | 高原工房
http://notchless.space/
深層学習でドット絵のような荒い写真を高画質化できるプログラムがGitHubに公開
『Xcode6でベクター画像を利用する。 - tomoyaonishiのブログ』へのコメント