一度で20MBくらい送信できて共有できる（無料）

お世話になります。
本当に無知な質問で恐縮なのですが、

現在、ブログを作っていまして、CSSを簡単にいじくっています。（初級程度）
そこで、GIFを表示したいのですが。GIFが１５MBくらいのもので、これを色々なソフトで圧縮しても
せいぜい１０MGくらいにしかなりません。（劣化します）

今は、imgやらjsテキストを外部から読み込むために、FC2や忍者ブログのサーバーを使っていますが、どちらも最大保存容量は大きいですが、一回のファイル送信が２MBまでなので、画像やらテキストとか軽いものしか使えてません。

他によいサイトはないでしょうか？


作ってるブログサイトはアメブロです。
宜しくお願いします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/11/15 22:25

そんな巨大なGIF画像なんて聞いたことありません。

写真のような画像をGIFにしているとか、画像フォーマットの選択が間違っているのではないですか？
　そんなデータを読まされるユーザーもたまったものじゃありません。

　まず画像フォーマットを再検討してください。

　どのような画像なのですか？
　

この回答へのお礼

ご回答ありがとうございます。
質問の仕方が悪くて恐縮です。

＞そんなデータを読まされるユーザーもたまったものじゃありません。
仰るとおりです。後から気づきました。＞＜

＞どのような画像なのですか？
下の回答者様にも書いたのですが、

簡単に言えばリンクボタンです。

よく見かけるのが、チカチカするのだったり、猫がカクカク動いてるのがありますね。
それをリンクボタンにしているのとか。

そこで私は今回、チカチカするのではなくAの画像からBの画像（２枚）へゆっくり変化するもの
元の画像png（500x500 213KB）x２枚です。
これは写真ではなく、自分でロゴみたのを２枚作りました。色は白と黒の２色です。
それをリンクボタンにしたいと思い検索してみました。＞「滑らかに動くGIF画像」
そこで見つけたソフトがこれです。FotoMorph　完成画像も見れます
http://pc.mogeringo.com/archives/15120

これなら簡単に手間なく滑らかな動きができると思いました。
そして変換も最低な画質で変換したのですが、それでも１０MBくらいになってしまいました。

なのでこれを最適化するため違うソフトで、256色を落としました。
最低まで落としても小さくならなく画像は色を失い見れなくなってしまいました。
それでアップできる場所を質問したわけです。

他にGIFを滑らかに作る方法があれば良いのですが・・。

GIF画像をあまりよく理解してません。
とても丁寧に解説いただき、ひたすら感謝しております。
改めて、御礼申し上げます m(_ _)m

お礼日時：2012/11/16 03:02

No.6 回答者： ORUKA1951 回答日時： 2012/11/16 17:52

GIF画像を中間色をなくして作りかえると、2.22KBですね。

10MBの１/4500 のサイズで同等のことができます。
　・・・このようなコンテンツの飾りでしかない画像に大きなスペース(労力)を割くのは無駄です。良い機会ですから見直して見ましょう。

この回答へのお礼

お返事が遅れたことお詫びします。
あれから、教えていただいたご説明で設置することに成功いたしました。
報告を兼ねてお礼申し上げます。
とにかくアメブロは制限が多く苦労しましたが
ORUKA1951様の仰るとおり「サイズ」には注意することにしました。

この度は本当に有難うございました。

お礼日時：2012/11/30 16:34

No.5 回答者： ORUKA1951 回答日時： 2012/11/16 14:19

リンクボタンですか？

　結論から言うと、そんなものに大きな容量を割くのは色々な意味で無駄です。
　アニメーションを使うにしろ、画像数を数枚にしましょう。パレットは共通にして必要な部分だけを書き直す方法で数キロバイト以内に押さえましょう。

　またスタイルシートを使って単純に二枚の画像を入れ替えても良いです。下記にサンプルを上げておきますが、画像は4つのリンク先すべて一枚の16色　400ox(w)×60px(h)の画像2.9kb意一枚しか使いません。(添付図参照)。HTMLもごらんのようにシンプルですから、スタイルシートでどのようにもデザインできるでしょう。
[画像]
添付図を見本に100px×30pxの画像を4×2に並べたものを用意する。
　　※タブは全角スペース２個に置換しています。
<div class="nav">
<ol>
<li><a href="/">トップ</a></li>
<li><a href="./product">製品</a></li>
<li><a href="./profile">会社情報</a></li>
<li><a href="./history">問合せ</a></li>
</ol>
</div>

