グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2025年2月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG、
一方、Photoshopなど一部の画像編集ソフトではWebP形式に対応していない場合があり、WebP画像を保存しても閲覧などがしにくい欠点があった。これまでは、ユーザーの環境でWebP画像を編集するにはWindowsの付属ソフト「ペイント」などで開いて編集するか、ペイントで別フォーマットへ変換してから編集する必要があった。 この機能追加に対し、Twitter上では「やっとか！」「これでペイントを経由しなくてすむ」など喜びの声が上がっていた。 関連記事 Illustratorで起動不可の不具合、他社セキュリティソフトが影響 アドビが回避法を案内 アドビの「Illustrator」で起動できない不具合が発生している。他社のセキュリティソフトが競合していることが原因としており、その回避法を案内している。 「街並みが一瞬で人類滅亡後に」──Photoshopの画像ミックス機能が話題 荒廃した写真が
トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの
[レベル: 中級] 検索ユーザーのユーザー体験を向上させるための画像の最適化をコツを Google の John Mueller（ジョン・ミューラー）が Twitter の一連の投稿で共有しました。 PSA: If you change your image URLs, and you care about Image Search, remember to redirect them. While tweaking my site, I noticed PSI suggesting to change some of my image formats, and realized it's worth mentioning this again. pic.twitter.com/gDHAqJB6eC — 🍌 John 🍌 (@JohnMu) May 1, 2021 この記事では、それら
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」 – ワードプレステーマTCD
WordPressサイトの画像を軽量なAVIFに変換できるプラグイン「ShortPixel Image Optimizer」 2024.04.26
米GoogleのChromeや米MicrosoftのEdgeなど、主要Webブラウザが9月11日から重大なゼロデイ脆弱性に対処するアップデートをリリースしている。この脆弱性「CVE-2023-4863」は、GoogleのWeb向け画像フォーマット「WebP」のヒープバッファオーバーフローに関するもので、既に悪用されているという。 この脆弱性は、米Apple Security Engineering and Architecture（SEAR）と加トロント大学のCitizen Labが6日に報告した。 本稿執筆現在、Chrome、Mozilla Firefox、Brave、Microsoft Edgeがこの脆弱性に対処するアップデートをリリースしている。 Googleは公式ブログで、「CVE-2023-4863のエクスプロイトが存在することを認識している」とした。 また、米Stack Dia
September 7, 2024 Hacker News Reddit Lobsters RussianI want to provide a smooth experience to my site visitors, so I work on accessibility and ensure it works without JavaScript enabled. I care about page load time because some pages contain large illustrations, so I minify my HTML. But one thing makes turning my blog light as a feather a pain in the ass. The hurdleSee, a major win in traffic redu
Mercari Advent Calendar 2020の14日目は、Developer Productivity EngineeringのNetworkチーム所属の@catatsuyがお送りします。 今回のエントリーでは画像変換とGoogle社が開発した画像フォーマットであるWebPに関して紹介します。 適切なサムネイル画像のサイズと画質 現在ではiPhoneのRetinaディスプレイのように、実際に画面に表示されるサイズよりも大きなサイズの画像を要求する端末が一般的になりました。 現在のスマートフォンでは画面に表示されるサイズの2倍以上のサイズ（端末によっては3倍に対応しているものもある）の画像を用意しなければ綺麗に表示されません。サムネイル画像の綺麗さはUXに直結しますし、サービスによっては画像の綺麗さがクリック率や売り上げに貢献するケースもあるでしょう。 しかし大きなサイズの画像を
AVIF has landed
Back in ancient July I released a video that dug into how lossy and lossless image compression works and how to apply that knowledge to compress a set of different images for the web. Well, that's already out of date because AVIF has arrived. Brilliant. AVIF is a new image format derived from the keyframes of AV1 video. It's a royalty-free format, and it's already supported in Chrome 85 on desktop
こんにちは。GMOアドマーケティングのR.Mです。 はじめに 弊社が運営するコーポレートサイト・自社サービスサイトは、ユーザビリティ・SEO評価向上のためGoogleが提供するPageSpeed Insightsで定期的にサイトの評価をチェックしています。 分析レポートの「改善できる項目」のうち「次世代フォーマットでの画像の配信」の項目について、デザイナーとして改善に取り組める部分かと思いましたので、その実施プロセスを紹介します。 「次世代フォーマットでの画像の配信」をすることで何を実現するか WebPやAVIFなどの画像形式は、一般的にPNGやJPEGより圧縮率が高く、ダウンロード時間やデータ消費量を抑えられます。この画像形式での配信により、パフォーマンスの改善を実現します。 WEBページ表示速度のユーザビリティへの影響 2017年の少し古いデータにはなりますが、Googleの調査では、
次世代の画像ファイル形式「JPEG XL」はAVIF形式よりもファイルサイズが11％小さく画質は13％高いことが報告される
「JPEG XL(JXL)」は、独自の圧縮アルゴリズムを使用して、画像やイラスト、スクリーンショットを圧縮することができる次世代のJPEG形式です。そんなJPEG XLは従来の圧縮率が高い画像ファイルフォーマットである「AV1 Image File Format(AVIF)」よりもファイルのサイズが約11％削減されるだけでなく、画質の面でも約13％AVIFよりも優れていることが報告されています。 Jon Arne S.: "So Safari will support jxl 🥳 .…" - Mastodon https://mastodon.online/@jonarnes/110514451857948151 2021年10月に規格化されたJPEG XLは、GoogleのPIKやCloudinaryのFUIFを基に開発されました。JPEG XL形式は、オリジナルデータに戻せる可逆圧縮
【SEO対策】画像形式WebPでデータを軽減し、検索順位を上げよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そのなかでもみなさんが気になっているのはWebP（JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えた静止画像フォーマット）対応だと思います。実装にはいくつか方法があるのですが、まずどうやってWebP形式の圧縮画像を作ればいいのか。 一つひとつの画像を圧縮・WebP変換するにはGoogle謹製の画像処理サービス Squoosh がおすすめです、という話を前回させていただきました。しかし、このサービスの難点は、複数画像の一括処理がブラウザ上ではできないこと。 そう、「ブラウザ上では」。 コマンドライン版Squoosh 実はSquooshはコマンドライン版というものが存在します。というかむしろこっちが本命だと思われます。ちなみに今回の内容も非エンジニア向けなので、CLI（コマンドラインインターフェイス）と呼ばれるあの黒い画面にアレルギーが発症しない方はぜひトライしていただきたいです。 利用
Apple、iOS 14/macOS 11 Big Surのデフォルトブラウザ「Safari 14」がWebPフォーマットをサポートしたことで、App Storeのスクリーンショットを「WebP」に変更。
AppleがiOS 14/macOS 11 Big Surのデフォルトブラウザ「Safari 14」がWebPフォーマットをサポートしたことで、App Storeのスクリーンショットを「WebP」に変更しています。詳細は以下から。 Appleは2020年09月にリリースした「iOS 14/iPadOS 14」および11月にリリースした「macOS 11 Big Sur」のSafari 14とシステムベースで、Googleが開発した画像フォーマット「WebP」を正式にサポートしましたが、 これに伴い、MacやiPhone/iPadのApp StoreのスクリーンショットやAppleのWebサイト/サポートページで利用している画像フォーマットをWebPに変更しているようです。
世界のユニークな404ページを37サイトから集めてみた【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
404（ページが見つかりません）のエラーページは、ここまでステキにできる。海外の37サイトから集めた、思わず「いいなー」と言ってしまう404ページの例を紹介する。 ほかにも今回は良いネタが多めだ。SEO色の濃さはさまざまだが、いずれも知っておいて損はないネタだ。ぜひウォッチしておこう。 次世代の画像フォーマットAVIFでページ速度を最高速にオウンドメディアは売上アップに繋がる？ 繋がらない？ランキング要因じゃないのにグーグル社員はなぜmeta descriptionを推奨するのか？SEOにサイトマップは不要!? SEO業界の重鎮が警告CookieでパーソナライズするページをGooglebotが見るとコンテンツはどうなるのか？リッチリザルトに関するよくある質問×10とっても簡単、サイトマップからURL一覧を瞬時に取得する方法セキュリティ問題の誤検出報告ボタンをグーグルがお試し提供グーグルアナ
Google、最新のPhotoshopとSDK、WebP 1.2.0に対応したPhotoshop用WebPプラグイン「WebPShop 0.3.2」をリリース。
Googleが最新のPhotoshopとSDK、WebP 1.2.0に対応したPhotoshop用WebPプラグイン「WebPShop 0.3.2」をリリースしています。詳細は以下から。 GoogleのWebM Projectは現地時間2021年02月09日、Googleが開発している新しい画像フォーマットWebPを、Adobe Photoshopで扱えるようにするプラグイン「WebPShop」を0.3.2へアップデートしたと発表しています。 WebPShop 0.3.2 Updated to Adobe Photoshop Plug-In and Connection SDK 2021 v2. Updated to WebP 1.2.0. Minor fixes. Removed bin/ folder because the binaries are now available at
画像を保存するときに「.webp」という拡張子を見かけたことはないでしょうか？これはWebP（ウェッピー）という、Googleが開発した画像ファイル形式です。 JPEGやPNGなどの良いとこ取りをしている仕様なうえ、画像ファイルが軽くWebサイトの表示速度改善に役立つと言われています。 そんなWebPについてを、本記事で解説しています。使用するメリットデメリットや、WebP⇔JPEG・PNGの変換方法などを解説しています。ぜひ参考にしてください。 WebP（ウェッピー）とはどんな拡張子？ WebP（ウェッピー）とは、2010年にGoogleが開発・発表した画像ファイル形式です。拡張子は「.webp」です。従来のJPEGやPNGよりも、画像の劣化を最小限に抑えつつサイズの軽量化を可能にしています。 ただしWebPはビットマップ画像なので、画像を拡大すると画質が劣化するのはJPEGやPNGなど
PNG・JPEGをWebP画像に一括変換
Web（ブラウザ）上ですぐに使えるWebP変換ツールです。 複数のJPEG、PNG、GIFをまとめてWebP形式に変換します。 WebPはGoogleが開発している軽量な画像形式です。 一部のブラウザや端末ではWebP画像の表示に対応していません→ブラウザ対応状況 ウェブでのWebP表示にはpictureタグを使うと良いでしょう。 WebP未対応ブラウザではこのツールの利用はできません。Chromeでのご利用をおすすめします。 ファイルの拡張子は◯◯.webpに変換されます。 画像はパソコンやスマホのブラウザ上で処理されます。 サーバーなどにも送信されないため、画像を誰かに見られる心配はありません。 画像サイズ変更ツールやPNG→JPEG変換ツールもどうぞ。
It’s High Time to Replace JPEG With a Next-Generation Image Codec
I can be quite passionate about image codecs. A “codec battle” is brewing, and I’m not the only one to have opinions about that. Obviously, as the chair of the JPEG XL ad hoc group in the JPEG Committee, I’m firmly in the camp of the codec I’ve been working on for years. Here in this post, however, I’ll strive to be fair and neutral. The objective is clear: dethroning JPEG, the wise old Grandmaste
ウェブサイトのトラフィック量を軽減するためにGoogleが開発している画像フォーマット「WebP」は、非可逆圧縮のJPEGや可逆圧縮のGIF、PNGへの置き換えが意図されており、APNGと同様にアニメーションに対応しています。WebP形式のアニメーションを使うべく、動画ファイルからアニメーションWebPへの変換をブラウザ上で行えるウェブアプリが「Video2WebP」を、実際に使ってみました。 Video2WebP https://video2webp.mattj.io/ 今回は焼き肉を焼く様子を撮影したMP4形式のムービーをアニメーションWebPに変換してみます。ムービーのファイルサイズは4.59MB、フレームサイズは560×420ピクセル、ビットレートは約1.5Mbps、フレームレートは29.97fpsです。 Video2WebPの「Select and convert」で「ファイルを
Stay organized with collections Save and categorize content based on your preferences. WebPShop, the plug-in for opening and saving WebP images directly from Adobe Photoshop, is now available on GitHub under an Apache 2.0 license. Installation Follow these instructions. Encoding options Compression settings can be adjusted during the "Save" command. The quality goes from lossy 0 (the image is degr
[レベル: 中級] iOS 版 Safari が WebP をサポートしました。 しかしながら、MacOS 版 Safari は未サポートのままです。 iOS 版 Safari が WebP を表示 こちらは、JPEG 画像です。 みんな見えているはずです。 こちらは、WebP 画像です。 ブラウザによっては見えていないかもしれません。 iOS 版 Safari 14 が WebP をサポートしたので、どちらの画像も表示できます。 Safari が WebP に対応したのはとても嬉しいニュースです。 WebP 利用の最も大きな懸念がなくなりました。 ところが…… MacOS 版 Safari はサポートせず MacOS 版（デスクトップ版）の Safari は バージョン 14 でも WebP に対応していないままです。 表示できていません。 インスペクタを見ると WebP には読み込みエ
1. WebPとは？Googleが開発している静止画像フォーマット です。 特徴としては、高圧縮率、アルファチャンネル可、アニメーション可能、と言ったところです。 アニメーションできる画像形式としては animated gif とか APNG とかもありますが、クオリティとファイルサイズと将来性の面で WebP が有利かなと思う次第です。 （主要なOS・ブラウザは対応している） 本記事では、アニメーション WebP の作り方を解説します。 2. 何でアニメーションを作ればいい？アニメーション制作ツールは何でもいいですが、最終的に「連番 PNG ファイル」に出力できる物を使ってください。 筆者は After Effects が良いと思います！ 3. 何で変換するの？「アニメ画像に変換する君」Microsoft Store でダウンロード(無料) ググると良く紹介されているツールですが、大きな
Critical libwebp Vulnerability Under Active Exploitation - Gets Maximum CVSS Score
Google has assigned a new CVE identifier for a critical security flaw in the libwebp image library for rendering images in the WebP format that has come under active exploitation in the wild. Tracked as CVE-2023-5129, the issue has been given the maximum severity score of 10.0 on the CVSS rating system. It has been described as an issue rooted in the Huffman coding algorithm - With a specially cra
要約： 次世代画像フォーマットWEBPは、SEO対策のメリットが多数ある。 Googleの基本コンセプトを理解した上で、いいものを選択していく力をつける。 ブラウザの負荷対策として適切なフォーマットと適切なサイズで画像設置する。 次世代フォーマットWebP Google PageSpeed Insightsのチェック項目に【次世代フォーマットでの画像の配信】がアラートとして追加されてからしばらく経ちました。 しかしながら、未だにjpegやpngフォーマットのみを使用し続けているサイトが多くあります。 対象URLを調査すると、サイトに掲載されている画像が、正常に次世代フォーマット化されている場合は以下のように「合格した検査」として表示されます。 つまり、WebPを用いてサイトを作ることをGoogleは推奨していることから、SEO効果も高いことが伺えます。 合格した検査 WebP対応は難しくな
こんにちは、21新卒エンジニアの柳です。 この度、プレスリリースのサムネイル画像とプレスリリース詳細ページ内で掲載されている画像の画質改善を行いました。 今回行った画質改善の対象となる条件は以下の通りです。 12月中旬以降にアップロードして頂いた画像サイズが十分に大きい画像トップページ（https://prtimes.jp） で表示されているプレスリリースのサムネイル画像プレスリリース詳細ページで表示されている画像 画質改善前のプレスリリース画像の問題点 PR TIMESでは画像をエディタからアップロードしたときに、実際に画面に表示されるサイズと同じサイズにリサイズ処理をして、生成したサムネイル画像や詳細ページの画像をそのまま配信していました。PR TIMESのサービス開始時点であれば、画面に表示されるサイズと同じサイズの画像を配信することが画像の最適化として良い対応でした。 しかし昨今、
WebP対応の注意点 WebPを使ううえでの注意点が2つありますので、確認してみましょう！ 対応ブラウザの確認 まずWebPに対応させる場合の注意点として、WebPに対応しているブラウザでは、.webp の画像が吐き出され、対応していないブラウザの場合 .png など一般的な画像が書き出されるようにする必要があります。 ダウンロードしても開けない WebPはダウンロードしても画像として保存されません。 その為、ユーザーにダウンロードさせることを目的とした画像の場合に限っては、WebP以外の形式にしてあげるといいでしょう！ backgroundでWebP使う場合 CSSでは分岐という概念がなく、pictureタグも使用できないため、jsプラグイン「Modernizr」を使用。 インストール方法、CSSの記述方法については以下をご確認ください。 プラグインインストール方法 1.Add your
【2022年最新】WebPよりも軽いAVIFとは？最強の次世代画像フォーマットの解説と作り方 | 株式会社ココログラフ
コアウェブバイタルズの影響も受けて、表示速度に関する知識や、画像の圧縮に関してなどの情報集めに奔走している運営者様は多いでのはないでしょうか？ 現在では『WebP』がブラウザの対応もだいぶ浸透し、使いやすく圧縮率の高い画像フォーマットとな理ましたが、今回はなんとそのwebpをも超える軽量化を可能にした画像フォーマットである『AVIF』というものについて解説します。 AVIFとは？ AVIFとは、AV1 Image File Formatの略称で、画像や画像シーケンスをAV1で圧縮してHEIFファイル形式で保存するための画像ファイルフォーマットの仕様です。 HDR（ハイダイナミックレンジ）カラーをサポートしているので、アルファチャンネルやアニメーションにも対応可能。 jpgと比較すると約95％以上、WebPと比較しても30％近くのサイズ削減が可能なフォーマットとなっています。 元々は、有料ラ
「Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」」について記述した記事です
公式ツールのcwebp/dwebpをインストールcwebp/dwebpは直接公式サイトからダウンロードする方法もありますが、Macを使っている方なら以下の方法で簡単にインストールできます。 brew install webpインストールが完了したらバージョン確認してみてください。 cwebp -versionバージョンが表示されれば、インストール完了です。 cwebp/dwebpの使い方cwebpとdwebpの使い方も簡単にご紹介します。 WebP形式からPNG形式に変換する場合はdwebpを使います。使い方は以下になります。 dwebp image.webp -o image.pngdwebp [WebP形式ファイル指定] -o [変換後のPNG形式 or PPM形式ファイル名] PNG、JPG形式をWebP形式に変換する場合はcwebpを使います。以下の方法で使います。 cwebp i
Resize large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions
表示できないOS・ブラウザを把握する WebP（ウェッピー）は新しい技術なので、まだ対応できていないOS・ブラウザが多数あります。 今日時点でWebP（ウェッピー）に対応しているOS・ブラウザは以下の通り。リンク先の情報は常にアップデートされますので、実際にご自身で確認してみてください。 iOSは13まではダメで、14からOK。MacのSafariは、BigSurではすでに対応しているのですが、それより前のOSは表示できません。また、IEは共通して対象外となります。 今後リリースされるデバイスやOSは大丈夫でしょうが、もし古いOSやデバイスをサポートしなければならないようであれば、設計には注意が必要です。 非対応ブラウザで表示するための記述をする 上記のようにWebP（ウェッピー）を表示できないものがありますので、そういったデバイスのために、代わりにJPGやPNGを表示するための記述をしな
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
Photoshopが待望の「WebP」形式に対応、編集や保存が可能に
Lighthouseの点数を50点以上改善したお話 – TravelBook Tech Blog
Googleのジョン・ミューラーが画像SEOのTIPSを共有
Maximally optimizing image loading for the web
WebPコーデックの重大な脆弱性対処でChromeなど主要Webブラウザが緊急更新
WebP: The WebPage compression format
Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング
WEBページ上での表示に最適な画像形式で、素材をつくる
WebP（ウェッピー）とは？ほかのファイル形式との違いや変換方法を解説
無料で動画ファイルをブラウザ上で簡単にアニメーションWebPに変換できる「Video2WebP」
WebPShop | Google for Developers
iOS版SafariがWebP画像をサポート、でもMacOS版はまだ
アニメーション WebP の作り方 | OPENSPHERE Inc. Blog
WebP導入のメリット・デメリットと対応ブラウザ
新卒エンジニアがプレスリリース画像の画質改善に取り組んだ話
【CSS3】BackgroundプロパティでWebPを使う方法
Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム
Macコマンドで簡単！PNG＆JPGをWebPに一括変換 | Cruw
sharp - High performance Node.js image processing
WebP(ウェッピー) でサイト制作をする際の手順と注意点 - あなたのスイッチを押すブログ
ikuhon.com
approach.yahoo.co.jp
nostaly.net
note.com/kmh6983
togetter.com
anond.hatelabo.jp