些細な日常
GIFアニメは画像のgifファイルによる複数の画像の連続表示だ。無音の動画みたいな感じで、使えるけど、しかし厄介なのが容量が大きい。 GIFアニメの容量は構成する画像の枚数が増えるほどに嵩む。画像だけで作ると比較的に軽いけど、しかし動画を、そのまま、GIFアニメに変換すると逆に元の容量を上回ることも珍しくない。何れにしてもサイトに載せたときの表示速度が下がるし、データの通信量も増えてしまう。扱い辛いので、何とか容量を削減する方法はないかと考える。 サイズを小さくする 再生時間を短くする FPSを減らす 画像を間引く 容量を圧縮する 画質を下げる GIFアニメの作成アプリによって容量を削減する方法は変わるけれども今は六つあるのが一般的かも知れない。 サイズを小さくする GIFアニメの画像サイズ、縦横の大きさを小さくすると容量を減らして表示速度やデータ通信に有利になる。 サイズを小さくする軽量化の効果は非常に大き…
スマホの画像の不要物の除去と高画質化の無料アプリで、マジックイレーザー（ Android ／ iPhone ）が高性能で、しかも広告付きながら物凄く邪魔になるわけでもなくて使い易くて良いと思ったので、どんな感じなのかのレビューと使い方を紹介する。 マジックイレーザーの無料版の特徴 マジックイレーザーのホーム｜ Giang Nguyễn できることは削除と強化という画像の不要物の除去と高画質化の二つだけで、デザインもすっきりしていて非常に分かり易い。 マジックイレーザーの消去について マジックイレーザーの強化について マジックイレーザーの消去と強化は単独で使うことができてそれぞれの終了後に画像を保存してから続けて残りの作業を行うこともできる。 編集は全てオンラインで行われるので、使用するスマホやタブレットのインターネットへの接続が必須になる。 編集後に保存される画像のファイル形式は全てjpgで、ファイル名は入手した…
AI画像を生成するWebサービスが幾つもある。やってみるとどれも得られる画像が違う。欲しい画像をAIに指示する言葉の捉え方と表し方の組み合わせで、それぞれ、全く別の物に変わってしまう。自分で気に入って使えるものを探すために調べてみることにした。 AI画像を生成するWebサービス十一選 格好良い男性と可愛い女性 by 結城永人 My Edit Fotor Canva Bing Image Creator Adobe Firefly Pica AI Stable Diffusion DeepAI starryai Deep Dream Generator NightCafe Creator Craiyon Webサービスによって得られる画像の違いを良く知るために全て日本語に対応すれば「格好良い男性」と「可愛い女性」かさもなければ「cool man」と「pretty woman」を指示して表し方も均一するためになるべく付け…
Bloggerに非常に素晴らしい機能が追加された。投稿のWebP画像の提供が管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定｜ Blogger 僕は自分のプログラムで、以前から 投稿のWebP画像の提供を自動化 していた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると欠点があることが分かって取り替えることは止めた。記事の表示速度を遅くするという逆効果を与えるものなので、できるかぎり、避けて使うようにした方が良いと思う。 関連ページ Bloggerの投稿画像の遅延読み込みの設定の利点と欠点 BloggerのWebP画像の提供の設定 Bloggerの管理画面の設定の投稿に「WebP画像の提供」のスイッチが付いている。 WebP を使用して投稿の画像を提供します 設定｜Blogger 記事／追加ページの画像ファイルが軽量…
Bloggerに非常に素晴らしい機能が追加された。投稿画像の遅延読み込みが管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定｜ Blogger 僕は自分のプログラムで、以前から 投稿画像の遅延読み込みの自動化 を行っていた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると少し欠点があることが分かって取り替えることは止めた。酷くて必ず避けなくてはならないようなものではないけれども使う場合は気に留めた方が良いと思う。 関連ページ Bloggerの投稿のWebP画像の提供の設定の利点と欠点 Bloggerの画像の遅延読み込みの設定 Bloggerの管理画面の設定の投稿に「画像の遅延読み込み」のスイッチが付いている。 ユーザーがページを下にスクロールするタイミングに合わせて、画像を個々に読み込みます 設定｜Blogger 記事…
サイトで使用できる 写真や動画などの無料素材のサイト に Pixabay がある。良いものが非常に多くてブログで最も良く使っている無料素材のサイトの一つなんだ。 トップページ｜ Pixabay 僕も、以前、 無料素材を提供していたことがあった けれどもホームページの提供元がサービス終了で自然消滅していた。しかし、今回、気に入りのPixabayのアカウントの 結城永人 で作品を掲載して、もう一度、皆に著作権なしで使って貰おうと思った。 画像を初めてアップロードして気付いたけれどもPixabayには無料素材の評価基準がある。どんな作品でも掲載できるわけではなく、たとえ掲載できたとしてもサイト内に表示される範囲が決められて良質なものでなければ無料素材のサイト内から除外されて目立たなくなってしまう。 折角、やるからには最高の評価を目指して少しでも人目に付くように掲載したいので、Pixabayの無料素材の評価基準について良…
サイトで使用できる写真やイラストなどの著作なしのフリー素材があってホームページやブログをやるときに助かる。 大体、 専用の検索サイト や 気に入りの個別のサイト で探せば良いのが見付かるんだ。 しかしどうしても良いのが見付からない場合、最終手段みたいな感じで、役立つのがGoogleの画像検索なんだ。 Googleの画像検索に著作フリーの「ライセンス可能」のバッジがある 画像検索｜ Google 以前はキーワードに関係する画像か並んでいるだけだったけれども2020年の夏から著作権フリーのライセンスを表示するようになって簡単に見付けられるようになった。 第一に私たちはライセンス可能な画像を見付け易くしています。出稿者や制作者がライセンス情報を提供したところでは「ライセンス可能」バッジを表示します。バッジが付けられた画像を見ようとすれば私たちはライセンスの詳細へのリンクを出しますし、もしも出稿者によって提供されるな…
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策（検索エンジン最適化） で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ｜Search Console｜ Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…
Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で実際にスニペットを表示する動作が止まるた…
サイトの画像をデバイス毎に振り分けてレスポンシブに表示するにはimgタグにsrcset属性でそれぞれの画像URLを設定するのが簡単だ。 目次 imgタグのsrcset属性のマークアップ 画像を画面幅で切り替える場合 画像を解像度で切り替える場合 srcset属性の画像のレスポンシブ配信の内容 画像は画面幅と解像度を加味して表示される 画面幅で画像を確実に振り分ける方法 srcset属性の幅記述子の省略は画像選択に影響し得る sizes属性のレスポンシブ配信の役割 imgタグのsrcset属性のマークアップ Person sitting on top of gray rock overlooking mountain during daytime by Denys Nevozhai / Unsplash imgタグはそのままで、srcset属性を特定の仕方で値を付けて追加する。 画像を画面幅で切り替える場合 <…
Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights｜ Google Developers PageSpeed …
ブログをサイトのパフォーマンスをチェックする Measure page quality にかけたらBest PracticesのUser ExperienceのServes images with low resolutionの警告が出たから何なのかと調べて修正した。 Serves images with low resolutionとは何か Best Practices｜Measure page quality｜ Google Developers 画像を低解像度で配信しているのが良くない。 画像の原寸法は表示サイズと画像を最大に明瞭化するピクセル比へ成形されなくてはならない。 原文 Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clari…
Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 追記：2023年9月から 投稿のWebP画像の提供がBloggerの設定から可能になった ので、本稿のプログラムは その他のキャッシュ期限のe#などを追加する とか デバイス毎のレスポンシブ配信を追加する なんて機能が必要なときに使うことを勧める。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメ…