すべてのカテゴリ

ちょっとなにかツールを作りたくて、作ってみました。chatgptのDALL-Eで画像生成すると、エクスポートできるのがWEBPというフォーマットです。ブログなどに掲載する時に、WEBPを扱えないサイトが多く、PNGにするのが、少し手間でした。で、「Custom Context Menu」という右クリックを作るソフトを使い画像変換を入れて、右クリックで簡単にPNGにするツールを作りました。1秒で変換します。明日は、コード系のスニペットDBツールを作ろうかと思います。60分以内で作れる小物ツール作成タイムで。自作してあるいろんな関数などを打ち込めて、検索したり、AIにデータとして使えるようにおくと便利かも。Electron x Sqlite で作ってみようかと。実はChrome拡張機能で同じようなものを作っているのですが、スニペット数が増えすぎて、視認性が悪くなってしまった。勉強のためにも、Electronなんていう珍しいものを使ってみようかなと。クライアントになにか納品する時にも、もしかすると使えるかもしれない。

ホームページの表示速度は、SEO対策においても重要な項目です。ファイル形式で一番容量を使うのがやはり動画や画像ファイルです。特に画像はよく使う要素です。2010年にGoogleが開発したWebP(ウェッピー)は、サイト制作においてもSEOの観点から推奨されています。画像の圧縮率が高く、表示速度の高速化できます。又、発表当時は、一部のブラウザー（Safari、EIなど）が非対応だった事から、利用率が低かったのですが、2023年1月時点では、主要ブラウザーでも対応しています。「WordPress」の場合は、やはり便利なプラグインがあります。オススメのプラグインは「EWWW image Optimizer」です。設定により画像のリサイズやファイル形式をWebP（ウェッピー）に変換してくれます。▼「WordPress」管理画面→「プラグイン」→「新規追加」→検索窓に「EWWW」と入力。▼「今すぐインストール」→「有効化」「EWWW image Optimizer」の「設定」→「基本」WebP 変換→「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」の項目にチェックが入っているかチェックする。以上プラグインを導入し設定をするだけで完了です。その他の機能として・遅延読み込み→画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します。・画像のリサイズが出来る為、幅の上限、高さの上限（ピクセル単位）で設定できます。※ご注意：テーマによっては、画像が表示されない時があったりします。私も過去に「cocoon」

＜要約＞ WebP画像を使うことで、PNG画像のファイルサイズを約80％削減できました。Photoshopなしでも使える無料Webツール「squoosh」を使った変換方法と、HP表示速度改善のメリットを紹介します。 今回は、Webサイト制作において重要な要素のひとつである 「WebP画像」について書いてみようと思います。 ＜WebPを知ったきっかけ＞ WebPファイルについては、これまで 「名前を聞いたことがある」程度で、正直あまり活用できていませんでした。 しかし最近、Web制作やサイト高速化について学び直す中で、 PNG画像をWebPに変換するだけで、画像のファイルサイズを大幅に削減できるということを知りました。画像の容量が軽くなると、 ・ Webサイトの表示速度が向上する ・ ユーザーの待ち時間が減る ・ 離脱防止や滞在時間アップにつながる など、HP全体のパフォーマンス改善が期待できます。 ＜WebPとは？＞ WebPはGoogleが開発した画像形式で、 画質をできるだけ保ちながら、PNGやJPEGよりも軽量化できるのが特徴です。特に、・ 写真 ・ バナー画像 ・ Webサイト用の装飾画像 との相性がよく、現在では多くのブラウザで標準対応しています。 ＜私のWebP変換方法（Photoshopなし）＞ 最新版のPhotoshopではWebP保存が可能なようですが、 私のPCではスペックの都合上、Photoshopを最新版にアップデートできません。 そこで現在は、 「squoosh（スクーシュ）」というWebアプリを使用しています。 squooshは ・ダウンロード・イン