カテゴリー : 画像

アニメーション gif をループ再生させる設定方法

Mac の Finder 上でアニメーション gif ファイルをスペースキーで開くとエンドレスリピート再生されるのに、ブラウザで開くと1回しか再生されないのなんでだろう?と思って調べてみました。

Stack Overflow に同じような質問があって「gif ファイルに定義されているから、エンドレスアニメーションループを有効にする編集をするんだ」みたいな回答が書かれてあって、「あ、そりゃそうだよね」と妙に感心してしまいました。

gif ファイルの編集には Gifsicle というCommand-Line Animated GIFs ツールを利用しました。

gifsicle のインストール

brew install gifsicle

ループ設定方法

無限ループ

original.gif のループ回数を無限に設定するには -l, –loopcount オプションをつけて gifsicle コマンドを実行するだけです。

gifsicle --loopcount original.gif > output.gif
gifsicle -l original.gif > out.gif

-b, –batch オプションをつけることで original.gif に上書きすることもできます。

gifsicle --batch --loopcount original.gif
gifsicle -bl original.gif

ループ回数を指定する

original.gif のループ回数を指定したいときは -l=N, –loopcount=N というオプションで設定できます。

例えば、ループ回数 2 の場合、

gifsicle --loopcount=2 original.gif > out.gif
gifsicle -l=2 original.gif > out.gif

で設定できます。この場合、合計で3回アニメーション gif が再生されます。

JPEG 画像を Jpegoptim でロスレス圧縮する

Mac で JPEG 画像を Jpegoptim を使ってロスレス圧縮する。

Jpegoptim をインストールする

brew install jpegoptim

JPEG ファイルをロスレス圧縮する

メタデータを全て削除するオプション –strip-all だけ付けて使っています。

jpegoptim --strip-all sample.jpg

現在のディレクトリの JPEG ファイルを一括でロスレス圧縮する

find . -name '*.jpg' -o -name '*.jpeg' | xargs jpegoptim --strip-all -o

参考情報

PNG 画像を OptiPNG でロスレス圧縮する

Mac で PNG 画像を OptiPNG を使ってロスレス圧縮する。

OptiPNG をインストールする

brew install optipng

PNG ファイルをロスレス圧縮する

メタデータを全て削除するオプション –strip all だけ付けて使っています。

optipng --strip all sample.png

現在のディレクトリの PNG ファイルを一括でロスレス圧縮する

find . -name '*.png' | xargs optipng -strip all

参考情報

画像圧縮サイト、ツールまとめ

JPEG画像のファイルサイズを1/5に軽量化するオンラインサービス

JPEGmini – Your Photos on a Diet! はてなブックマーク - JPEGmini - Your Photos on a Diet!

PNG画像を圧縮してくれるサービス

TinyPNG – Compress PNG images while preserving transparency はてなブックマーク - TinyPNG – Compress PNG images while preserving transparency

ドラック&ドロップで速攻圧縮してくれるImageOptim

ImageOptim — make websites and apps load faster (Mac app) はてなブックマーク - ImageOptim — make websites and apps load faster (Mac app)

[フリーソフト] PNG画像を無劣化で圧縮できるWindows用アプリ「PNGGauntlet」

PNGを無劣化で圧縮できるWindows用フリーソフト「PNGGauntlet」が便利そうなのでメモ。

・DL:PNGGauntlet – PNG Compression Software | BenHollis.net はてなブックマーク - PNGGauntlet - PNG Compression Software | BenHollis.net

・参考:PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌 はてなブックマーク - PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌

Webサイトの表示速度を上げるためにも、できるだけ画像サイズを小さくするなどの工夫は必要ですよね。