Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせるどういうこと？ 少し前に、CSS プロパティを自動ソートすると gzip 時のビルドサイズを減らせる記事を見ました 👇 これにならい、JSX の Props もソートしたら同じようになるんじゃね？って思って試したら、ビルドサイズを減らすことができたので、この場を借りてその知見を共有したいと思います 💪 検証環境 パッケージ名 バージョン
【2022年最新】WebPよりも軽いAVIFとは？最強の次世代画像フォーマットの解説と作り方 | 株式会社ココログラフ
コアウェブバイタルズの影響も受けて、表示速度に関する知識や、画像の圧縮に関してなどの情報集めに奔走している運営者様は多いでのはないでしょうか？ 現在では『WebP』がブラウザの対応もだいぶ浸透し、使いやすく圧縮率の高い画像フォーマットとな理ましたが、今回はなんとそのwebpをも超える軽量化を可能にした画像フォーマットである『AVIF』というものについて解説します。 AVIFとは？ AVIFとは、AV1 Image File Formatの略称で、画像や画像シーケンスをAV1で圧縮してHEIFファイル形式で保存するための画像ファイルフォーマットの仕様です。 HDR（ハイダイナミックレンジ）カラーをサポートしているので、アルファチャンネルやアニメーションにも対応可能。 jpgと比較すると約95％以上、WebPと比較しても30％近くのサイズ削減が可能なフォーマットとなっています。 元々は、有料ラ
新卒エンジニアがプレスリリース画像の画質改善に取り組んだ話
こんにちは、21新卒エンジニアの柳です。 この度、プレスリリースのサムネイル画像とプレスリリース詳細ページ内で掲載されている画像の画質改善を行いました。 今回行った画質改善の対象となる条件は以下の通りです。 12月中旬以降にアップロードして頂いた画像サイズが十分に大きい画像トップページ（https://prtimes.jp） で表示されているプレスリリースのサムネイル画像プレスリリース詳細ページで表示されている画像 画質改善前のプレスリリース画像の問題点 PR TIMESでは画像をエディタからアップロードしたときに、実際に画面に表示されるサイズと同じサイズにリサイズ処理をして、生成したサムネイル画像や詳細ページの画像をそのまま配信していました。PR TIMESのサービス開始時点であれば、画面に表示されるサイズと同じサイズの画像を配信することが画像の最適化として良い対応でした。 しかし昨今、
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
Squoosh
SmallSmaller images mean faster load times. Squoosh can reduce file size and maintain high quality. SimpleOpen your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. SecureWorried about privacy? Images never leave your device since Squoosh does all the work locally.
超簡単！imageminで画像圧縮のタスクを作ってみる【拡張子全部乗せ2018】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのザワです。 この夏、いい思い出はつくれていますか？ そうでもない？ でも、嫌な思い出は全部圧縮しちゃえばいいじゃない！ ということで、今回はフロントエンドのパフォーマンスを考える上で避けては通れない、画像圧縮のタスクを作ってみたいと思います。 「作る」と言っても、公開されているnpmパッケージを組み合わせて画像圧縮タスクを作っていくかたちになります。出来合いの惣菜を組み合わせて、簡単にお弁当を作るイメージですね。記述量も短く、すぐにできてしまうためにちょっと不安になりますが（これで本当にうまく動いているのかな、ってね）、惣菜だってレンジでチンするだけで美味しく食べれるんだから、理屈としては充分でしょう。 ちなみに「画像圧縮しよう」と心に決めた場合、npm scriptsだったり、ツールを使ったり、など選択肢はたくさんあります。 我が社が誇るスーパーフル
Apache httpd 2.4 + Brotli（mod_brotli）インストールメモ
Brotli は、Google が開発した新しい圧縮アルゴリズムです。Apache httpd など、インターネット通信で広く使われている圧縮形式 Deflateと処理速度は同じですが、圧縮率は約20%も向上しています。そこで今回は、CentOS7.3 (1611) に Apache httpd 2.4.27 と Brotli（mod_brotli）をインストールする手順をまとめてみました。 かなり前置きが長くなりました(^^;) とにかく Brotli のインストール方法を知りたい！ という方にはお手数ですが、 前置きをスキップ をクリックしてください。 Brotli についてBrotli は HTTPS が必須！各種ブラウザで Brotli 圧縮を使うには、HTTPS通信が必要ですので、WEBサーバーには SSL/TLS の設定が必須です。最近の傾向として HTTP/2（これも元々はG
WEBスピード向上・転送量削減する Brotli 圧縮と CDN の連携 | REDBOX Labo
WEB高速化をおこなうためには、コンテンツサイズを極力小さくできる圧縮配信が有効です。コンテンツ圧縮で有名なのはGzipによる圧縮配信ですが、Gzipよりも圧縮率が高いBrotliの概要について、またCDNと同時利用した場合の留意点を掲載いたします。 Brotliとは？ Brotli（ブロトリ）はGoogleがファイルサイズをさらに縮小するために開発したオープンソースの新しいLZ77アルゴリズムをベースとした圧縮アルゴリズムです。日本では馴染みが少ない読み方ですが、由来はスイスで“小さなパン”を意味する「Brotli」（ドイツ語）となっています。 既に「RFC 7932」の一部としてIETFによって定義されており、WOFF（Web Open Font Format） 2.0のフォント形式での圧縮方式の一部として作られたものが他のコンテンツ圧縮にも使えるよう汎用化されました。 Zopfliよ
グーグル、画像圧縮ウェブツール「Squoosh」公開 - ZDNet Japan
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Google Chrome Labsは、迅速にロードできるウェブページを作成するための画像の圧縮やフォーマット変換を実行する、「Squoosh」というウェブアプリを公開した。 このツールの目的は、画像を手軽に圧縮し、耐えられるレベルにまで画質を落とすことで、軽量かつ迅速にロードされるウェブページの作成を支援するというものだ。 しかしこのツールによって、Googleが開発した可逆／非可逆圧縮フォーマットである「WebP」の普及も支援されるはずだ。WebP形式をサポートしているブラウザは最近までほぼ「Google Chrome」のみだった。 Squooshはデスクトップ機器あるいはモバイル機器のどのようなブラウザ上でも動作するPWA（Pro
Mozilla 製 JPEG エンコーダー「mozjpeg」 - Qiita
Mozilla JPEG Encoder Project オンラインツール https://mozjpeg.codelove.de/ 2MB まで。 インストール CentOS 7.3.1611 へのインストール手順。 curl -LO https://github.com/mozilla/mozjpeg/releases/download/v3.2-pre/mozjpeg-3.2-release-source.tar.gz tar xf mozjpeg-3.2-release-source.tar.gz cd mozjpeg yum install automake gcc nasm ./configure && make && make install
Google製JPEGエンコーダー「Guetzli」 - Qiita
Guetzli [guɛtsli] とはスイスドイツ語でクッキーの意味。1 Go Guetzli or go home #baking #christmas #cookies #heyprettyeats https://t.co/55nX22aNOA pic.twitter.com/v4Fj8qyZo9 — HeyPrettyBeautyBlog (@HeyPrettyBeauty) 2015年12月5日 Google が2016年10月22日に GitHub で Initial Release を公開 2 した JPEG エンコーダー。2017年1月13日に GIGAZINE で紹介される。3 2017年3月15日に 1.0 がリリース 4 され、Google Research Blog でアナウンスされた 5 ため、同17日頃より国内メディアで紹介され始めた。 Google、より高画
動画ファイルの画質を損なわないロスレスカットがWindows・Mac・Linuxでできる「LosslessCut」
カメラの画質が向上したことで撮影した動画ファイルの容量が1GBを超えることが日常茶飯事になっており、データの取扱いや保存に苦労している人も多いはず。そんな場合には、映像の必要な部分だけを切り出してしまえば容量を節約できますが、切り出しの際に画質が劣化してしまうこともあります。そんなときに、元の画質を損なうことなく、サクッと手軽に映像の必要な部分だけを書き出せるアプリケーション「LosslessCut」がGitHubで公開されています。 GitHub - mifi/lossless-cut: Cross platform GUI tool for lossless trimming / cutting of videos using ffmpeg https://github.com/mifi/lossless-cut LosslessCutの画面はこんな感じにシンプル。上部には動画が表示さ
PNG画像をブラウザにドラッグ＆ドロップすればPNGを無劣化圧縮してくれる「TinyPNG」:phpspot開発日誌
TinyPNG ? Compress PNG images while preserving transparency PNG画像をブラウザにドラッグ＆ドロップすればPNGを無劣化圧縮してくれる「TinyPNG」。 デスクトップ等においてあるPNGファイルをブラウザにドラッグ＆ドロップするだけでpngを圧縮してくれてすぐダウンロードできるサービスです。 ためしにやってみたところ、サイズが半分近くの65%になりました。 次のようにサイズは変わっても無劣化だということが分かります 半分以下のサイズで無劣化なら使わない手はありませんね。 関連エントリ PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」 ドラッグ＆ドロップでCSSを瞬時に圧縮できるブラウザツール「excssive.com」
JPEGmini on the Mac App Store
*** JPEGmini is a robust image optimization tool, trusted by tens of thousands of photographers, that reduces photo file size by up to 80% without compromising quality. To try JPEGmini for free go to https://goo.gl/6Co9Ns*** What’s New: • Improved User Experience and a refreshed look • More Resizing Options • Bug fixes JPEGmini has been reviewed and praised by dozens of photography publications an
国産の圧縮形式「LZH」のUNLHA32.DLLの開発中止へ、LZH形式使用中止を呼びかけ
昔はZIP圧縮できるソフトが軒並み有料であったため、無料で使える国産の圧縮形式「LZH」は事実上のファイル配布時のデファクトスタンダード状態だったわけですが、ついにセキュリティ上のもろもろの事情によって、UNLHA32.DLL・UNARJ32.DLL・LHMeltの開発が中止されることになりました。バグフィックスは継続されるものの、64ビット版や低レベルAPI追加版は出る予定はなくなるそうです。 また、「(特に団体・企業内で) LZH 書庫を使うのは止めましょう」ということで、LZH形式の使用中止も呼びかけられています。 一体何がどうなってこのようなことになったのかという詳細は以下から。 お知らせ http://www2.nsknet.or.jp/~micco/notes/ann.htm(InternetArchive) UNLHA32.DLLなどの開発者であるMicco氏の公式サイトに、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SketchからExportすると同時に圧縮するプラグイン
GitHub - mrclay/minify: Combines. minifies, and serves CSS or Javascript files
JPEGmini | Leading JPEG Compressor & Image Size Reducer