質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

2回答

363閲覧

画像圧縮、サイズ変更について。皆様はどうされているか??

kazoogon

総合スコア281

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2018/09/09 22:44

編集2018/09/10 11:41

現在していること

個人プロジェクト内で、画像を30枚ほど扱ったが重かった
→画像圧縮の方法について意見を聞きたい

私がしたこと


https://www.iloveimg.com/ja/resize-image
ここでサイズ変更(75%)縮小、だいぶ軽くなる

②gulp imagemin使用
→結果「gulp-imagemin: Minified 10 images (saved 552 kB - 1.7%)」

聞きたいこと

・この2つで十分なのか否か(gulp imageminでは1.7%縮小なので、これ使う意味あるのかとも思っております)

・この他皆様が使用されている圧縮方法についての意見

またpagespeed insights(https://developers.google.com/speed/pagespeed/insights/)などでスピードをチェックできますが、これをローカル環境でもできるツールはあるのでしょうか??
(deploy先のサーバのスペックも影響するのでローカルだと意味ないのか。。。 ともおもっておりますが..)

宜しくお願い致します。

質問を受けての追記

画像のサイズは40~50KBです

page speed insightsにて

herokuにdeployしてこの結果となりました。
画像を1発で最適化する良い方法はあるのでしょうか??
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KoichiSugiyama

2018/09/10 04:12

扱っている画像一枚につきどれくらいのサイズなのか記載していただいたほうが、有用なアドバイスが集まりやすいと思います。
kazoogon

2018/09/10 07:18

ありがとうございます。 「質問を受けての追記」に追記いたしました
guest

回答2

0

ベストアンサー

話せば長くなるので要点だけ書きます。適宜調べてください。

・JPEGとPNGを適切に使い分ける
自然の写真など空間周波数の低い画像はJPEG、色の境界のはっきりしたイラストや文字はPNGが容量が少ないです。

・PNGはソフトによってわりと圧縮率が違う
画質を変えずに最適化するソフトなどあるので使うとよいでしょう。

・JPEG最適化はやって損はないがさほど得もない
1.7%縮小とか出るものがJPEG最適化です。画質を変えず容量をわずかに減らせます。

・JPEGは画質と圧縮率のトレードオフ
画質/圧縮率を設定できるソフトで我慢できる限界まで画質を落とすとよいです。
多くの場合画質0~100などの数値で指定できます。

・自然画像でない限りカラーサブサンプリングをオフ
JPEGで色にじみが発生する原因がこれです。
スクリーンショットや文字を入れた画像などはこれで大きく画質が変わります。
カラーサブサンプリングは色の(サブ)サンプリングなどとも呼ばれ、オン/オフや1:1:1/4:4:4などの設定があります。
多くのソフトで指定できません。

投稿2018/09/12 16:22

ikadzuchi

総合スコア3047

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazoogon

2018/09/14 05:50

回答ありがとうございます。 たまたまphotoshopのバッチ機能で画像ファイルを一括処理するこちらのページをっ見つけました。 https://techacademy.jp/magazine/2048 こんな感じでPHP, rubyなどでimgフォルダの中全部あるサイズに変更してくれる。っていう機能ないのかなぁって思っております
guest

0

オンラインのサービスをなるべく使わないようにしているかな…
できる限りPhotoshopで画質を下げたりして軽くしています
サービスのやつだと、画像が荒くなったりするので…

昔使ってたサービスだと下記のサイトを私は使用していましたよ。

https://tinyjpg.com/
https://compressor.io/
https://imagecompressor.com/ja/

投稿2018/09/10 09:17

TONGARI

総合スコア184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazoogon

2018/09/10 10:49

回答ありがとうございます。 やはり一番大事なのは元の画像のサイズってことなんでしょうか??
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問