お世話になります。
本当に無知な質問で恐縮なのですが、
現在、ブログを作っていまして、CSSを簡単にいじくっています。(初級程度)
そこで、GIFを表示したいのですが。GIFが15MBくらいのもので、これを色々なソフトで圧縮しても
せいぜい10MGくらいにしかなりません。(劣化します)
今は、imgやらjsテキストを外部から読み込むために、FC2や忍者ブログのサーバーを使っていますが、どちらも最大保存容量は大きいですが、一回のファイル送信が2MBまでなので、画像やらテキストとか軽いものしか使えてません。
他によいサイトはないでしょうか?
作ってるブログサイトはアメブロです。
宜しくお願いします。
No.2ベストアンサー
- 回答日時:
そんな巨大なGIF画像なんて聞いたことありません。
写真のような画像をGIFにしているとか、画像フォーマットの選択が間違っているのではないですか?
そんなデータを読まされるユーザーもたまったものじゃありません。
まず画像フォーマットを再検討してください。
どのような画像なのですか?
ご回答ありがとうございます。
質問の仕方が悪くて恐縮です。
>そんなデータを読まされるユーザーもたまったものじゃありません。
仰るとおりです。後から気づきました。><
>どのような画像なのですか?
下の回答者様にも書いたのですが、
簡単に言えばリンクボタンです。
よく見かけるのが、チカチカするのだったり、猫がカクカク動いてるのがありますね。
それをリンクボタンにしているのとか。
そこで私は今回、チカチカするのではなくAの画像からBの画像(2枚)へゆっくり変化するもの
元の画像png(500x500 213KB)x2枚です。
これは写真ではなく、自分でロゴみたのを2枚作りました。色は白と黒の2色です。
それをリンクボタンにしたいと思い検索してみました。>「滑らかに動くGIF画像」
そこで見つけたソフトがこれです。FotoMorph 完成画像も見れます
http://pc.mogeringo.com/archives/15120
これなら簡単に手間なく滑らかな動きができると思いました。
そして変換も最低な画質で変換したのですが、それでも10MBくらいになってしまいました。
なのでこれを最適化するため違うソフトで、256色を落としました。
最低まで落としても小さくならなく画像は色を失い見れなくなってしまいました。
それでアップできる場所を質問したわけです。
他にGIFを滑らかに作る方法があれば良いのですが・・。
GIF画像をあまりよく理解してません。
とても丁寧に解説いただき、ひたすら感謝しております。
改めて、御礼申し上げます m(_ _)m
No.6
- 回答日時:
GIF画像を中間色をなくして作りかえると、2.22KBですね。
10MBの1/4500 のサイズで同等のことができます。
・・・このようなコンテンツの飾りでしかない画像に大きなスペース(労力)を割くのは無駄です。良い機会ですから見直して見ましょう。
お返事が遅れたことお詫びします。
あれから、教えていただいたご説明で設置することに成功いたしました。
報告を兼ねてお礼申し上げます。
とにかくアメブロは制限が多く苦労しましたが
ORUKA1951様の仰るとおり「サイズ」には注意することにしました。
この度は本当に有難うございました。
No.5
- 回答日時:
リンクボタンですか?
結論から言うと、そんなものに大きな容量を割くのは色々な意味で無駄です。
アニメーションを使うにしろ、画像数を数枚にしましょう。パレットは共通にして必要な部分だけを書き直す方法で数キロバイト以内に押さえましょう。
またスタイルシートを使って単純に二枚の画像を入れ替えても良いです。下記にサンプルを上げておきますが、画像は4つのリンク先すべて一枚の16色 400ox(w)×60px(h)の画像2.9kb意一枚しか使いません。(添付図参照)。HTMLもごらんのようにシンプルですから、スタイルシートでどのようにもデザインできるでしょう。
[画像]
添付図を見本に100px×30pxの画像を4×2に並べたものを用意する。
※タブは全角スペース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へのお返事は、報告もかねてさせてもらいますので、少しこのままにさせてもらいたいと思います。すみません。
少々お待ちくださいませ。
とても丁寧に解説いただき、ひたすら感謝しております。
ありがとうございました。
No.4
- 回答日時:
示された画像は、本来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はあまり理解できていなく
見よう見まねで作ってます。
色々と勉強になりました。
本当にありがとうございました。
No.3
- 回答日時:
GIFの構成枚数減らせばいいんですよ
そのURLにある子供から鬼の面に変わるGIFアニメだと3.2MBですが
50枚の画像が使われています、画面の切り替えが0.04秒ですから人間の認識できない速度
ですし、ネットの回線状況で表示できないデータに作られています。
見た目で同じ効果を得るのなら12枚あればいいですから、それだけで700KB程度に収まります。
だから質問者さんもそのように、デカくならないように枚数と切り替え時間を調整しながら作るといいですよ。
あとは、リサイズですね。
先のGIFアニメだと短辺が300ピクセルですがこれを200ピクセルにすれば1.5MBで収まります
回答有難う御座います。
なんとなくGIF画像の中身のコマの意味がわかってきました。
0.04秒の説明で、かなり納得できました。
人の目で認識できない画像のコマ数は動画を見ているようなものと言う事なんですね。
私が作ったGIFは200枚を超えていましたから、それは無駄が多いですね;
ちょっとこのソフトは手間がなく良いと思っていましたが、
GIF向きではないような気がしてきました・・。
ハードルは高いですがなんとか工夫してみます
改めてお礼申し上げます。
有難う御座いました。
No.1
- 回答日時:
GIFというには、圧縮された画像フォーマットですので、それ以上の圧縮は難しいと思います。
そもそも、GIFがぞうで10MBとか15MBというのが異常ですね。
WWWでは数十kB、大きくても数百kBに抑えるのが仕様です。
圧縮ではなくサイズが大きすぎるか、解像度が高すぎるのじゃないでしょうか?
本来ならGIFは256色ですからそんなに大きくなるはずがありません。
アニメGIFならあり得ますが、それでも数百kBにしないといけないですね。
ご回答ありがとうございます。
質問の仕方が悪くて恐縮です。
GIF画像をあまりよく理解してません。
自分の考えではパラパラ画像のようなものだと・・。
よく見かけるのが、チカチカするのだったり、猫がカクカク動いてるのがありますね。
それをリンクボタンにしているのとか。おそらく数枚の画像を組み合わせGIFにしてるのですか?
そこで私は今回、チカチカするのではなくAの画像からBの画像(2枚)へゆっくり変化するもの
それをリンクボタンにしたいと思い検索してみました。>「滑らかに動くGIF画像」
元の画像png(500x500 213KB)x2枚
そこで見つけたソフトがこれです。FotoMorph 完成画像も見れます
http://pc.mogeringo.com/archives/15120
これなら簡単に手間なく滑らかな動きができると思いました。
そして変換も最低な画質で変換したのですが、それでも10MBくらいになってしまいました。
なのでこれを最適化するため違うソフトで、256色を落としました。
最低まで落としても小さくならなく画像は色を失い見れなくなってしまいました。
それでアップできる場所を質問したわけです。
他にGIFを滑らかに作る方法があれば良いのですが・・。
とても丁寧に解説いただき、ひたすら感謝しております。
改めて、御礼申し上げます m(_ _)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- バックアップ Windows11パソコンのデータを数クリックで完全に引っ越しするにはどうすれば良いでしょうか? 5 2022/10/11 14:08
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- Google Drive Google Drive (G:)の容量を、購入した容量と一致させるにはどうすればよいでしょうか? 1 2022/04/10 22:32
- ニコニコ動画 無料で動画マニュアル作成ソフトを教えてください。 1 2022/07/12 01:41
- その他(開発・運用・管理) WindowsからSSHでサーバーにあるファイルをダウンロードできない…。 3 2022/04/24 11:08
- その他(ブログ) ブログサイトについて 趣味を1人で楽しむだけじゃなくて、同じ趣味の人と共有出来るようにブログで書いて 1 2022/06/18 08:39
- ホームページ作成・プログラミング 保存したホームページのファイルは何をしている推測できますでしょうか。 1 2023/08/18 15:50
- WordPress(ワードプレス) Wordpress プラグイン Mail Form 7 のファイル添付の表示が切れてしまう 1 2022/03/24 09:05
- その他(ブログ) 教えてください 趣味のことを発信したくて、ブログを始めました。いろいろ調べて、気軽にかけると紹介され 1 2022/06/17 15:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
初心者 ロールオーバー及びイ...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
smallにtext-allignが効かない
-
改行ほどは行かないけど、若干...
-
html の divとtable の役割
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
widthやheightの数値に単位(px...
-
<h1>、<h2>と<p><div>の行間を...
-
外部css定義したclassをht...
-
リンクを知らせる手のマークが...
-
機種依存文字、m2(平方メート...
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
CSS、width100%でもできる余白
-
cnt <= (others => '0'); の意...
-
line-height指定で発生する余白...
-
ヘッダーとフッターだけ背景を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一度で20MBくらい送信できて共...
-
HP 画像の一部にリンクでその...
-
jQuery カーソルを乗せるとタブ...
-
初心者 ロールオーバー及びイ...
-
HPビルダー16 リストの増やし方
-
ブラウザ別のマージン解消は?
-
サクラエディタの使い方について
-
HTMLやcssに詳しい方教えてくだ...
-
(CSS)table-cellをIEで表示さ...
-
ウェブサイトの作り方
-
多数の画像で商品説明する方法
-
webのナビメニューで、どうして...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
おすすめ情報