【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
WEBDESIGNDAY > INSPIRATION > Technique > CSS > 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 公開日:2020/05/03 /最終更新日:2020/05/25 CSS PICKUP Technique CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々
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」と指定しておく手法がよく用いられます。この手法に加
メルカリの写真検索を支えるバックエンド | メルカリエンジニアリング
メルカリのAI EngineeringでTech Leadを務めている中河です。今回は3/18に正式リリースされた「写真検索機能」を支えるバックエンド・インフラをシステム側からの視点でご紹介します。 写真検索とは 所謂、画像検索機能で商品名を知らなくても画像から商品を検索できる機能の事です。詳しくは下記の公式リリースをご覧ください。 about.mercari.com 基本的な写真検索の仕組みは、Deep Neural Networks (DNN)を使用して商品画像から特徴ベクトルを取得し、取得した特徴ベクトルをApproximate Nearest Neighbor Index(ANN Index)に追加して画像indexを構築。 検索時には同じく商品画像からDNNを介して特徴量ベクトルを取得し、ANN Indexから検索します。 アーキテクチャの概要 Figure1 上記がアーキテクチ
Google推奨の画像圧縮Webアプリ「Squoosh」が超便利！ - MACHOLOG
Googleが公開したブラウザ上で画像圧縮ができるWebアプリ「Squoosh」がかなり良かったので、使い方などを含めて紹介したいと思います。 画像圧縮はサイトスピード向上のための大きなカギ。 普段は撮影した画像をLightroomで一括圧縮して書き出しているものの、画質が甘かったり容量が重かったりと「一括圧縮は書き出してみないと分からない」というのが難点でした。 そこで「Squoosh」をサクッと試してみたところ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スプレッドシート│セル内で画像表示！IMAGE関数の使い方 | CGメソッド
