タグ

webpに関するjazzanovaのブックマーク (6)

  • ImageFluxを利用した画像配信の最適化〜動的リサイズとWebP変換〜 | メルカリエンジニアリング

    SREチームの@cubicdaiyaです。今回はメルカリにおける画像配信とImageFluxを利用した画像の動的なリサイズとWebP変換の導入によってアプリのデータ通信量を大幅に削減した事例について紹介します。 ImageFluxはクラウド画像変換サービスです。URLに画像変換用のパラメータを組み込むことで画像データの拡大・縮小やオーバレイ、フォーマット変換等が実現できます。 メルカリにおける画像データ メルカリのアプリ上で発生するデータ通信の大部分はタイムラインや検索結果に表示される画像データが占めています。種類はいろいろありますが例えば、 商品画像 プロフィール画像 バナー画像 といったものが挙げられます。特に商品画像はデータ量がとにかく多く、毎日百万個単位で増加するほか、タイムラインや検索結果をはじめ、多くの機能で活用されています。 ImageFluxを利用した画像変換でデータの通信

    ImageFluxを利用した画像配信の最適化〜動的リサイズとWebP変換〜 | メルカリエンジニアリング
  • Lobiで画像のWebp変換による通信量削減と調査のためにAWS Athenaを利用した話 - KAYAC engineers' blog

    Lobiチームの吉村(moulin)です。 今回は、Lobiのチャットの投稿画像やユーザアイコンなどの画像ファイルをwebp形式で配信して通信量を削減した話について紹介します。 TL;DR 画像配信について 画像変換サーバのwebp変換対応 AWS Athenaを使ったCloudFrontのログの集計 画像配信について Lobiの画像配信ではAWS CloudFrontを利用しています。ユーザーから画像のリクエストがあった場合、CloudFrontにキャッシュが存在すればキャッシュを返します。無い場合は画像変換サーバにリクエストを渡して、画像を生成してもらいます。画像変換サーバが生成した画像をCloudFrontが受け取り、画像をユーザに配信します。一度ユーザに配信がされるとCloudFrontはその画像をキャシュするため、次からは同じ画像のリクエストが来た場合は画像変換サーバーにリクエス

    Lobiで画像のWebp変換による通信量削減と調査のためにAWS Athenaを利用した話 - KAYAC engineers' blog
  • 画像最適化戦略 WebP 編 | blog.jxck.io

    Intro サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 3 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 > 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 WebP 従来の Web において、画像は用途毎に PNG/JPEG/GIF などを使い分けていた。 一般的には以下のような使い分けが行われている。 WebP は Google が開発した画像フォーマットであり、これら三つの用途全てに適した上で、さらに小さいサイズに圧縮できる場合が多い。 また、 WebP

    画像最適化戦略 WebP 編 | blog.jxck.io
  • WebPでモバイルアプリの通信量を劇的に削減する - クックパッド開発者ブログ

    モバイルファースト室の @slightair です。 クックパッドの iOS/Android アプリは、少し前のバージョンからWebP形式の画像をサーバから取得して表示するようにしています。 この記事では、なぜ画像形式をWebPに切り替えたのか、また切り替える上で注意した点などを説明します。 Cookpad アプリと画像 クックパッドのアプリはユーザさんに投稿していただいたレシピを表示するアプリケーションです。その性質上、レシピ画像や調理手順、検索画面のサムネイルなどたくさんの画像をサーバから取得して表示する必要があります。 画像の数が増えたりサイズが大きくなればなるほど通信量が増えます。最近はスマートフォンの画面サイズがどんどん大きくなっているので、それに合わせて取得する画像を大きくしていくとさらにファイルサイズが増え、通信量も増えていってしまいます。 サーバとやりとりするデータが多くな

    WebPでモバイルアプリの通信量を劇的に削減する - クックパッド開発者ブログ
  • cdnconnect

    Là thương hiệu nhà cái nằm trong top những sân chơi đẳng cấp hàng đầu châu Á hiện nay. Dù thời gian […]

  • iOS+Swift でいい感じに WebP を扱うサンプル。ついでにUICollectionViewの画像リクエストのチューニングについて色々 - Qiita

    iOS+Swift でいい感じに WebP を扱うサンプル。ついでにUICollectionViewの画像リクエストのチューニングについて色々iOSSwiftWebP Swift + UICollectionView + WebP SDWebImage がWebPを簡単に扱うオプションを提供していたので使ってみました。(主にパフォーマンス調査) pod 'SDWebImage/WebP' を足せばSDWebImageで勝手にWebPを扱えるようになります。 使い方は、SDWebImageを普段使うような感じで、 imageView.setImageWithURL(NSURL(string: "http://path/to/image.webp")) WebPは目に見えてサイズが小さくなるので、パフォーマンス厨にはたまりません。 WebP と JPEG のサイズ比較 WebP: http:/

    iOS+Swift でいい感じに WebP を扱うサンプル。ついでにUICollectionViewの画像リクエストのチューニングについて色々 - Qiita
  • 1