東京北青山、大阪四ツ橋発、WEBディレクターのブログ

readout! ~試行錯誤を出力する記録~

readout! ~試行錯誤を出力する記録~,webサービス

jpg画像がほぼ劣化なく高圧縮できると話題の「JPEGmini」をQ&A形式でまとめました。(おまけ付き)

JPEGmini

すでにいろいろなブログでも紹介され済のJPEGminiですが、
まだ知らない人や知ってるけど実際に使った事がないという方へむけて書きます。
めっちゃ便利なので使わないと損!
web制作者はデザイナーもコーダーも「JPEGmini」で幸せになりましょう!

また、充分に試さずに批判的な意見を持っている方もおられるようで、

「Photoshopで高画質から標準に落としたのと変わらなかった。」

んなこたーないです。
フォトショで高画質から標準に落としたら、その分画像劣化しますよね?
JPEGminiは画像はほとんど劣化せずにファイルサイズだけを落とせるサービスです。
(※画像によっては変化がない場合も、もちろんあります。)

「元のJPEGが低圧縮率なだけでしょ?」
「デジカメで撮った写真そのままを圧縮したら、そりゃ軽くなるでしょ」

これもそんなことないです。
ちゃんとPhotoshopで高画質(80画質)・標準画質(60)で圧縮して書きだし済の画像でも、
JPEGminiを使えば画像の劣化はほとんどなく、さらに圧縮してくれます。

とにかく自分でいろんなサイズ・条件で試してみてください。
特にモバイルサイトやスマートフォンサイト、ファイル容量制限のあるバナーを作る時など、
『JPEGminiスゲー!』ってきっと思うはず。

Q&Aリスト一覧

JPEGminiってなんですか?

JPEGminiは、.jpg/.jpegファイルを画像がほとんど劣化する事なく圧縮してくれる素敵なオンラインのサービスです。
ブラウザからファイルをアップロードして圧縮してくれた画像をダウンロードする という流れになります。
アプリとしてオフラインでフォルダまるごと圧縮とか出来たらすごく素敵ですね。今後に期待です。

どうやって使うの?

圧縮する画像を1枚だけ(1枚づつ)なら、ユーザー登録しなくてもOKですが、
複数の画像をいっぺんにアップロードしたい場合はアカウントの登録が必要です。
facebookもしくはGoogleアカウントからサインアップすることもできます。

JPEGminiアップロード手順1
まずは右上の黄色いボタンからスタート。

JPEGminiアップロード手順2
1枚だけの場合は左側。複数の画像をまとめて圧縮する場合は右からサインアップ。
サインアップしてるほうが確実に便利です。簡単なのでやっておきましょう。

JPEGminiアップロード手順3

JPEGminiアップロード手順4
サインアップできたらこんな画面になります。
右上の「Upload Your Photos」からアップロードスタートです。

JPEGminiアップロード手順5
黄色いボタン「Select Photos」からアップロードする画像を選択します。

JPEGminiアップロード手順6
『アルバムの名前を決めてください』と聞かれるので、適当に名前を付けます。
今回は「test」としました。名前が入力できたら右下の「Create Alubum」をクリック

JPEGminiアップロード手順7
アップロード完了後の画面はこんな感じです。(アップロード前と同じ画面です)
『You have no albums.』? あれ? アップできてないの?と思うかもしれませんが、大丈夫です。画像を圧縮する時間が必要ですので、しばらく他の作業をしながら待ちましょう。

JPEGminiアップロード手順8
圧縮した画像が完了したらこんな感じになります。
アルバム全体でいくら軽くなったのかが分かります。
今回はオリジナル111KBだった画像が87KBになりました!
左下にある「Download」ボタンでフォルダごとダウンロードする事ができます。

JPEGminiアップロード手順9
完了時には登録したメールアドレスにお知らせもしてくれます。
(メールが不要ならアカウント設定からメールを送らないようにもできます。)

JPEGminiアップロード手順10
メールには直接zipファイルへのダウンロードリンクがありますので、再度サイトに訪問しなくてもダウンロードすることができます。超便利!

そもそも全然圧縮してない大きい画像だから大幅ダウンしてるんじゃねーの??

デジカメで撮ったそのままの画像などは大幅にサイズダウンします。
ですが、一度Photoshopで画質80で書きだしたものでも、JPEGminiを利用すればさらにサイズダウンすることが可能です。
今回は下記6種類のバナーをサンプルに実験してみます。


Photoshopでデザインされたバナーを、いつものコーディングと同じように「Webおよびデバイス用に保存」で書き出します。
やや高画質(画質60)と高画質(80)の2パターンで書き出しました。


