タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
次世代の画像フォーマットとして注目されている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画像を読み込むには 完全版
一方、Photoshopなど一部の画像編集ソフトではWebP形式に対応していない場合があり、WebP画像を保存しても閲覧などがしにくい欠点があった。これまでは、ユーザーの環境でWebP画像を編集するにはWindowsの付属ソフト「ペイント」などで開いて編集するか、ペイントで別フォーマットへ変換してから編集する必要があった。 この機能追加に対し、Twitter上では「やっとか！」「これでペイントを経由しなくてすむ」など喜びの声が上がっていた。 関連記事 Illustratorで起動不可の不具合、他社セキュリティソフトが影響 アドビが回避法を案内 アドビの「Illustrator」で起動できない不具合が発生している。他社のセキュリティソフトが競合していることが原因としており、その回避法を案内している。 「街並みが一瞬で人類滅亡後に」──Photoshopの画像ミックス機能が話題 荒廃した写真が
条件分岐や計算ができる問い合わせフォームを作成できるWordPressプラグイン「Formidable Forms」の使い方 2026.01.20
米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
こんにちは。takutaka と申します。最近良かったことはMOTHER3をクリアしたことです。 最近、画像配信を WebP に動的変換するという施策を担当したので、その話をします。 ペパボにおける画像配信 GMO ペパボでは、クリエイターさんがアップロードした画像でTシャツなどのステキなアイテムが販売できる SUZURI というサービスや、EC支援サービスであるカラーミーショップやハンドメイドマーケット minne など、様々なサービスを運営しており、それぞれに画像の扱いは特徴があります。 SUZURI では、クリエイターさんに提供いただいた画像をペパボで独自で合成し画像を作成していますが、対してカラーミーショップや minne では、ショップオーナーさんや作家さんがペパボのシステムアップロードした画像をエンドユーザーさんに配信しています。 施策を実施したサービス 今回はEC支援サービス
こんにちは、iOSエンジニアのいっちー(@0IcchI)です。 ミラティブでは、iOS 18のリリースに備えて、アプリ上に新しい不具合が発生していないかの調査とその対応を進めてきました。 その過程でAnimated WebPの再生に起因する致命的な不具合に出会ったので問題とその対応について紹介します。 背景 ミラティブではアプリ内で画像を表示する際にSDWebImageを使用しており、Animated WebPの再生にも用いています。 SDWebImageはAnimated WebPの再生に2種類のコーダーを提供しています。 SDImageAWebPCoder iOS標準のImageIOフレームワークに含まれるコーダー SDImageWebPCoder SDWebImage独自のコーダー SDWebImageWebPCoderのREADMEではそれぞれの違いについて以下のように記述されてい
ページに挿入する画像の形式として「WebP」や「AVIF」を採用するウェブサイトが増えつつあります。しかし、画像ビューワや画像編集ソフトの中にはWebPやAVIFに対応していないものも多く、「ウェブページから画像をダウンロードしたものの、WebP形式の画像だったから編集ソフトやビューワで開けない」といった状況に遭遇した経験がある人も多いはず。ブラウザ向けの拡張機能「WebP / Avif image converter」を使えばWebPやAVIF形式の画像をJEGやPNGなどの扱いやすい形式に変換しつつダウンロード可能とのことなので、実際にインストールする手順や使い方を確かめてみました。 WebP / Avif image converter – 🦊 Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/we
SRE NEXT 2025 で発表した内容となります。
Number of images that can be processed at once: 100 Maximum upload file size: 50MB The maximum size that can be optimized at once: 250MB Bandwidth transfer per month: 30GB Allowed files: JPG, PNG, SVG, and GIF. Can convert your files to AVIF and WEBP format Optimize Images online with our compressor and converter! With our tool you can optimize and compress images (PNG, SVG, JPG, GIF), convert to
そのなかでもみなさんが気になっているのはWebP（JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えた静止画像フォーマット）対応だと思います。実装にはいくつか方法があるのですが、まずどうやってWebP形式の圧縮画像を作ればいいのか。 一つひとつの画像を圧縮・WebP変換するにはGoogle謹製の画像処理サービス Squoosh がおすすめです、という話を前回させていただきました。しかし、このサービスの難点は、複数画像の一括処理がブラウザ上ではできないこと。 そう、「ブラウザ上では」。 コマンドライン版Squoosh 実はSquooshはコマンドライン版というものが存在します。というかむしろこっちが本命だと思われます。ちなみに今回の内容も非エンジニア向けなので、CLI（コマンドラインインターフェイス）と呼ばれるあの黒い画面にアレルギーが発症しない方はぜひトライしていただきたいです。 利用
プライバシーを保護しながら画像ファイルを圧縮できるウェブツールがWebUtilsの「Compress Images」です。画像ファイルをJPEG/PNG/WebP/AVIF/JPEG XLといった画像ファイルフォーマットに変換しながらファイルサイズを圧縮可能で、ウェブツールながらブラウザ上から画像がサーバーへ送信されることがないためオフラインでも利用可能で、画像データを傍受されたり盗まれたりする心配もありません。 Compress Images - An Online tool to compress/convert images https://www.webutils.app/image-compress Compress Imagesの使い方は簡単で、上記のURLにアクセスして画面中央にある「Drag n drop images here, or click to select」と書
WebP image support is now available across github.com and GitHub Enterprise Cloud with data residency. Previously, uploading WebP images resulted in broken previews or forced users to download files to view them. This created friction for users that rely on high-efficiency formats like WebP for faster loading and better compression. By supporting WebP, we’re helping users share, collaborate, and s
ウェブサイトを閲覧するとき、画像やドキュメントなどさまざまなリソースを圧縮して転送することで細い回線でも快適にページを閲覧しやすくなります。エンジニアのアリサ・シレネヴァ氏が、ウェブサイトの圧縮に画像圧縮のために開発された「WebP」を使用することである程度の圧縮率を達成できると発表しました。 WebP: The WebPage compression format | purplesyringa's blog https://purplesyringa.moe/blog/webp-the-webpage-compression-format/ 多くのブラウザはgzipやBrotliなどの形式をサポートしており、ウェブサーバーは場合によって形式を使い分けています。gzipは高速に処理できて負荷が軽いためほぼ全ての場合において使用できますが、Brotliはgzipより圧縮率が高いものの処理に
Google が WebP コーデック (libwebp) のヒープバッファーフロー脆弱性を 9 月 22 日に CVE へ報告したが、CVE-2023-4863 と重複するとして数日後に却下された (CVE-2023-5129)。 この脆弱性は libwebp を使用する多数のアプリに影響するものの、Google は CVE-2023-4863 を Google Chrome における WebP の脆弱性として報告した (Internet Archive のスナップショット)。Google はプラットフォームによって WebP の実装が異なるため、Chromium 以外の製品への脆弱性の影響を判断できないなどと説明したが、他の製品が影響を受けないような印象を与えると批判を受けた。 そのため、CVE-2023-5129 は CVE-2023-4863 と同じ脆弱性を libwebp の脆弱
WebPとAVIF形式の画像ファイルがアップロードできるようになりました。 これらの新しい画像形式は、ページの表示速度を速くし、より高画質な写真を掲載することができます。 どうぞご利用ください。 画像のアップロード方法は下記のヘルプをご参照ください。 help.hatenablog.com
Web（ブラウザ）上ですぐに使えるWebP変換ツールです。 複数のJPEG、PNG、GIFなどの画像をまとめてWebP形式に変換します。 WebPはGoogleが開発している軽量な画像形式です。 ウェブでのWebP表示にはpictureタグを使うと良いでしょう。 ファイルの拡張子は◯◯.webpに変換されます。 画像はパソコンやスマホのブラウザ上で処理されます。 サーバーなどにも画像は送信されないため、画像を誰かに見られる心配はありません。 画像サイズ変更ツールやPNG→JPEG変換ツールもどうぞ。
WebPとは最新型の画像ファイル形式のこと WebPは、2010年にGoogleが開発した新型の画像ファイル形式です。従来のJPEGやPNGなどの画像ファイル形式に比べて、高い圧縮効率と品質を実現しています。WebPファイルの拡張子は「.webp」と表記され、最近では多くのブラウザやウェブサービスで広くサポートされています。 とくにウェブページの読み込み時間の短縮と画像データの容量削減に効果が高く、これらをカバーしているのが普及の理由です。 WebPの特徴 WebPフォーマットは多くの革新的な特徴を持っており、従来の画像フォーマットと一線を画しています。 可逆圧縮・非可逆圧縮の両方に対応している 画像の圧縮形式である可逆圧縮とは、圧縮されたデータを損失なく元の状態に復元できる技術です。この方法では、元のデータの品質を保ちながら圧縮をおこないますが、その代わりに圧縮率は非可逆圧縮に比べて低く
In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. We’ll compare what’s possible at high-quality, low-quality and file-size targets. We’ve recently published Addy’s Image Optimization book with everything you need to know about images, how to compress, serve and ma
Googleが作った画像形式「WebP (ウェッピー)」。画像がすごく軽いので、サイトの表示スピードがあがりますし、SEOにも効果があると言われています。 今後、WebP (ウェッピー)の導入が加速すると予想されているため、特にWeb制作に携わる方には見逃せない拡張子となっています。 そこで今回は、WebP (ウェッピー)の概要をはじめ、変換方法やメリット・デメリットを解説していきます。 WebP (ウェッピー)とは？ WebP (ウェッピー)とは、GoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットのことで、画像の画質を担保したまま軽量化した画像を書き出すことができます。 画像が軽いことでページの読み込み速度の改善が期待でき、SEO的にもプラスに働きます。 ファイルの拡張子（ファイル形式）は「.webp」が使用されていて、「.Jpeg」「.png」に代わる次世
ウェブサイトのトラフィック量を軽減するために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」で「ファイルを
4 月が終わり、GW に突入しますね。 季節の変わり目になりクーラーのタイミングを伺ってる、スピッカートの金山(@spicato_kana)です。 今回は、弊社で使用している Web 制作のための画像圧縮と WebP 生成を紹介します！ 毎回 Web サービスなどを用いて圧縮すると効率が悪いので、弊社では自動化しています。 圧縮と WebP 生成には、 sharp というライブラリを使用しています。 sharp-cli があり webpack 上で簡単に使用できるのですが、ここ一年以上更新がされていないので今回は使用しません。 直近（2022/12/14 時点）で、更新されて v4 になっていました！ かわりに、npm script で実行します。 結論（コード） 最初に結論を書くのがいいと聞くので、最初にコード全体を書きます。 // ES Modules 対応にする // Webpack
Webpとは、2010年にGoogleが開発した次世代画像フォーマットのことです。 Webpは画像サイズが軽いことで知られており、ホームページ制作やWebサイト制作では、SEOの観点から利用することが推奨されています。しかし、Webpの具体的な概要が分からない人は多いのではないでしょうか。 そこで本記事では、Webpの概要や、JPEG、PNGなどその他の画像形式との違いを解説します。また、Webpを使用するメリットやデメリット、実際に使用する方法を解説しますので、ぜひ参考にしてください。 Webpとは はじめに、Webpの概要から解説します。Webpとは、Googleが開発した次世代画像フォーマットのことであり、2010年に公式発表されました。 Webpは画像の圧縮率が高く、表示速度の高速化に有利に働きます。一見メリットしかないように思えるWebpですが、以前は対応しているブラウザが少ない
こんにちは、Webサイト作ってますか？ Webサイトを作っていると、Lighthouseスコアを上げるために画像のサイズやフォーマットにも気を配りたくなりますよね。 筆者は画像のフォーマットにはあまり頓着してこなかったので、「フラットな画像ならPNG」「込み入ったイラストはJPEG」「なんかWebPとかいうのもあるらしいけどよくわからん」くらいの解像度で適当に使っていました。しかし、最近の開発でLighthouseスコアのチューニングをしてみたところ、色々新しい知見が溜まったので、自分用の備忘録として残しておこうと思います。 3行まとめ ちゃんと複数の解像度の画像を用意しようね WebPやAVIFといった次世代フォーマットも使ってみようね <picture> と <source> は便利 画像のサイズを複数用意する 表示するディスプレイの解像度に合わせて、表示する画像の大きさを調整すること
Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。 #朝までフォトショ 私のセッションでは、Photoshopのタイムライン機能と、APNGやWebPアニメーションとして書き出す方法についてご紹介します✨ pic.twitter.com/ZMgH0bAJyY — Eri Matsushita 松下 絵梨 (@matsu_eri) June 22, 2023 タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。 下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。 矢印の左側にある「ビデオタイムラインを作成」ボタンをクリックします。 レイヤーごとに、タイム
画像ファイルをドラッグ&ドロップするだけで、リサイズとパディング、WebPなどへの変換処理を行ってくれるメニューバー常駐型のMac用ユーティリティ「Messer」がリリースされています。詳細は以下から。 MesserはドイツのエンジニアOscar Francoさんが開発＆公開したMac用のイメージコンバーターアプリで、アプリを起動して表示されるメニューバーアイコンに、PNGやJPEGなどの画像ファイルをドラッグ&ドロップするだけで、リサイズやパディング、フォーマットの変換などを行ってくれます。 Messer is the simplest and most powerful macOS productivity app, you simply drag your images and photos, and out they come in the format you want, on
WebPはGoogleが開発した画像フォーマットで、従来のJPEGやPNGよりも高品質な圧縮が可能です。 画像ファイルサイズを大幅に削減することができるため、ウェブサイトの読み込み速度を大きく改善することに繋がります。 とはいえ、WebPは2010年に発表された比較的新しい画像ファイル形式のため、ブラウザによってはサポートされていない場合があります。（例えばSafariの場合、”iOS14″以降、Macでは”macOS 11 Big Sur”以降でないとサポートされていません。 そのため、WebP画像を使用する場合は現状、非対応ブラウザへの対策も必要不可欠となります。 WebP画像に関する基本的な知識は以下の記事で解説しているので、あわせて読むと理解が深まります。
ローカルにNode.jsがインストールされていれば、npxコマンドを使ってすぐに画像の最適化ができます。 例えばexample.pngをWebPに変換したいときは以下のコマンドを実行します。 npx @squoosh/cli --webp auto example.png # ✅ Squoosh results: # example.png: 24.85KB # └ example.webp → 8.74KB (35.2%)
ウェブサイトの閲覧に「Google Chrome」「Microsoft Edge」「Firefox」「Brave」を使っているなら、米国立標準技術研究所（NIST）が「クリティカル」と分類するセキュリティ問題を修正するために、直ちにブラウザーをアップデートすべきだ。 上記のすべてのブラウザーに対して、この問題に対応するためのアップデートが発行されている。この脆弱性を放置すると、悪意ある攻撃者にコンピューターにアクセスされたり、悪質なコードを実行されたりする恐れがある。ブラウザーは自動的にアップデートされるはずだが、個々のアップデートを適用するにはブラウザーを再起動しなければならない可能性がある。 ウェブサイトStackDiaryは、この問題が「Signal」のような「Electron」ベースのアプリケーションに影響を与える可能性があると報告している。パスワードマネージャー「1Passwor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く