WebPを本格導入しました。 | 春日井 小牧 名古屋でホームページ制作は FULLウェブデザイン

キーワード|春日井 小牧 名古屋でホームページ制作は FULLウェブデザイン | 名古屋市・瀬戸市・尾張旭市・一宮市・小牧市・多治見市・北名古屋市など出張OK
キーワード|春日井 小牧 名古屋でホームページ制作は FULLウェブデザイン | 名古屋市・瀬戸市・尾張旭市・一宮市・小牧市・多治見市・北名古屋市など出張OK
お気軽にご相談ください!
無料相談フォーム
0568-36-3104

平日 10:00〜16:00 担当 渡邊


WebPを本格導入しました。

 

こんにちは FULL WEB DESIGN の渡邊です。

 

WebPって知ってますか?

jpegとかpng みたいな画像の圧縮形式です。

 

WebPって簡単に言えばmp3みたいなもので、

超圧縮するけど、人間的にはそこまで気にならないような圧縮をする技術です。

※すでにこのサイトもWebp対応済みです。

 

めっちゃ画像のデータ量軽くなるんで、すごいんですが、

新しい技術なので、すべてのブラウザで表示できない、というリスクがあったんですが、

最近、ほとんどのブラウザで対応出来ているみたいで、

別件でお客さんの要望もあり、
そろそろ本格的に導入しようかと、向き合いました。

画像が軽くなると、読み込み速度も早くなって、SEO対策にもなって、検索順位にもいいからね。

 

WordPressでWebPを利用出来るようにするには

プラグインを使います。

EWWW Image Optimizerという有名なプラグインです。

細かい使い方は取説サイトがあるので貼っておきます。

使い方参考URL

これを入れると、自動でWebP画像を利用できるようになります。

但し、あくまで、アップロード画像に限るようです。(間違っていたらすみません)

(追記、サイトによっては、テーマファイルも変換されたり、されなかったり、挙動が不明確)

 

また、過去の画像をwebpに変更するのも、

画像が大量にあると、なかなか時間がかかりました。

 

WebPは確かに軽い

実際、2000px ×1500pxの画像が150kb程度で表示できました。

 

ここまで、軽くできるなら、

今回、別件のご要望のあった、

レティナディズプレイで、大きい画像をきれいに見せたい、

という事も、ファイルサイズで、難しかった部分も可能だなと思いました。

 

WordPressでレティナ対応画像を表示させるには

どうやら、worpdressはデフォルトで、表示させる機能がついているようで、

あとは、対応になるための画像、を用意すればいいようです。

 

今までも、ブログ投稿などは勝手にレティナ対応になっているのは、確認していましたが、。

 

しっかり検証した結果、

最適サイズ(×2倍サイズに近いサイズ)があれば、それが出る。(レティナデスプレイでのみ表示される)

ドンピシャサイズがあればそれが出るようです。

 

ただし、クロップ(縦横比を指定して切り抜く設定)に指定している画像の場合、同じ縦横比の大きい画像がなければ表示されないようです。

 

カスタム投稿タイプなどで、サイズ指定している場合は、同じ比率が通常はないので、

対応させたい場合、新たに切り抜くサイズの画像を作成しなければならない、。

 

Regenerate Thumbnails

というプラグインで、サムネイルの再作成ができるので、それを実行すれば、新たに追加したサイズも作成できます。

ただし、これも、それなりに画像が多いと時間がかかります。

少量であれば、1つずつ画像を指定して出来るでしょう。

 

wordpressに指定サイズ画像を増やす方法は色々ありますが、

自分は、ファンクションに記載する方法でやっています。

 

 

 

アップロード画像以外のwebpの対応方法

wordpress の場合、EWWW Image Optimizerを入れる際、設定すれば
対応ブラウザの場合はwebpという分岐を勝手にやってくれるのでいいですが、

通常の画像はどうでしょうか?

最近のブラウザは90%以上webpに対応しているので、webpのみでいくのも有りかとは思います。

 

どうやら、

EWWW Image Optimizerの設定の際、

.htacessにコードを入れるのですが、そのコードを入れると、

対応ブラウザの場合はwebpという分岐を勝手にやってくれるようです。

やり方は、ファイル名を、

「img01.jpg」の置き換え画像の場合「img01.jpg.webp」
「img11.png」の置き換え画像の場合「img11.png.webp」

とすれば勝手に対応ブラウザの場合切り替わるようです。

 

参考URL:https://hibi-update.org/other/webp-practical/

 

なので、いままでの画像に新しく、同じディレクトリに、.webpの画像を作成してアップすればよいでしょう。

 

 

cssでバックグランドで置いて見せている画像はどうなるのか?