結果がこれです。【実際の画像をダウンロードしてお確かめください。
高画質(80)で書きだした画像は178KBから102KBに、
やや高画質(画質60)で書きだした画像は111KBから87KBになりました。
最高画質(100)で書きだしていれば、もっと圧縮率は高くなるはずです。...が、普段コーディングする時は100で書き出さないですよね??画質85~60ぐらいの範囲で書き出すと思います。
ということは、今から制作するサイトだけではなく、すでに完成済み(コーディング済)のサイトにもJPEGminiはすごく役に立つということになります。
実際、すでに作成済の10ページ程度のスマートフォンサイトで試したところ、
サイト全体(htmlとかCSS等も含めた)容量が1026KBから879KBまで落ちました。
スマートフォンサイトなので、pngも結構使っています。png専用圧縮サービも併用すれば、さらなる軽量化が期待できるでしょう。

対応している画像形式は?

現在はJPEGファイルのみです。
サービス名が「JPEGmini」ですからね。。

PNGも圧縮したいんですけど!?

いろいろありますけど、「punypng」がいいっぽいです。
http://www.punypng.com/

ちょっと話それるけど「.jpg」と「.jpeg」って違うの?

はい、やっぱりいました。Yahoo!知恵袋に同じ質問をしている人が。
画像ファイルの拡張子で、.jpgと .jpegとはどう違うのでしょうか。 - Yahoo!知恵袋

結論としては、特に違いは無いとのことなのですが紛らわしいので.jpgに統一してほしいですね。

おまけ

JPEGminiのサイトのトップにあるデモが、すごくわかりやすくビフォーアフターを表現していますね。
リフォームのビフォーアフターページを作る時など、web制作の時でこんな感じにしたいと思う事があるかもしれません。
同じようなことが実現できるjQueryプラグインがありましたので、おまけでご紹介しておきます。
jQuery Before/After Plugin

ENUAI

Twitterやってます

web制作のTipsやまぁまぁ役に立つことをたまにつぶやいています。

readout! ~試行錯誤を出力する記録~,ソーシャルメディア

Google+に関するいろいろなことをQ&A形式でまとめました。

Google+(グーグル プラス)

最近注目されているGoogle+についてのまとめです。
ふつうにズラーっとリンクを貼るだけでは結局リンク先の記事をいっぱい読まないといけなくて大変だと思いましたので、Q&A形式でまとめてみました。
サラッとした内容はリンク先を見なくても理解できて、さらに詳細な内容はリンク先で。という構成にしています。

Q&Aリスト一覧

Google+ってなんですか?

Google+とは、Googleが2011年6月28日に発表したSNS(ソーシャルネットワーキングサービス)です。「グーグル プラス」と読みます。
公式Twitterアカウント(英語)やGoogle+で投稿したPost専用の検索ツールとかもあります。

SNSってことは、mixiとかFacebookみたいなやつ?何が違うの?

そうですね。日本最大のmixiや世界最大のFacebookと基本的なサービス内容は同じと思って間違いではないと思います。
Google+の主な特徴は「サークル機能」「Sparks機能」「ビデオチャットルーム機能」などが目立った特徴といえそうです。
詳しくはオフィシャルで紹介されているので確認してください。そして、実際に使って体験しましょう!
機能がどうこうというよりも、使っているユーザー(ユーザー層)が違うというのが本当のところですよね。

Facebookとほとんど同じってことは、実名を公開しないとダメ??

絶対に実名じゃないとダメというわけでなく、"ネット上の通称や偽名など、実社会で通用しないような名前はNG"ということみたいですね。
Facebookでもアカウント停止になったり復活したりとかの騒動がありましたので、まだはっきりしたことは言えないですが、
「ダメと言われたらきちんとルールに従う」がサービスを利用する上で大切な事なのではないかな?と個人的には思います。

で、どうなの?Google+ってすごいの?

こういったSNSは個人の好みや使い方があるので良い・悪いという事はいえないですが、
「今、すごく勢いがある」のは間違いなさそうです。
2011/07/25現在では3週間でユーザー数が2,000万人を突破したといわれています。
この数字がどれぐらいすごいのかをtwitterで@SergeGainsbourgさんがおもしろいデータをツイートされていましたので引用させて頂きます。

ユーザー数1000万人を突破するまでにかかった年月
GREE: 5年2ヶ月
mixi: 3年3ヶ月
Facebook: 2年8ヶ月
Twitter: 2年7ヶ月
ニコニコ動画: 23ヵ月
Youtube: 14ヶ月
Google+: 13日
Google+ってどんな人が使ってるの?

これまたモヤっとした質問ですね。
日本ではまだまだwebやIT関係者が多い印象がありますが、一般ユーザーもmixiのように利用するようになるのかはちょっと難しいようなイメージはありますね。
でもでも、女性ユーザーが増えてきているというデータもあるみたいです。

Google+ってSEO的にどうなの?

