画像ファイルを一発でWebP形式にするツールを自作して実行ファイル化してみた
前回、PNGやJPEGなどさまざまな形式の画像をWebPやAVIFなどの形式に整えるプログラムを作成しました。今回はGIGAZINEの編集部員が誰でも簡単に使えるよう、「pkg」というライブラリを使用して実行ファイルの形式に整えていきます。 pkg - npm https://www.npmjs.com/package/pkg プログラムの中身や環境構築については下記の記事を確認するとスムーズです。 いろんな画像を一発で特定の形式に整えてくれるプログラムを作成した話 - GIGAZINE まず、「npm install pkg」とコマンドを入力してpkgライブラリをインストールします。インストールしたら、package.jsonをテキストエディタで開いて「"scripts"」の項目内を下記のように「"build": "pkg -t latest-win -o bin/webp.exe in
ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
便利なツールが登場！ 画像を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以外の
【SEO対策】画像形式WebPでデータを軽減し、検索順位を上げよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そのなかでもみなさんが気になっているのはWebP（JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えた静止画像フォーマット）対応だと思います。実装にはいくつか方法があるのですが、まずどうやってWebP形式の圧縮画像を作ればいいのか。 一つひとつの画像を圧縮・WebP変換するにはGoogle謹製の画像処理サービス Squoosh がおすすめです、という話を前回させていただきました。しかし、このサービスの難点は、複数画像の一括処理がブラウザ上ではできないこと。 そう、「ブラウザ上では」。 コマンドライン版Squoosh 実はSquooshはコマンドライン版というものが存在します。というかむしろこっちが本命だと思われます。ちなみに今回の内容も非エンジニア向けなので、CLI（コマンドラインインターフェイス）と呼ばれるあの黒い画面にアレルギーが発症しない方はぜひトライしていただきたいです。 利用
そろそろ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に変換できる「Video2WebP」
ウェブサイトのトラフィック量を軽減するために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」で「ファイルを
次世代画像形式の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
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画像を実装するHTMLのコード
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
Optimus - 画像をまとめて変換してサイズ縮小
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像の解像度が上がっており、その結果として画像のファイルサイズが巨大化しています。画像はWebサイトやアプリでふんだんに使われるので、サイズが大きくなると、それだけでパフォーマンスが悪化します。 そこで使ってみたいのがOptimusです。画像をまとめて変換、最適化します。 Optimusの使い方 画像を登録します。複数画像をまとめて登録できます。 変換しました。1.46MB削減できました。 設定です。 OptimusがサポートしているのはJPEG/PNG/WebPになります。最適化と相互変換が可能です。画像の大きさもバッチ処理で変換可能です。見た目が派手で、使っていて面白いソフトウェアです。 OptimusはVue製、Windows/macOS/Linux製のオープンソース・ソフト
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
WebP Converter.
WebPからPNGに、HEIC, PNG, JPG等様々な拡張子の画像からWebPへ一括で変換します。(WebP→JPEG変換はアプリ内課金で有効になります。) 画像にあなた独自の透かしを追加することも可能です。 # 簡単に利用可能 画像、画像が含まれるフォルダ、SafariなどのWebブラウザからドラッグドロップして変換ボタンをクリックするだけで変換可能です。 # 以下の拡張子をサポート HEIC, PNG, APNG, JPG, GIF, TIFF, DNG, EPS, PSD. その他にも: jp2, j2k, jpc, bmp, jbig, bie, pnm, pgm, pbm, mag. # 安全 すべての変換プロセスはオフラインで完結します。 インターネット上の変換サイトにあなたの大切な画像を渡す必要はありません。 # アプリ内課金 - Quality, Resize, Pre
MacのFinderでWebP画像を見れるようにしよう！｜WebP編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
健全なソースコードは健全な開発環境に宿る。こんにちは、フロントエンドのザワです。 私がWebPを扱い始めたのはここ最近の話です。JPG画像などを見るのと同じようにFinderを眺めていたとき気づきました。 FinderでWebPが見れないじゃないか！ そんな苦い経験から、WebP画像をFinderで見る方法をここに記すことにします。対応はものすごく簡単なので、「まだやってないよ」という方はぜひ試してみてください！ ではさっそく始めます！ LIG技術研究会って？ 日頃感じているWeb技術に関する疑問や不明な点を、研究員（LIG社員）がそれぞれのアプローチによって紐解いていく会。まだまだ謎が多い。 やってみよう！ 動作確認（Before） まずはFinderで画像を見た場合の正常動作を確認しましょう。 たとえばJPG画像をFinderで見ると、このように表示されると思います。 うん、ブルーライ
画像フォーマットWebP（ウェッピー）について詳しく調べてみた｜WebP編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WebPとは WebPとは、Googleが新しく作った画像フォーマットのことです！ 画像は sample.png のように、拡張子でフォーマットが指定されていますよね。同じように、WebP画像も sample.webp のような形で保存されます。 ちなみに、読み方はウェッピーです。 また、Wikipediaには、 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。 引用元：Wikipedia と書いてあります。非可逆圧縮でもアルファチャンネルを扱えるということは、透過した画像もWebPとして書き出すことができるということです。 WebPの歴史 次世代フォーマットともいわれるWebPですが、なん
imagemin-webpによる画像圧縮で最適な設定を探る｜WebP編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。布団圧縮してますか？ フロントエンドエンジニアのザワです。 今回の記事は、LIG技術研究会よりWebP編としてお届けします。 さらっと言いましたが、LIG技術研究会とは、LIG社内のWeb技術を研究する会です。Webに関して日頃感じている疑問や不明な点を研究員によるそれぞれのアプローチで紐解いていくため発足しました。まだ謎多き研究会ですが、時が来たらあらためて紹介することにします。 さてWeb関係者ならもうおわかりでしょうが、「imagemin」とは画像圧縮のことです。そして、「WebP」が画像の種類のことだということもすぐにおわかりいただけるでしょう。 今回はimagemin-webp、そう、WebP画像を圧縮してみようという回です。imagemin-webpが持つさまざまなオプションを試しつつ、最適な設定を探す。それが今回の狙いです。 目標 あらためて今回の目標を整理します
WebP（ウェッピー）で画像を軽量化！非対応ブラウザでも切り替える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ(´ʘ‿ʘ )✌ 今回はGoogleが作った新しい画像フォーマットWebPの導入方法、そしてWebPが使えない他ブラウザへの対応方法をご紹介いたします。 WebPとは？ WebP（ウェッピー）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。 参考:WebP – Wikipedia さっそく使ってみた img要素に.webpを設定するだけ！ <img src="http://hayachi.github.io/images/hayachi.webp" alt="はやちwe
Squoosh - 高性能な画像圧縮Webアプリケーション
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました デジカメやスマートフォンのカメラが性能向上するのに合わせて画像のサイズがどんどん大きくなっています。その結果、バックアップや写真の表示でネットワーク帯域を消費することになってしまいます。これは今後どんどん問題が大きくなっていくでしょう。 Appleでは新しい画像フォーマットHEICを作りました。対してGoogleはSquooshを開発しました。Webブラウザ上で画像を圧縮できるWebアプリケーションです。 Squooshの使い方 メイン画面です。画像をドロップして開始です。 画像例。画像の大きさは変えずにファイルサイズが92%に…。 パラメータを変更して違いを確認したり、スライダーを使って圧縮前後の比較もできます。殆ど変わらないのに84%小さくなっています。 さらにWebPにした場
Google Chrome Labsが公開したWebPにも対応する画像圧縮Webアプリ「Squoosh」を使ってみた
Google Chrome Labsが、オープンソースで誰でも利用が可能な画像圧縮Webアプリ「Squoosh」を公開しました。Googleが開発した静止画フォーマット「WebP」に対応して高い圧縮率を実現しているというSquooshでどのぐらい画像ファイルの容量を小さくすることができるのか、実際にやってみました。 ?? https://t.co/sCMU33lR1G - make images smaller using best-in-class codecs, right in the browser.— Jake Archibald (@jaffathecake) 2018年11月12日 Squooshの使い方は極めて簡単で、以下のリンク先にブラウザからアクセスするだけ。ホーム画面に画像をドラッグ＆ドロップで読み込ませるか、「Select an Image」をクリックして画像ファイ
WebPonize - 任意の画像をWebPフォーマットに変換
WebPはまだまだ一般化しない画像フォーマットですが、Googleが推しているだけあって注目度は高いです。画像サイズも大幅に軽減されるので、使ってみたいと思っている方は多いでしょう。 そんなWebP画像を簡単に作成できるのがWebPonizeです。既存の画像をドロップするだけでWebPに変換できます。 WebPonizeの使い方 メイン画面です。ここに画像をドロップします。 PNGの場合。サイズは72.5%になりました。 JPEGの場合はよくありません。逆に33.9%大きくなりました。 WebPonizeは画像フォーマットを問わずサイズが軽減できるのですが、写真の種類などによっては肥大化してしまう場合もあるようです。そういった点も含めてWebPonizeを使えば簡単に確かめられるでしょう。Androidアプリなどのリソース生成にも良さそうです。 WebPonizeはmacOS用のソフトウェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Convert Image to WebP | Online WebP Converter Free
