CSS、画像、JSの圧縮作業に使える無料サービス
2018.10.12 Fri
CSS Minifier
https://cssminifier.com/
CSSコードを圧縮するサービス。
- 手順1
画面左の入力フォームに、コピーしたCSSコードを貼り付ける。 - 手順2
フォームの下のMinifyボタンをクリック - 手順3
圧縮後のコードが、画面右のフォームに表示される。 - 手順4
圧縮後のコードをコピーしてCSSファイルやHTMLファイル等に貼り付けて使用する。
CSS Minifier Syncer
https://syncer.jp/css-minifier
CSSコードを圧縮するサービス。
- 手順1
画面左の入力フォームに、コピーしたCSSコードを貼り付ける。 - 手順2
フォームの下の「Minifyする」ボタンをクリック - 手順3
圧縮後のコードが、画面右のフォームに表示される。 - 手順4
圧縮後のコードをコピーしてCSSファイルやHTMLファイル等に貼り付けて使用する。
Tiny PNG
https://tinypng.com/
PNG画像、又は、JPG画像を圧縮するサービス。
- 手順1
画面上部の「Drop your .png or .jpg files here!」に圧縮したい画像をドラッグする。(複数枚同時でも可) - 手順2
画像の圧縮が始まり、画像のファイル名の右側に圧縮の進み具合がバーで確認できる。 - 手順3
圧縮が終わり、画像のファイル名の右側にdownloadボタンが表示されたら、ボタンを押して、ファイルをダウンロードする。
(複数枚を一度に圧縮した場合は、圧縮ファイルの一覧表示のすぐ下にある「Save to Dropbox」または「Download all」で一括ダウンロードをするのが便利。
備考
このサービスは、Photoshopのプラグイン化もされており、Photoshopプラグインの設定さえ済ませておけば、PSDファイルからスライスした段階で画像が圧縮されます。手間が省けて便利です。
JS Minifier Syncer
https://syncer.jp/js-minifier
Java Scriptコードの圧縮をするサービス。
- 手順1
画面左の入力フォームに、コピーしたJavascriptコードを貼り付ける。 - 手順2
フォームの下の「縮小する」ボタンをクリック - 手順3
圧縮後のコードが、画面右のフォームに表示される。 - 手順4
圧縮後のコードをコピーしてJavascriptファイルやHTMLファイル等に貼り付けて使用する。