画像をBase64でHTMLファイルに直接埋め込む方法 | design Edge
とはいえ、個人的にはコマンドラインに少々拒絶感があるのでさらに調べてみると、ChromeのDeveloper Toolsを使ってカンタンにエンコードできることがわかりました。 手順は以下の通りです。 ChromeでBase64へ変換したい画像を開きます。 Developer Toolsを開き（Cmd(Ctrl)＋Option(Shift)＋i）、「Application」パネルを選択。 左のペイン下の方に「Frames」というところがありますので、その配下の当該ファイル名をクリックして選択します。 すると、右側にBase64化されたものが表示されるので、まるっとコピー。 ペーストしたら、頭に上述の書式をペタッと貼りつければOKです。カンタンですね！ 上図の画像の場合は、以下のようになります。ブラウザのアドレズバーにペーストして確認してみてください。 data:image/png;base6
JPG・PNG・GIFの違いのまとめ
どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。2010.10.27 18:00168,224 人間がデジタル技術を開発して以来、開発され続けてきた画像の保存形式。 開発過程には、それこそ色々な種類がありました。 しかし、現代のブラウザや、一般的な利用者のニーズに合わせて、現在ではJPG、 PNG、 GIFが3強です。 もちろん、それぞれ長所と短所がありますが、それぞれどこがどう違うのでしょうか。 JPG（Joint Photographic Experts Group） JPGはジョイント・フォトグラフィック・エキスパート・グループ（Joint Photographic Experts Group）がプロのカメラマンの標準となるべく開発したファイルのタイプです。 ファイル内の冗長性を見つけて圧縮するZIP形式のように、JPGは画像データをピクセルと呼ばれる
続：PNG画像をより美しく、より軽量に最適化するテクニック | コリス
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード：[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
デジカメと紫色
Top 「紫色」には、どのデジカメでも撮影できる「紫色」と、多くのデジカメで撮影できない「紫色」があります。撮影できない「紫色」は、デジカメのホワイトバランスや露出を変えても正しい色にはなりません。また無理に合わせると写真の他の部分のバランスが崩れます。以下の内容は、その理由を書いたものです。 ※ このページに書かれた各図は、説明が分かりやすいように私が手書きしたものです。精度はそれなりですから、あくまで説明を読む際の参照程度に考えてください。CCDのデータはSONYが公開していたPDF版スペックシートで、自分のPCにダウンロードしていたものを参照しています。現在はデジカメ用CCDのスペックシートは公開していないようです。 光の色 光は電磁波の一種であることをご存知でしょうか。電磁波には、テレビや携帯電話などで使われている電波も含まれます。電磁「波」というぐらいですから、光や電波は一定の周
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
画像などのファイルへの直リンクを禁止する方法
.htaccessを使用して、他のサイトが画像などのファイルを無許可で使用するのを禁止する方法をThe Web Squeezeから紹介します。 Stop Image Hotlinking with .htaccess 「.htaccess」に、下記を記述します。 ※必要の無い箇所は、削除・修正して使用してください。 ※「.htaccess」を修正する場合は、必ずバックアップをしてください。 ※有効範囲は、設置ディレクトリの配下です。 <textarea name="code" class="html" cols="60" rows="5"> #Stop Image Hotlinking RewriteEngine on RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC] RewriteCond %{HTT
"プレビュー.app" の底力 - ザリガニが見ていた...。
（Leopard Preview.app's potential） アプリケーションの名前こそ「プレビュー」だが、すでに機能は「レタッチ」レベルなのであった！ The application's name is "Preview", but the function is "retouch" level! スクリーンショット（Screen capture） ウィンドウの影なし撮影ができる。（command-shift-4 & spaceの影あり撮影と使い分けると便利） "File >> Grab >> Window" is without shadow.(Properly, we can use that "command-shift-4 & space" is with shadow.) タイマー撮影ができる。 "File >> Grab >> Timed Screen" command
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールすると変化しながらついてくる画像 | SIMPLE*SIMPLE