[スタイルシート]タブは全角スペース二個に置換してある。
div.nav{width:80%;margin:0 auto;line-height:30px;}
div.nav ol,
div.nav ol li{
　　display:block;list-style-type:none;
　　text-align:center;margin:0;padding:0;
}
div.nav ol{display:block;}
div.nav ol li{
　　display:inline-block;width:100px;
　　position:relative;
　　background:url(./images/nav.gif) 0 30px;
}
div.nav ol li+li{background-position:100px 30px;}
div.nav ol li+li+li{background-position:200px 30px;}
div.nav ol li+li+li+li{background-position:300px 30px;}
div.nav ol li+li a{background-position: 100px 0;}
div.nav ol li+li+li a{background-position: 200px 0;}
div.nav ol li+li+li+li a{background-position: 300px 0;}
div.nav ol li a:hover{opacity:1;}

div.nav ol li a{
　　display:block;width:100%;height:100%;
　　background-color:rgb(255,255,200);
　　text-decoration:none;
　　text-indent:-200px;overflow:hidden;
/* ここまでは、通常のスプライトを利用した設定 */
/* ここからアニメーション(時間的変化) */
　　transition:opacity 2s ease-in-out;/* opacity(透過度)を2s(秒)、最初と最後はゆっくり変化
}


ベンダーフィックスを入れると長くなります。
※古いブラウザ(特にIE)では、ベンダーフィックスが必要かもしれません。
ベンダーフィックスを入れたものが下記

div.nav{width:80%;margin:0 auto;line-height:30px;}
div.nav ol,div.nav ol li{
　　display:block;list-style-type:none;
　　text-align:center;margin:0;padding:0;
}
div.nav ol{display:block;}
div.nav ol li{
　　display:inline-block;width:100px;
　　position:relative;background:url(./images/nav.gif) 0 30px;
}
div.nav ol li+li{background-position:100px 30px;}
div.nav ol li+li+li{background-position:200px 30px;}
div.nav ol li+li+li+li{background-position:300px 30px;}
div.nav ol li a{
　　display:block;width:100%;height:100%;background-color:yellow;
　　text-decoration:none;text-indent:-200px;overflow:hidden;
　　background:url(./images/nav.gif) 0 0;opacity:0;
　　transition:opacity 2s ease-in-out;
　　-moz-transition: opacity 2s ease-in-out;
　　-webkit-transition: opacity 2s ease-in-out;
　　-o-transition: opacity 2s ease-in-out;
　　-ms-transition: opacity 2s ease-in-out;
}
div.nav ol li+li a{background-position: 100px 0;}
div.nav ol li+li+li a{background-position: 200px 0;}
div.nav ol li+li+li+li a{background-position: 300px 0;}
div.nav ol li a:hover{opacity:1;}

この回答へのお礼

ご回答ありがとうございます。
お返事が遅れたことお詫びします。
細かく親切に解説していただき、ただ脱帽するばかりですm( )m

ご説明に頂戴されたものは、これは、グローバルリンクというものですね。？
本来の質問は、ごめんなさい、、、
普通にアメブロでいうと「ペタボタン」ですとか、簡単なリンクボタンだったのですが、
実をいうとこの「グローバルリンク」も作りたかっのでこの機会に
ちょっと、上記の説明を勉強のため実行するのにサンプル画像を作り、試していました。
ちょっと手間取って回答が遅くなりました；

実際に完全な成功はできていないですがなんとなくの感覚はつかめました。
これをヘッダー画像の下に付けたいので、もう少し時間があるとき、いじくってみたいと思います。
余白とかも調整してみます。

又、次に回答貰いました、NO.6へのお返事は、報告もかねてさせてもらいますので、少しこのままにさせてもらいたいと思います。すみません。
少々お待ちくださいませ。

とても丁寧に解説いただき、ひたすら感謝しております。
ありがとうございました。

お礼日時：2012/11/21 06:47

No.4 回答者： ORUKA1951 回答日時： 2012/11/16 08:59

示された画像は、本来GIFにすべき画像でない写真をGIF、それもアニメーションGIFにしている。

しかも、ファイルサイズを減少される一切の手段がされていません。
・全コマ数が100
・一こまに4/100秒
・パレットの統一がされていない
・すべて書き直している。
↓
・変化の少ない部分はコマをカットして、表示時間を延ばす　No.2～No.10はカットしてNo.1を　40/100にするとか
・パレットの統一
・変化のある部分だけ上書き
　　・・机部分は一切変化していないので、書き直す必要はない

　これらの処理で、400kbまで減らせます。

この様な、写真画像をアニメーションGIFに変換するにはテクニックが必要です。
1) 変化しない部分は書き直さない
2) パレットを共通化する。
3) 変化の少ないコマは表示時間を長くする。
　最低限、これだけの処理をしましょう。

　ですが、この場合は、CSS3を使えば二枚の画像だけですみます。
<p style="width:300px;height:400px;background:url(./images.gif)"><img src="./images.gif" width="300" height="400" alt="" style="transition-property: opacity;transition-duration:4s;opacity:1;transition-timing-function:ease-in-out;></p>

　

この回答へのお礼

回答、有難う御座います。
とても丁寧に解説いただき、感謝しております。かなりハードル高そうですね＞＜
説明の内容は把握しました。パレットの意味も納得しました。
有難う御座います、とても参考になりました。

後に書かれてるタグですが、
試してみましたが、うまくいきませんでした。
おそらく、書き込んだ場所がわるいのだと思います。

簡単なタグは少しわかりますが、CSSはあまり理解できていなく
見よう見まねで作ってます。

色々と勉強になりました。
本当にありがとうございました。

お礼日時：2012/11/16 10:25

No.3 回答者： e_16 回答日時： 2012/11/16 05:07

GIFの構成枚数減らせばいいんですよ

そのURLにある子供から鬼の面に変わるGIFアニメだと3.2MBですが
50枚の画像が使われています、画面の切り替えが０．０４秒ですから人間の認識できない速度
ですし、ネットの回線状況で表示できないデータに作られています。

見た目で同じ効果を得るのなら１２枚あればいいですから、それだけで700KB程度に収まります。

だから質問者さんもそのように、デカくならないように枚数と切り替え時間を調整しながら作るといいですよ。

あとは、リサイズですね。
先のGIFアニメだと短辺が300ピクセルですがこれを200ピクセルにすれば1.5MBで収まります

この回答へのお礼

回答有難う御座います。
なんとなくGIF画像の中身のコマの意味がわかってきました。
0.04秒の説明で、かなり納得できました。
人の目で認識できない画像のコマ数は動画を見ているようなものと言う事なんですね。
私が作ったGIFは２００枚を超えていましたから、それは無駄が多いですね；

ちょっとこのソフトは手間がなく良いと思っていましたが、
GIF向きではないような気がしてきました・・。

ハードルは高いですがなんとか工夫してみます
改めてお礼申し上げます。
有難う御座いました。

お礼日時：2012/11/16 10:10

No.1 回答者： Gletscher 回答日時： 2012/11/15 21:57

GIFというには、圧縮された画像フォーマットですので、それ以上の圧縮は難しいと思います。

そもそも、GIFがぞうで10MBとか15MBというのが異常ですね。
WWWでは数十kB、大きくても数百kBに抑えるのが仕様です。
圧縮ではなくサイズが大きすぎるか、解像度が高すぎるのじゃないでしょうか？
本来ならGIFは256色ですからそんなに大きくなるはずがありません。
アニメGIFならあり得ますが、それでも数百kBにしないといけないですね。

この回答へのお礼

ご回答ありがとうございます。
質問の仕方が悪くて恐縮です。
GIF画像をあまりよく理解してません。

自分の考えではパラパラ画像のようなものだと・・。
よく見かけるのが、チカチカするのだったり、猫がカクカク動いてるのがありますね。
それをリンクボタンにしているのとか。おそらく数枚の画像を組み合わせGIFにしてるのですか？

そこで私は今回、チカチカするのではなくAの画像からBの画像（２枚）へゆっくり変化するもの
それをリンクボタンにしたいと思い検索してみました。＞「滑らかに動くGIF画像」
元の画像png（500x500 213KB）x２枚

そこで見つけたソフトがこれです。FotoMorph　完成画像も見れます
http://pc.mogeringo.com/archives/15120

これなら簡単に手間なく滑らかな動きができると思いました。
そして変換も最低な画質で変換したのですが、それでも１０MBくらいになってしまいました。

なのでこれを最適化するため違うソフトで、256色を落としました。
最低まで落としても小さくならなく画像は色を失い見れなくなってしまいました。
それでアップできる場所を質問したわけです。

他にGIFを滑らかに作る方法があれば良いのですが・・。


とても丁寧に解説いただき、ひたすら感謝しております。
改めて、御礼申し上げます m(_ _)m

お礼日時：2012/11/16 02:55