これに関しては、htacessでは対応出来ていないようで、

cssで指定しないとだめなようです。

 

追記

ーーーーーーーーーーーーーー

※と思ったのですが、wordpressのサイトで実際に背景画像にもwebp画像を作成してみると、
置き換わっていました!驚 (macでgoogle chrome)

ーーーーーーーーーーーーーー

 

ただ、こちらのリンクにあります、インターネットエクスプローラーの終了の記事

https://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?rid=3&PID=5311-3246

2023年2月14日(日本時間2月15日)以降は、Internet Explorer 11が無効化され、使用できなくなりました。

Internet Explorer 11が無効化されると、Internet Explorer 11を起動しようとしても、Microsoft Edgeが起動します。

 

ということなので、事実上、分岐は必要ないかもしれませんね。

web制作でみなさん、気になっていたのは、間違いなくインターネットエクスプローラーを未だに利用している人が少なからずいたことですから。

 

一応、分岐方法はこちらに書いてありました。

背景画像にwebpを使おう!

modernizr.jsを入れて、

対応ブラウザの場合と、でない場合に、それぞれ別のクラスが入るから

cssをそれぞれ書いて、背景画像を切り替える方法なようです。

 

分岐は必要でないかも Internet Explorer 11が無効化されると、Internet Explorer 11を起動しようとしても、Microsoft Edgeが起動

先程も書きましたが、

2023年2月14日(日本時間2月15日)以降は、Internet Explorer 11が無効化され、使用できなくなったということなので、

もう分岐せずに、webpのみでも大丈夫なのかもしれません。

 

 

MACでWebp画像に変換するには?

WordPressのプラグインで勝手に変換してくれる分はいいですが、

そうでない部分はどうしましょう。
ということで、普段、イラレで画像を作成していますので、

イラレで出来ないか試みた所出来なみたいです。

 

なので、MACにアプリを入れました。

その名も

WebP Converter.

試しに使ってみると、普通に変換できました。

ファイルサイズもしっかり小さくなってる。

 

画像の一括リネームは、
私が使っているファインダーアプリ、path finderでもできました。

ただのファインダーでもできるみたい。

 

そこでまた疑問に思った事、もとの画像の圧縮度によって、完成したwebpのサイズってかわるん?ってこと。

そこで試しに、画像をjpgで20のクオリティと、100のクオリティで書き出してみて、

両方ともwebpに変換してみました。

そしたら、どっちも同じようなサイズに収まりました。

元サイズはファイルサイズがかなり違います。

 

また、圧縮前に、普段よく使うイメージオプティムというアプリで

いつもどおり非可逆圧縮してjpegでは最も小さく圧縮して

その後webpに変換してみましたが、出来るファイルサイズはあまり変わらなった。

 

つまり、圧縮まえにどんなファイルでも、同じようなサイズに圧縮されるようです。

Webpだけでいくならきれいに書き出したほうが気持ちいいかな?

jpegとWebpでいくなら手間なので、最もファイルサイズを小さくしてから変更かな?

 

参考までに。

 

それでは!

 

 

 

ホームページ制作ならFULLウェブデザインにお任せ下さい。

開業12年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。

グラフィックデザインは20年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。

お気軽にお問い合わせください。

 

初回お問い合わせは、メールにてお願いいたします。

お問い合わせフォーム

 

 

 

Watanabe Kousuke
編集者
Watanabe Kousuke

1980.11.26生まれ B型 2児の父 愛娘家 趣味:料理 DIY

2000年名古屋栄にあるデザインの専門学校を卒業。グラフィックデザイン歴20年以上、WEB制作歴15年以上。20代はもっぱら音楽活動(HIPHOP)に明け暮れながら、看板屋(看板・店内サイン制作)、デザイン会社(WEB等制作担当)などに勤める。30歳でホームページ制作で起業し、ひたすらホームページを作成し、結婚・2人の子育てなどを経験。2020年代(40代)は実りの年にしたく、色々と野望を湧かすw

instagram





ほぼネコスタグラム


ブログタグ

