テックブログWizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。バックエンド今回はPHPのLaravelで既存画像のWebP化及び切替表示について実装例を紹介してみようと思います。記事の画像をWebP化することによって記事の表示スピードを早くする。WebP(うぇっぴー)とは軽量の新画像形式で開発したグーグルによると、画像をWebP化することによって可逆形式ではpngの26%、不可逆形式では25〜34%もファイルサイズを減らすことができると紹介されています。詳細については[こちら]をご覧ください。等の最新版で使用でき、8割近いブラウザで使えるようになってきたそうです。WebP対応ブラウザ確認は[こちら]をご覧ください。画像を使う記事サイトで高速化のためにWebPを使うことが有効ですが、サポートしないブラウザもあるのでWebP対応ブラウザはWebPを、非対応ブラウザは既存画像(jpegやpng等)を利用するなど切替表示の必要があります。画像ファイルURL画像ファイルURLは、認証制御の理由で実際のファイルURLを利用しないで下記のようにAPIで取得します。画像ファイルの情報は下記のようにDBのテーブルに格納しています。16:13:59App\Models\ImageFileには上記テーブルの項目が入っています。'print_r(gd_info());'下記が表示される場合、サポートされていないのでlibwebpライブラリをインストールする必要があります。'print_r(gd_info());'下記が表示されればWebPがサポートされていると考えられます。Intervention\Image\Facades\Image::class,]下記のコマンドで、configフォルダ内にimage.phpという設定ファイルが作成されます。Imageインストールは完了です。ブラウザによって自動的に切り替えできるようにします。[L]</IfModule>.htaccessはできることが多いので良かったら[こちら]も参考に見てください。画像取得処理.httaccessのリダイレクトでURLに追加した?webp=1を取得し、対応ブラウザかWebPだったらWebPに切り替えるようにします。既存画像のWebp化対応バッチで一括で記事既存画像のWebp化の仕組みを作ります。}}プロジェクトディレクトリに入って、下記のコマンドでWebPファイルが作成されました。CreateWebpFileさいごにバックエンドエンジニアとしてWizに入社後、アプリケーション実装だけでなくSEO対策、SSL更新、メールサーバー構築、WEBサーバー構築など幅広く挑戦・成長できるチャンスをたくさんもらいました。Wizではエンジニアを募集しております。興味のある方、ぜひご覧下さい。hook)phpのパッケージphp-cs-fixerを使ったコードフォーマットのやり...2021-07-09面倒な作業をコマンドでできるようにする業務効率化のためにShellスクリプトを書いてみました。~開発環境構築からデプロイまで~こんにちは、フロントエンドエンジニアの高野です。(1)リンク利用規約/免責事項このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。はてなブログをはじめよう!wiz012さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。