データ特性による圧縮されやすいJPEG/PNGファイルの作り方 - hitomedia Tech Blog

はじめまして。 株式会社ヒトメディアでフロントエンドをしつつ、時々デザイン周りの監修をしている いとー です。 ヒトメディアでは毎月、有志が集まり勉強会を開いています。 今日はそこで発表した、画像形式とその内容における圧縮のしやすさについての資料を公開したいと思います。 この記事の内容 バナーやLP用の画像作成したものの、規定容量超えちゃった! どうしよう... 😅 ってよくあるよね ファイルの形式によって、圧縮されやすい画像とされにくい画像があります 圧縮されやすい構造を理解することで、質の高い軽い画像を作ろう✨ この記事を読んでほしい人 容量とにらめっこすることの多いデザイナー 少しでも軽いサイトを作りたいフロントエンドエンジニア はじめに 一般的に「画像を軽くする」というと、書き出し時のクオリティ選択や、 書き出し後にメタデータを撤去するなど、ツールで処理する印象があると思います。

[cucumisin]

というわけで書きました。この記事が誰かの助けになれば嬉しいです。

[wingsgate]

データ特性による圧縮されやすいJPEG/PNGファイルの作り方 はじめまして。 株式会社ヒトメディアでフロントエンドをしつつ、時々デザイン周りの監修をしている いとー です。 Tags: from Pocket June 12, 2018 at 09:08AM

[ayakanishino8]

最近、悩んでいたので助かりました！

[solidstatesociety]

モバイル用途の場合、画像サイズ大きくしたまま圧縮率下げて粗めの画像にすると意外と見た目気にならなかったりする

[fishma]

サイズ/画質比の話をしていてwebpが選択肢にないのか。。。

[n314]

圧縮

[yarumato]

“JPEGは背景をぼかして境界線を滑らかに加工。似たような色味を連続させる。PNGはPNG-8(256色減色)で書き出す。ポスタリゼーションで階調数の調整”

[bottomzlife]

そういえば似たような話で。JavaScriptやCSSをminifyするとエントロピーが増大しちゃうのでgzip配信時に圧縮率が下がる、ってのがあるんだよね。実際ベンチマークとった。それ以来minify厨にならないよう気をつけてる

[hilotter]

画像加工の知見🙏