春日井 (1) ブログ改造 (1) ホームページ制作 (3) HP制作実績 (1) 名古屋 (1) 美容院 (1) SEO対策 (2) 検索結果 (2) 我がサイトSEO (1) カッティングシート (1) クラフトロボ (1) iMac (5) メモリ (1) ssd (4) USB3.0 (2) Thunderbird (4) WIN→MAC (1) サンダーバード (2) dock (1) ターミナル (1) LION (1) Mac (7) MG3130 (1) プリンタ (1) hoster (1) Virtual Host (1) xampp (1) Adminimize (1) Biz Calendar (1) User Role Editor (1) wordpress (7) Custom Field Gui Utility (1) welcart (2) フィン君 (1) HDD (2) Time Machine (1) 別パーティション (1) 外付け (2) hdw14 (1) wimax2 (1) ソフトウェアアップデート (1) More..
改善 (1) 年始年末の営業 (1) ph (1) ロイヤルカナン (1) 尿結石 (1) 膀胱炎 (1) 出張カメラマン (2) finder (1) 再起動 (1) EaseUS Todo Backup Free (1) hp pavilion g6 (1) デザイン事務所 (2) 新設 (1) 沖縄 (1) 移転 (1) 事業者概要 (1) おもしろい (1) キャットスマック (1) デザイン (1) パッケージ (1) ほっこりした (1) 猫のえさ (1) Illustrator (1) アプリケーションフレーム (1) フルスクリーンモード (1) Instagram (2) Instagram feed (2) アカウント切り替え (2) インスタグラム (2) ウィジェット (2) サイドバー (2) プラグイン (2) 複数アカウント (2) Crayon Syntax Highlighter (1) ntax highlighter (1) PS Disable Auto Formatting (1) ipodtouch5カメラ (1) SONY NEX-C3 (1) デジタル一眼レフ (1) 修正 (1) 写真 (1) 写真修正 (1) 撮影 (1) 視野角 (1) DropBox (2) PC共有 (1) FileZilla (1) FTP (1) パーミッション (1) インテリポイント (1) マウス (2) 起動時 (1) paypal (1) ショッピングサイト (1) Custom Field Suite (1) ビジュアル (1) Tシャツ (1) タオル (2) のぼり (1) 横断幕 (1) 田中恒成 (2) Nexus5 (2) SIM FREE (2) 楽天モバイル (3) ヒスタミン食中毒 (1) 抗ヒスタミン剤 (1) 治療薬 (1) amazon (1) プライムビデオ (1) chrome (2) バグ (1) 管理画面 (1) 太る (1) 睡眠不足 (1) カテゴリ (1) ClipMenu (1) DockMenus (1) XtraFinder (1) 仕事効率化 (1) ボクシング (1) macbook air (1) UASP (2) ディスクユーティリティ (2) 外付けssd (3) NifMo でんわ (1) ニフモ電話 (1) 使えない (1) 解約 (1) 違約金 (1) 5ボタン (1) BSMBB23S (1) BUFFALO (1) osx (2) マウスドライバ (1) .htaccess (1) 301リダイレクト (1) Redirection (1) エンコード (1) できない (1) デフォルトパーマーリンク (1) パーマーリンク変更 (1) ポストタイプ変更 (1) 上手く行かない (1) 効かない (1) 日本語URL (1) 糖質制限 (5) デザイン住宅 (1) 住宅 (1) 新築見学会 (1) 見学会 (1) ズブロッカ (1) SD-BH1000 (1) カロリー制限 (1) きな粉 (1) きな粉パン (1) ホームベーカリー (1) 大豆粉パン (1) document2.zip (3) ウイルス (3) document1.zip (1) こすりん棒 (2) セラミックスクリーナー (2) Late2012 (1) MK462J/A (1) Addon (1) Quicktext (1) 下痢 (1) 人工甘味料 (1) コンタクトフォーム (1) チェックボックス単一 (1) チェックボックス択一 (1) 表示領域切り替え (1) 壁紙 (1) 変更 (1) 時間帯 (1) キャッシュ (1) アンドロイド (1) クローム (1) Blackmagic Disk Speed Test (1) IOUSBAttachedSCSI (1) OS X El Capitan (1) SSDケース (1) ベンチマーク (1) ヒアリ (1) LINE (1) SIM (1) ガラゲー (1) 年齢認証 (1) アドバンスカスタムフイールド (2) ユーザー (1) 出力 (1) Viltrox L116T (1) 尾張旭市でホームページ制作 (1) 春日井の刺繍屋 (1) NINICAFE (1) NINICAFE ハンバーグ (1) 尾張旭 (1) ak69 春日井 (1) MAMP PRO (2) 3D NANO MLC (1) 3D NANO TLC (1) MLC (1) TLC (1) 鳳雷 (1) ソイプロテイン (1) ソイプロテインダイエット (1) ダイエット (1) Auto Post Thumbnail (1) type pad 絵文字 (1) インドネシアランチ (1) インドネシア料理 (1) オーガニックコーヒー (1) カヤトースト (1) ハラールフード (1) 免許再交付 (1) 免許再交付 平針運転免許試験場 (1) 平針運転免許試験場 (1) 財布落とした (1) ビビった (1) MAMP PRO 5 (2) e-tax (1) 確定申告 (1) コンテンツに応じた塗りつぶし (1) カテゴリページに訪問数 (1) タグページに訪問数 (1) タクソノミーページに訪問数 (1) タームページに訪問数 (1) アーカイブページに訪問数 (1) Smash Balloon Social Photo Feed (2) サーバーの識別情報を検証できません (1) DNS (2) TTL (1) Internet Explorer 11 (1) virtualbox (1) Windows10 (1) VirtualBox Guest Additions (1) 小牧市 ホームページ制作 (1) 小牧市 プロカメラマン撮影 (1) OPPO A5 2020 (1) Macbook pro 16インチ 整備品 (1) M.2 (Type2280) (2) M key (1) Macbook Pro (1) Macbook pro 16インチ (1) Thunderbolt 3 (2) M.2 (2) NVMe (1) 「いいね」購買横行 (1) iphone12 (1) 5G (1) iphone12 pro (1) マスクの範囲をアートボードに (1) svg (1) バージョンアップ (1) wp_list_categories (1) User Access Manager (1) conoha wing (1) ssh (1) 春日井市 (1) 県営名古屋空港ターミナルビル (2) 大規模接種会場 (1) コロナワクチン (2) コロナワクチン副反応 (2) コロナワクチン副反応 頬張れる (1) コロナワクチン副反応 唇腫れる (1) モデルナ2回目 (1) MAMP PRO 6 (2) イラレで書き出すと色がくすむ (1) ADOBE RGB 1998 (1) DCI-P3 95% (1) プレーンテキスト (1) コピー&ペースト (1) WEB広告 (1) ランディングページ作成 (1) WEB広告&ランディングページ作成 (1) Mac なんか悪い (1) APFSフォーマット (1) クローン (1) googleアナリティクス (1) GA4 (1) タグマネージャー (1) M.2 SSD (2) thunderbolt2 (1) Thunderbolt 3(USB-C)- Thunderbolt 2アダプタ (1) imac2015 (1) ブログカード リンク効かない (1) イラレ 実寸 (1) イラレ 実寸 66.7% (1) イラレ 実寸 66.7% web (1) パソコン用眼鏡 度数 (1) xserver (1) XSEVER 新サーバー簡単移行 (1) CMYK300% (1) webp (1) Adobe XD (1) Figma (1) uiデザインツール (1) モバイルファーストデザイン (1) Export media with selected countent (1) パテックスうすぴたシップ 回収 (1) phpmyadmin (1) twitter (1) X (1) イラレからXDにコピペ (1) textedit (1) 行間 (1) エッセンシャルグラフィックス (1) エラー (1) 落ちる (1) MAMP PRO アップデート (1) Media Sync (1) ドメイン移管 (1) VSCode スニペット (1) DKIM設定 (1) MAMP PRO 8 (1) MAMP PRO 7 (1) 金魚 水換え時期 (1) 一日に必要なタンパク質 (1) タンパク質 (1)


