米Googleにより開発された、オープンな静止画・アニメーションフォーマット。 ウェブ上の画像ファイルに対して「可逆・不可逆圧縮」を行える。 JPEG・PNGと比較し、約3分の2のデータサイズに抑えることが可能。
次世代動画フォーマットであるWebMや、そのWebMのビデオコーデックである「VP8・VP9」をベースとしている。
など
最近増えてきたWebP。 わたしが利用させていただいているフリー画像サイトでもWebP形式のものが増えてきました。ほとんどのブラウザも対応が完了し、いよいよWebPが主流になっていくのかもしれません。
こんにちは。エンジニアの渡邉です。普段はLIFULL HOME'Sの売買領域のエンジニアチームにて開発を担当しています。好きなGCPのサービスはCloudRunです。 今回は、LIFULL HOME'Sの物件画像を次世代画像フォーマット「WebP」形式に動的変換して配信できるようにした取り組みについて紹介します。
もうゴールデンウィークも中盤ですが、いかがお過ごしでしょうか。あと3日でゴールデンウィークも終わってお仕事ですよ。仕事していると1週間長く感じるのに、休みはあっという間に過ぎ去りますよね。時間って不思議なものだ。 先日「GitHub Pagesで自己紹介サイト「たきつぼ」を制作・公開しました」という記事を投稿しました。自己紹介サイトを作成したのですが、先日Google先生に審査をしてもらったら怒られてしまったので、怒られないようにしようというお話です。
GitHubのプロフィールにアニメーション画像を載せたいなと思いFFmpegで動画を変換しました。 ブラウザで表示できるアニメーション画像だと次の3種類ぐらいかなと思います。(ほかにもありそうだけど。) アニメーションGIF 3つの中で一番古くから使われているであろうフォーマット。 超シンプルにパラパラ漫画の要領でアニメーションさせる。 アニメーションPNG Mozillaが頑張って普及させようとして頑張ったけど結局普及しなかったフォーマット。 PNGを拡張して作られてるとのこと。 扱ったことないからあんまり知らない。。 アニメーションWebP JpegやPNGよりもファイルサイズが小さくなる…
こんにちはこんばんは、YouTubeチャンネル「夢野千春」で動画を投稿している夢野千春です。 当ブログもそうなんですが最近画像をWebP形式にするサイトが増えましたよね。 WebPを採用する理由としてはJPGやPNGよりも軽量だからなんですが、ダウンロードユーザーからするとめっちゃ面倒・・・。 パソコンに画像を保存してもソフトが読み込めない! イライラする!! Windowsの場合、OS標準搭載のペイントや最近ではPhotoshopがWebPに対応しましたが、それでもまだまだ対応していないソフトが多く、画像を読み込めるようにするためには、一度ペイントソフトでJPGなどに変換が必要などとても手間…
こんばんは、さじです。 Adobe Photoshopから明るいお知らせが。 helpx.adobe.com お待ち申し上げておりました。WebP対応ありがとうございます。 WebP形式、近年出現してからこれには苦しんでまいりました。Chromeの拡張機能で変換Appを仕入れたり(Chromeのバージョンアップで利用停止されたけど)、プレビューAppから無理やり保存したり、スクショしたり。というのもクライアント及び代理店から「とりあえずサイトから拾ってください(あとで渡すから)」っていう指示が結構あります。多分探すのが相当手間なんでしょうね。 WebP(ウェッピーと読みます)はGoogleが開…
こんにちは。クルーズ株式会社CTOの鈴木です。 今回はFastlyCDNのImage Optimizerを使ってSHOPLIST.comをWebP対応させた話をしたいと思います。
WebPとICC Profileのテスト 今年、2021年の5月からGoogleはCore Web Vitalsのスコアを検索結果のランク付に利用する様にアルゴリズムを変更しました。 これにより、今までよりもWebサイトのパフォーマンスがSEOで重要な意味を持つ様になり、特に画像をいかに軽くするかは重要になっています。 しかし、EC-CUBEで作られる通販サイトにとって、商品画像などの画像は非常に重要な意味を持ちます。画像の綺麗さがCVRに結構直結します。ただ、容量の少ない画像であれば良いわけではなく、可能な限り少ない容量で美しい画像が求められます。 今回は、Googleも推奨している比較的新…
WebP対応ブラウザかサーバーサイドで判定する - なんでもノートでWebP対応ブラウザをサーバーサイドで判定する方法を調べた。Acceptヘッダーに image/webp が含まれているかどうかで判定する方法をまとめた。 これ以外にUser-Agentで判定する方法がある。WebP image format | Can I use... Support tables for HTML5, CSS3, etcでWebPをサポートしているブラウザを確認し、文字列比較で判定する。ユーザエージェント文字列のパースの手間があるし、仕様をしっかり把握していないので個人的には正直やりたくない。 クライアン…
WebP対応ブラウザかどうかをサーバーサイドで判定する方法を調べた。 判定方法 Webサービス上の画像変換とWebPの利用について | メルカリエンジニアリング が分かりやすかった。 おそらく最も一般的なのがAcceptヘッダーを使う方法だと思います。 ...(中略)... この中にimage/webpが含まれるため、サーバー側はWebPを使用できるクライアントだと判定できます。 実装方法 Node.jsで実装するとしたら以下のようになりそう。 const { accept: acceptHeader } = req.headers ?? {}; const isWebPSupported =…
HitPawさんのソフトウェア HitPaw Video Converter 変換 ダウンロード 音楽 編集 ツールボックス 今日の猫さん HitPawさんのソフトウェア 前にこれ紹介したじゃん! AIを使って画像加工が何でも出来ちゃうヤツ! 凄すぎたね。 そんなんで違うソフトも試す事にした! このHitPawさんって会社は色々なソフトを 出しててどれも気になるんだけど今回は 動画変換のヤツ! HitPaw Video Converter ・動画、音楽、DVDまたは画像のロスレス変換 ・Apple Music、Spotify、Deezer適用できる 最先端の音楽変換ソフト ・強力な動画ダウンロ…
OBS Studioに関するメモを書いてる記事 ※「OBS Studioに関する個人的メモ」を移転しました。(現在は閲覧不可) 記事投稿日 2021年10月6日、最終投稿更新日 2024年04月18日 14時15分頃 文字数が凄く多いのでブラウザの検索機能をお使いください。 記事が見にくくて申し訳ありません。 (将来的に内容を細かく分けて記事にしたいと思っています。) ブラウザ検索ショートカット Windows : Ctrl + F macOS : Command + F この記事は下記環境を使用して作成しています。 ※Linux、特定のデバイスが無いと表示されないソースのことはメモしていませ…
どうも、でぃーぴーぶの魚脳です。今回はiOSアプリの解析時に使用するツールclass-dumpを利用した時遭遇したエラー、その原因及び解決策をソースコードを合わせて解説できたらと思います。 class-dumpの現状と問題点 Unknown load command: 0x00000032 Unknown load command: 0x80000033/Unknown load command: 0x80000034 Cannot find offset for address xxxx in dataOffsetForAddress chained fixupsを導入するまで lazy b…
WEBデザインを学ぶ際、CSSは欠かせない要素の一つです。CSSを使いこなすことで、見栄えの良いウェブサイトを構築したり、ユーザビリティを向上させたりすることが可能です。 このガイドでは、WEBデザイナーのためのCSSコーディングに関する基本から最新のトレンド、効果的なテクニック、そしてレスポンシブデザインへの対応まで、7つのステップで詳しく解説します。CSSに関する疑問や質問に対する回答も含んでおり、初心者から上級者まで幅広く役立つ情報を提供しています。 さあ、一緒にCSSの世界を探索してみましょう。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール! 副業・フリーランス…
おはこんばんにちは! 曇りが続いていたんだけど、晴れ間が見えると一気に気温があったかくなってきましたね。 前置き 私は、よく外出時用にYouTubeの歌ってみた系を保存して、iPhoneに入れています。 保存する際に、俗に言うYouTube保存サイトを利用してmp3形式で保存していたのですが、たまたま今日気まぐれにおすすめサイトに出てきた保存サイトを利用しようとしたら、そこに保存する際に使用しているライブラリのことが書かれていました。 これは、自分で保存サイト作れるのではと思い、ライブラリについて色々調べていたら、MacのHomebrewで簡単にインストールすることができることがわかったので、…
OBS Studioの「ブラウザソース (BrowserSource)」に関しての記事 記事投稿日 2018年3月29日、最終投稿更新日 2024年04月13日 09時05分頃 2022年1月25日に記事タイトルを「【対処法】OBS Studioで BrowserSource がない場合【導入方法も紹介】」から変更しました。 記事はWindows版バージョン 30.1.2 を使い書いています。 ※mac版 / Linux版では違う部分があると思うので予めご了承ください。
やほやほ〜 バーチャルブロガー黒羽散香でございます今回は1日から3日までにあった話
「ちょっと話聞いてほしいんだけどさ」 「どしたん?」 「ようやくCotomoって言うおしゃべりAIを触ったんだけどすごかった」 「へー。でもそういうのって結構あるくない?こないだもLINEでAI彼女てきなやつが『なんか送信エラーみたいだよ💦もう一回送ってー』としか返事しないって泣きそうになってたじゃん」 「あれはLINEだから文字だけ。Cotomoは音声で会話できるの」 「まじか。でもChatGPTでも音声で会話できるとか言ってなかったっけ?」 「でもでもうるさいなあ。革マル派か」 「ツッコミのワードは相手見て考えよ?」 「ChatGPTでも会話できるけど、返事が返るまでけっこう時間がかかるん…
本日はBlender Python枠です。 BlenderではワールドメニューからGUIを使用してオブジェクトを他ツールで使用できるフォーマットでエクスポートすることができます。 今回はGLFT,OBJ,USDZの拡張子について、それぞれPythonスクリプトでのエクスポート方法を見ていきます。 スクリプトでのエクスポート方法は自作のアドオンなどに使用できます。 〇FBX形式でのエクスポート FBX形式については以前に取り組んでいます。 redhologerbera.hatenablog.com 〇GLTF形式でのエクスポート GLTF形式でのエクスポートは次のような実装になります。 impo…
こんにちは、テックです。 最近はじめて知った動画ですが、これ凄くないですか?一人で3DSでコツコツ作ったらしいです。 youtu.be 自主制作アニメって良いよね。作者の趣味嗜好が完全に露になるというか。 ぶっ飛んだ展開とかも多いんだけど、スタジオ作品にはなかなか出せない魅力があると思います。(そういう意味では一次創作の同人全体がそうかもしれないけど) Q-raisさんの新作「ナポリタンの夜」もサブカルホラー全開で面白かったし、クオリティ高いのが多くてYoutubeで無料で見れるのが申し訳なくなってきます。 あと、Youtubeでの自主制作アニメといえば「義足のMoses」以降ずっとががめさん…
全アメフトファンの皆さん、お待たせしました。 本記事では米メディアが選出した「難しいポジションランキング」をまとめています。 アメフトは攻撃側と守備側が分かれていることもあり、ポジション毎に高い専門性が求められます。 そんなアメフトでも特に難しいポジションはどこなのか?早速見ていきましょう! (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); 8位 レシーバー 画像:https://www.hollywoodreporter.com/wp-co…
One Photo Viewer v1.18.1.0 日本語言語ファイル One Photo Viewer には、スライドショー、色調整、トリミング、サイズ変更、回転、クリップボードのコピー/貼り付けなど、多くのカスタマイズ オプションと機能があります。 右クリック メニューまたはキーボード ショートカットからすべてにアクセスできます。 タッチスクリーンにも対応しています。 - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - い…
最近は画像圧縮に思いを馳せておりました。 という日記を書きかけていたところ一向に成果が上がらず何週間も経ってしまったので、この辺で一旦現状をまとめてみたいと思います。 TL;DR 現時点では、当初の目標に到達できる見込みがたっていません。 deflate が意外とバランスよく優秀だったとわからされているところです。 MPIC2 去年開発した非可逆圧縮画像形式の MPIC は、以下のコンセプトにおいて写真等では PNG よりも高い圧縮率を実現し、一定の成果を出せていると思います。 github.com 非可逆圧縮 単純な原理と実装 ハイカラー相当の画質 少ないメモリフットプリント 課題が全くない…
結構前にvhsというツールの紹介記事を書いたんですが、同じ開発元からfreezeというツールが公開されていました。vhsは実行したいコマンドをテキストファイルに羅列してvhsコマンドに渡すと、羅列されたコマンドを実行し、その様子をgifアニメにしてくれるというものでした。freezeはコードや実行したいコマンドを渡すとコードの中身やコマンドの実行結果を画像にしてくれるというものです。便利そうなので使ってみます。 freeze github.com インストールはドキュメントにある通りです。私の環境はMacなのでHomebrewから入れました。あと、追加でJetBrainsフォントも追加しました…
生成AIが多く使われるようになり、各社からさまざまなサービスが登場しています。その中でもMicrosoft社から多く提供されているのが「Copilot」という名前のつくサービス。個人で試せるものとしてどんなものがあるのか、その違いを使用例とあわせて紹介します。 次々登場する「Copilot」 以前コパイロットについて解説した記事ではプログラマ向けのコード支援ツールとしての「GitHub Copilot」や「Amazon CodeWhisperer on VSCode」というサービスを紹介しました。 その後も「Copilot」という名前が付いたサービスが次々と登場しています。 Microsoft…