SEOに効くからはやるというのはちょっとアレな気もしますが、それでもやっぱり気になるところですよね。
TwitterやFacebookで共有されたリンクが検索順位に直接影響するというのはGoogleとBingが正式に認めています。
では、Google+はどうなのでしょうか?
まだまだこれからという感じですが、下記のリンクが役にたつかもしれません。

iPhone、Androidアプリはあるの?

あるよ。

友達に自分のGoogle+ページのURLを教えたいんだけど...

web関係ではない一般の方からいつかこんな質問きそうですよねw
例えば僕のGoogle+ページのURLは「https://plus.google.com/105072239868629818161」なのですが、IDが長くてとても覚えられないですね。
下記のようなツールを使って覚えやすいURLを作るのもアリですね。
(Google+専用とか書いてますけど、Google公式ではないただの短縮URLサービスです。http://gplus.to/ENUAI みたいなURLが作れます。)

Google+のデベロッパー登録とかあるんですか?

あるみたいです。
よ~しアプリとか作っちゃうぞ~って人は登録しておくといいですね。

Google+を便利に快適に使うツールとかあるんでしょ?どうせ。

あるみたいです。やっぱり。

注目されたけどスベってる感じのGoogle+1も少しは使われるようになるかな?

そうですね。
+1しても「これどこに反映されてるの??」って人は多かったと思うのですが、
+1ボタンをクリックした一覧はGoogleアカウントのプロフィールページで確認できます。
(まだ一度も+1ボタンをクリックした事がない人は「+1」のリンクは表示されません)
Google+(グーグル プラス)
そもそもアカウントページなんてわざわざ見に行くことはなかったのですが、
Google+をやっていると自然にプロフィールページを見るので、今までよりは使われるようになるのかな?と思います。
なので、この機会にサイトやブログに+1ボタンを付けときましょう!

Google+の人気にあやかって僕のサイトもGoogle+っぽくしたい!

うん。すればいいと思うよ!勝手に!

何か注意する事はありますか?

注目されてるサービスなので、そこを狙った詐欺やスパムが出てくる可能性がありますので注意しましょう。

この記事ではGoogle+の事よく分からへんからもっとわかりやす記事教えろ。

。。。。(;´・ω・`)

え?もっとあるやろ??

。。。。(´;ω;`)ぐっ...

ENUAI

Twitterやってます

web制作のTipsやまぁまぁ役に立つことをたまにつぶやいています。

readout! ~試行錯誤を出力する記録~,コーディング

alt属性のベストプラクティス

「alt属性のベストプラクティス」なんて大げさでカッコつけたタイトルにしましたが、
最近コーディングをする時にalt属性をどうするか悩む機会が増えてきたので、メモがてらのエントリーです。

どうするか悩む というのは、alt属性を入れるか入れないか悩む という事ではもちろんありません。
alt属性は必須属性なので、なんの意味のない装飾だけが目的の画像にも

<img src="○○○.jpg" width="100" height="50" alt="" />

上記のような感じで、値を空にしておくのがいいと思います。
今回言いたかったことは、画像の中にある文字を"そのまま"入れるのかどうか という事です。

例1 「当社が選ばれる5つの理由」みたいな時

例その1「当社が選ばれる5つの理由」みたいな時のスライス例

よくあるこんな感じのコンテンツをスライスすると、だいたい上記のようになると思うのですが、
「当社が選ばれる5つの理由」の部分はそのままでもいいとして、問題は「REASON 01」の部分です。

alt属性にそのまま「REASON 01」と書いても間違いではないのですが、このalt属性が画像の代わりになるテキスト情報と考えた際に、ベストかどうかはちょっと考え物ではないかな と思いました。

「REASON 01」部分のalt属性記述例

例えばこのように「インクローバーが選ばれる理由 その1」と入力しておくと、実際に画像が非表示の時や音声ブラウザで読み上げられた時、より分かりやすく伝える事ができるのではないかと思います。
だからといって、「REASON 02」の箇所は当たり前のように「インクローバーが選ばれる理由 その2」と、
5つ全てにインクローバーの... と入れてしまうと、それはそれで読み手にとってはストレスになってしまうかもしれません。
01だけはしっかりと入力し、02の時は「その2」だけにしておく等、ケースバイケースの判断が必要です。

例2 お問い合わせの箇所

最後にもう1つ、かなりよくある例を挙げておきます。

例その2「お問い合わせコーナー」のスライス例

各ページのフッター付近とかによくある「お問い合わせコーナー」的な部分ですが、 皆さんなら電話番号部分のalt属性はどのように入力されるでしょうか。

電話番号部分のalt属性記述例

私の場合、最近は上図の下部のように書くようにしています。
どれが正しい、正しくない という事ではありませんが、デザインデータの画像に書いているから、そのままaltに書くのではなく、ページの流れやコンテンツ内容によって、適切な内容を入力していければ と思っています。