よく読まれている 人気記事


過去30日間 人気記事


営業日カレンダー
« 2024年6月»
      1
2345678
9101112131415
16171819202122
23242526272829
30      
  • 休日

ホームページ制作 FULLウェブデザイン

0568-36-3104
info@d-marking.jp
営業時間:10:00 〜 16:00
(フレックスタイム制-週40時間以上)
定休日:土日祝日 お盆・GW・年末年始
〒486-0956
春日井市中新町1-12-1宝味美ハイツ403


 

ホームページのことならお任せください。
開業12年以上の経験で、ご満足いただける
ホームページ制作を目指しております。

ホームページ制作のご相談はお気軽にどうぞ!
無料相談フォーム
0568-36-3104

平日 11:00 〜 17:00 担当渡邊

春日井 小牧 名古屋でホームページ制作は FULLウェブデザイン | 名古屋市・瀬戸市・尾張旭市・一宮市・小牧市・多治見市・北名古屋市など出張OK


打合せオフィス

春日井市勝川町7丁目37番地 ネクシティパレッタ1F Room8(JR勝川駅徒歩2分)※完全予約制

インターネットでホームページ制作|春日井 小牧 名古屋でホームページ制作は FULLウェブデザイン | 名古屋市・瀬戸市・尾張旭市・一宮市・小牧市・多治見市・北名古屋市など出張OK

全国対応

サービス・デザインが気に入った!など、
インターネットにより、全国どこでも制作受注可能です!
お気軽にご相談ください。

インターネットでホームページ制作|春日井 小牧 名古屋でホームページ制作は FULLウェブデザイン | 名古屋市・瀬戸市・尾張旭市・一宮市・小牧市・多治見市・北名古屋市など出張OK