WebPとLazyLoadを使って表示速度を向上させる 東京新宿のホームページ制作会社イッティ
ホームページの表示速度を上げるには、デバイスごとの画像ファイルの切り替えが有効です。画像フォーマットのWebPと、LazyLoadで遅延読み込みで、表示速度を体感できるパフォーマンスにします。 表示速度が異常に遅いホームページはSEOにも不利になることから、近頃はホームページの表示速度に関してセンシティブになっています。 ホームページの表示が遅い主な原因は画像ファイルの読み込みです。 今回は、PCとスマートフォンそれぞれに最適な画像ファイルを読み込むようにします。 さらにLazyLoadを使って遅延読み込みさせて表示速度を早めます。 また、画像ファイルに「WebP」フォーマットを使って、画像の軽量化を図ります。WebPフォーマットが対応しているブラウザにはWebP画像を表示させ、未対応のブラウザには通常のjpgやpng画像を表示させます。 デバイスに合わせたサイズの画像を読み込む Lazy
WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし | アイデアマンズブログ
TOP > WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし WebP Safari 14 で次世代画像フォーマットWebPへの対応が発表されました！ Safari 14 Beta Release Notes | Apple Developer Documentation かれこれ20年近く延々と続いた次世代画像フォーマット戦争に、WebPがついに終止符を打ちそうです。 WebPは、私の感覚としては現在のWeb画像のデータサイズを半分以下に削減できます。しかも主要なJpeg、PNG、GIF(アニメーション)をすべてカバー。Web画像のスタンダードは、一気にWebPに流れていくでしょう。 実は2016年に
pictureタグを使ったレスポンシブイメージの実装方法
マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook 画像のレスポンシブ対応には、これまでずっとベストな解決策と言えるものはありませんでした。 しかし、ようやくレスポンシブサイトにおける画像最適化の問題に決着がつきそうです。 それが、picture要素によるレスポンシブイメージの実装です。 複雑なスクリプトを使うことなく、HTMLだけで画像を切り替えられる picture 要素の書き方と実践的な使い方を紹介します。 picture要素とは picture要素は、HTML5.1で追加されたタグです。 pictureは要素単体では動作せず、source と img の要素を子要素に持つことで機能する入れ物要素です。 複数の画像リソースの中から、 ブラウザの状況
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編 | アイデアマンズブログ
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編 WebP 「WebPは軽いけど画質が悪い」と安易に誤解しないために 従来のJPEG画像やPNG画像をWebPに変換する代表的なコマンドがcwebp です。 ImageMagickのconvertコマンドのように多くの開発シーンで使われると予想されます。実際にWordPressなどのプラグインの多くも内部ではこのcwebpコマンドを使用しています。 このcwebpには意外と多くのパラメーターがあって、設定に迷ってしまいます。 企業サイトのWebP導入を支援する弊社が、現時点のおすすめパラメーター設定例を紹介します。 知らないと、「WebPは確かに軽いけど画質がいまいち...」という誤解を招いてしまいます。スムーズなWebPシフトのためにご参考ください！ まずは結論から JPEG画像からWebPに変換す
webp画像ファイルの作成：tech.ckme.co.jp
ここでは新しい画像フォーマットwebpファイルの作成方法について記述する。 webpのツールはhttps://developers.google.com/speed/webp/downloadからダウンロードできる。 作成にはその中のcwebpを使う。 JPEGの様な非可逆、PNGのような可逆圧縮の両方に対応する。 高圧縮率時にJPEGとの画質の差が際立つようになる。 逆に低圧縮率（すなわちファイルサイズが大きくなればなるほど）JPEGとそれほど変わらなくなる。 簡単に言えば品質は二の次であるサムネイルファイルなどの圧縮などに向いている。 ロスレス圧縮ではPNGよりも高圧縮となる。 使い方 cwebp [オプション] 入力元ファイル名 -o 出力先ファイル名 -oを指定しなかった場合、ファイルは作成されず、圧縮した場合の結果だけが表示される。 画像品質関連 プリセットオプション -pres
carrierwaveでS3にアップロードする際にアップローダー毎にメタデータを設定する - メグリ株式会社
carrierwaveでjson等をアップロードする際に日本語が文字化けしてしまったのでcharset等のメタデータを設定するメモ。 Gemfile # Gemfile gem 'carrierwave' gem 'fog', require: 'fog/aws' carrierwaveの設定 # config/initializer/carrierwave.rb CarrierWave.configure do |config| config.storage = :fog config.directory_permissions = 0777 config.fog_credentials = { provider: 'AWS', aws_access_key_id: アクセスキー, aws_secret_access_key: シークレットキー, region: ap-northeast
新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？ | アイデアマンズブログ
TOP > 新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？ 新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？ WebP Web画像最適化 表示高速化 新社会人のみなさんが初出社を迎えた会社も多いでしょう。 今日はWebP対応/非対応ブラウザに向けた適切な振り分けについて、新人さん(...が今WebPなどを使うかどうかは置いといて...)にもわかりやすく解説します。 過渡期のWebPはブラウザ振り分けが必須 2019年4月現在、WebPに非対応のブラウザもまだまだ多いので、WebPを使う場合はブラウザの種類やバージョンによる振り分けが必要です。 つまり、ひとつの画像について、WebPに対応したブラウザでは軽いWebPフォーマットで、対応していないブラウザで
【画像軽量化】WebPにそろそろ対応したほうが良さそうなので現時点で最適方法の考察 | 株式会社ウェブ企画パートナーズ
対応方法について 基本的には WebP 画像を作成後、 img タグに直接 .webp のファイル名で記述すれば対応できるのですが、 <img src="xxx.webp"> WebP に対応していないブラウザもあるため（特に Safari）、従来画像と共存させる必要があります。 共存させることを前提とした場合、今の時点での対応方法については大きく２種類が考えられます。 １，picture タグを使う ２，htaccess で制御する 結論から言うと、htaccess での対応が良さそうですが、それぞれの対応について解説していきます。 １，picture タグを使う場合 picture タグで対応する場合、下記のように記述することで対応することができます。 <picture> <!-- WebP用画像 --> <source srcset="xxx.webp" type="image/we
Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング
Mercari Advent Calendar 2020の14日目は、Developer Productivity EngineeringのNetworkチーム所属の@catatsuyがお送りします。 今回のエントリーでは画像変換とGoogle社が開発した画像フォーマットであるWebPに関して紹介します。 適切なサムネイル画像のサイズと画質 現在ではiPhoneのRetinaディスプレイのように、実際に画面に表示されるサイズよりも大きなサイズの画像を要求する端末が一般的になりました。 現在のスマートフォンでは画面に表示されるサイズの2倍以上のサイズ（端末によっては3倍に対応しているものもある）の画像を用意しなければ綺麗に表示されません。サムネイル画像の綺麗さはUXに直結しますし、サービスによっては画像の綺麗さがクリック率や売り上げに貢献するケースもあるでしょう。 しかし大きなサイズの画像を
carrierwaveで画像フォーマットを複数持つ方法 - アトラシエの開発ブログ
carrierwaveはサンプルを読む限りでは保存形式をjpegとかpngとかに決め打って、versionではリサイズしかしないのが一般的な使い方のようです。 しかしこれだと「ネイティブアプリではwebp形式で配信し、ブラウザにはjpeg形式で配信したい」というようなユースケースに対応できません。 carrierwaveはこういったフォーマットのマルチ化ができないのかと思っていたのですが、コードレベルでちょっと工夫すれば簡単にできました。 class PictureUploader < CarrierWave::Uploader::Base version :limit_500x_jpeg do process convert: 'jpeg' process resize_to_limit: [500, 10000] end version :limit_500x do process c
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
WebP変換 & 画像キャッシュサービスをサーバレスで構築する - Feed re:Architect vol.1 - - Sansan Tech Blog
Eight事業部 Platform Unit / Engineering Manager の 藤井洋太郎(yotaro) です。 前回、以下のRuby on Lambdaを使った画像処理基盤の記事を書かせていただきましたが、 今回の記事では少し前に、Eightフィード機能の高速化の際に行った、「画像フォーマット変換、リサイズ、キャッシュサービスをサーバーレスで構築した話」をしたいと思います。 Eightフィード Eightのメイン機能として、「ニュースフィード」があります。 この機能は、これまでに名刺交換をした「人」や「企業」に関連するニュースや更新情報を届けるものです。例えば、 役職変更、転勤などの人事異動情報 企業のプレスリリースなどの最新ニュース ユーザや企業による最新動向 など「ビジネスに必要な情報」が各ユーザにパーソナライズされた形で届きます。 サクサク動かない。原因はOGP画像
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
