タグ

imageと検証に関するbitgleamsのブックマーク (7)

  • 解像度の違いによる印刷比較をしてみたよ!

    3種類の異なる解像度で保存したデータ 画像解像度(dpi)とは1インチ(2.54cm)にどれだけの密度で点が集まっているかのことです。 “dot per inch(ドット パー インチ)”の略。 解像度について詳しくは画像ファイルのあれこれを参照してください。 3種類のデータをアップにして並べてみると、72dpiのファイルはかなりドットが目立ちガタガタしています。点の数が少ない=1つのドットが大きいためです。 「画像(画質)が荒い」などと言われるのがこの状態です。 72dpiと150dpiの差は明らかですが、150dpiと300dpiの差はそこまで大きく出ませんでした。 デザインにもよりますが、ある一定以上の解像度になってくるとほとんど差が出なくなります。 高解像度300dpiのデータは点の数が多くギザギザは目立ちにくいですがデータのファイルサイズも大きくなります(¯・ω・¯;) ファイル

    解像度の違いによる印刷比較をしてみたよ!
  • WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ?

    このブログでもレスポンシブイメージについて何度か紹介していますが(ココとかココで)、2015年の暮れにリリースされたWordPress 4.4 Clifford からsrcsetとsizesを使ったレスポンシブイメージがWordPressのCoreに実装されました。サーバにインストールして使うWordPress.org版だけでなく、WordPress.comにも実装されたとのことで、実質的には世界で2割以上のウェブサイトでレスポンシブイメージ(srcsetとsizes)が使われていることになるそうです。 このブログも先日WordPress 4.4に更新したので、WordPressのレスポンシブイメージがどんな実装なのか確認してまとめてみました。 基的な仕組み 管理画面での設定なし・プラグインなしで<img>タグにsrcsetとsizesが挿入される ポリフィル(Picturefill)は

    WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ?
  • iPhoneから再びカメラロールが消える、無料では基本使えない、複数ライブラリ管理できないなど:iCloudフォトライブラリはちょっと残念 — 人柱の結果

    昨日リリースされた、iCloudフォトライブラリとMac用の新しい「写真」アプリ。 人柱としていろいろ試しているが、徐々に全体像が見えてきた。 利用シーンは人それぞれなので、あくまでも僕の使い方による、ここまでの使用感と感想を書いてみたい。 個人的にはちょっと期待外れな感じかな。 さっそく紹介しよう。 iPhoneから再びカメラロールが消える、無料では基使えない、複数ライブラリ管理できないなど:iCloudフォトライブラリはちょっと残念 人柱の結果 iPhoneから再び「カメラロール」が消える iOSデバイスでiCloudフォトライブラリを有効にすると、iPhoneから「カメラロール」が消えてしまう。 iPhoneで撮影した写真は、「すべての写真」に格納されるのだが、撮影した写真がiCloudにアップロードされ、もう一度ダウンロードされて、初めて表示されるようになる。 僕の母艦iMac

    iPhoneから再びカメラロールが消える、無料では基本使えない、複数ライブラリ管理できないなど:iCloudフォトライブラリはちょっと残念 — 人柱の結果
  • Googleのアイコンデザイン思想を学ぶ | ビジュアルシンキング

    Googleが公開しているデザイン・ガイドラインのアイコンに関するところを読みました。 Icons – Style -Google design guidelines アイコンのデザイン・ガイドラインの対象は、「プロダクト・アイコン」と「システム・アイコン」の2つがあり、デザインする上で注意を払うことや、原則がまとめられています。 プロダクト・アイコン 「プロダクト・アイコン」はGmailやGoogle Mapなどサービスそのものに用いられ、サービスの特性や違いを伝えるものです。 image by Google システム・アイコン 一方「システム・アイコン」は、ユーザインタフェースに用いられるもの。 「プロダクト・アイコン」と比べて、小さいサイズでの使用、単色での使用の想定が必要。 image by Google 作りの違い 「システム・アイコン」がフラットな作りなのに対し、「プロダクト・

    Googleのアイコンデザイン思想を学ぶ | ビジュアルシンキング
  • 市販の画像を使うときはライセンスだけではなく、その先まで気をつけて!

    市販の画像を使うときはライセンスだけではなく、その先まで気をつけて! 2013.12.09 | 覚えておきたい フォトストック | ライセンス | 画像 どーも、どーも、ご無沙汰の WP-D Red でございます。別にモンハンばかりしてブログをサボっていたわけではありません。 有名ホテル/レストランの伊勢海老がある日突然ニュージーランド産のロブスターになっていたり、鮭のムニエルが鱒のムニエルになっている昨今いかがお過ごしでしょうか。 久しぶりのこの記事では、フォトストックサービスや画像 CD などの、市販されている画像を使う際に注意するべき点について考えてみたいと思います。 さて、みなさんこんな広告見たことありませんか。 別に日和ったわけじゃなくて、dis るつもりじゃないのでモザイクかけました(笑) Red もよくお世話になる大手旅行検索サイトの広告です。広告が切り替わるのを待っていたの

    市販の画像を使うときはライセンスだけではなく、その先まで気をつけて!
  • Retina対応にSVGは本当に使えるのか?

    高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表

  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
  • 1