HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
「解像度」の理解があいまいだったので備忘録としてまとめてみた｜NEWS｜株式会社INDETAIL（インディテール）
DTP／Web制作をしていると解像度という言葉をよく耳にしますが、解像度の扱いって意外と難しくないでしょうか？そもそもDTPの解像度とWebの解像度は別物ですし、CSSピクセルやdipとか出てくると...もう頭痛い！ わからなくなっては調べて...また忘れて...の繰り返しです。そろそろケリをつけるべく備忘録としてまとめてみました。 解像度を難しくしている一番の原因はdpi, ppiといった密度を表している解像度がある一方で、デバイスピクセルのように単純にピクセルの数量を表している解像度もあるという点です。 （1）密度としての解像度・・・ dpi, ppi （2）ピクセル数としての解像度・・・ 画面解像度、デバイスピクセル どちらの解像度についての説明なのかを意識して、本記事や他サイト記事を読むとより理解が進むのではないかと思います。 DTPにおける解像度 印刷（DTP）における解像度は、
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
WebP変換 & 画像キャッシュサービスをサーバレスで構築する - Feed re:Architect vol.1 - - Sansan Tech Blog
Eight事業部 Platform Unit / Engineering Manager の 藤井洋太郎(yotaro) です。 前回、以下のRuby on Lambdaを使った画像処理基盤の記事を書かせていただきましたが、 今回の記事では少し前に、Eightフィード機能の高速化の際に行った、「画像フォーマット変換、リサイズ、キャッシュサービスをサーバーレスで構築した話」をしたいと思います。 Eightフィード Eightのメイン機能として、「ニュースフィード」があります。 この機能は、これまでに名刺交換をした「人」や「企業」に関連するニュースや更新情報を届けるものです。例えば、 役職変更、転勤などの人事異動情報 企業のプレスリリースなどの最新ニュース ユーザや企業による最新動向 など「ビジネスに必要な情報」が各ユーザにパーソナライズされた形で届きます。 サクサク動かない。原因はOGP画像
srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法
マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook レスポンシブデザインを採用しているWebサイトでは、デバイスごとに適正なサイズ（解像度）の画像を読み込ませる、という課題があります。 特に、高解像度のスマートフォンが登場したことで、画像がぼやけてキレイに表示されないと言う新たな問題も出てくるようになりました。 表示サイズの調整に加え、高解像度ディスプレイへの対応という2つの点から画像を最適化するのが常識になってきています。 以前なら、こういった問題に対応するには JavaScript を用いた面倒な実装が必要でしたが、現在はHTMLだけで解決することができます。 それが srcset や sizes 属性の利用です。 この記事では srcset とsi
レスポンシブの画像問題を解決する簡単な方法 | それからデザイン スタッフブログ
レスポンシブの一つの落とし穴として、「画像の問題」があります。 今回はその「画像の問題」とその解決方法をご紹介致します。 画像の問題とは？ 「画像の問題」といきなり言い出した分けですが、さて画像の問題というと、ここは実際の画面をみると分かりやすいと思います。 demo:https://sole-color-blog.com/demos/responsive/ ※スマートフォンでご覧頂くか、モダンブラウザの場合は画面を小さくしてご覧ください。 デモを見ると画面から画像が飛び抜けてしまっているのがお分かり頂けると思います。 なぜこれが起こるというと、簡潔に説明すると「画像自体のサイズ（縦/横）が優先しそのサイズで表示する」為に起こるのですが、さすがにこれは誰がみてもありえません。 解決する方法として、大きさに合わせた画像を作るという方法などがありますが、その場合スマホの数だけ画像を作る必要がで
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます！ 明けましておめでとうございます。本年もWebNAUTをよろしくお願い致します。私の新年1本目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター： ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか？ デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます
無料＆たった数秒で写真から人物を抜き出して透過画像を作ってくれる登録不要のサービス「remove.bg」 - GIGAZINE
画像の加工を行っている時、「画像に映っている人物だけを抜き出して、背景を全て消し去った透過画像を簡単に作りたい」と思った経験がある人もいるはず。「remove.bg」はそんな人にピッタリな、AIを使ってわずか数秒で背景と人物を分離してくれる登録不要＆無料のウェブサービスです。 Remove Background from Image – remove.bg https://www.remove.bg/ 「remove.bg」を使うには公式ページへアクセスし、「Select a photo」をクリック。 すると、コンピューターのフォルダから写真を選択できるので、加工したい画像を選択して「開く」をクリック。 ほんの数秒間処理が行われ…… オリジナルの画像から人物だけを抜き出し、背景を除去した画像が表示されました。remove.bgでは学習済みのAIが人を「前面」として検出し、それ以外の要素が「
PNG画像のファイルサイズが1/3に！PNG画像を超軽量化する「ImageAlpha」｜男子ハック
仕組みをよく理解できていないのですが、ImageAplphaは色数を減らしてファイルサイズを軽量化してくれるアプリのようです。 詳しい人がちゃんと解説してくれると嬉しいです。無知でごめんなさい。 さらには透過PNGの透過も維持したままにできるそうなので、これは是非試さないと損。 参考：透過を保ちつつpngを高圧縮するMacの無料アプリImageAlpha。素でIE6対応 以下のキャプチャ画像をサンプルに試してみました 上の画像をサンプルにファイルサイズの軽量化をImageAlphaで試してみました。 最初の状態でファイルサイズは579KBです。 PNGファイルをアプリケーションにドラッグ＆ドロップします。 画面下部にImage sizeとしてどのくらい軽量になったかが表示されます。 保存しようとすると以下のような画面が開きます。 注目すべきは「ImageOptim」にそのまま送ることもでき
縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」 – bl6.jp
縦や横に配置されたサムネイルから画像を選択することができるjQueryの画像ギャラリー「KGallery」。サムネイル画像の近くにある矢印をクリックすることで次のサムネイル一覧や前のサムネイル一覧にスライドさせるこもできます。たくさんの画像を見せたいけどスペースが限られているという時に活躍してくれそうです。 [ads_center] 使いやすいデザイン 上記は縦に配置されたサムネイル画像のタイプ。右側にあるサムネイルから見たい画像を選択します。拡大画像の左上にあるメニューアイコンでも次／前の画像に行くこともできるし、スライドショーの再生／停止もできます。 シンプルなデザインですが、とても使いやすい配置になっているかと思います。画像ギャラリーを実装したい時の選択肢の一つとして覚えておくとよさそうですね。 ちなみに縦に配置されたサムネイル以外にも、スライドショーだけのものやサムネイルだけのもの
写真素材 - PIXTA(ピクスタ)
出版、テレビCM、商品パッケージ、スマホアプリなどにもご利用可能です。ロイヤリティフリーなので、一度購入すると、様々な用途に何度でもご利用いただけます。 面倒な素材管理も必要ありません。レンタルポジやレンタルフォトに変わる24時間いつでも検索・ダウンロード可能なストックフォトサービスです。
Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
Fotolia
{"interception":{"ii":"-1"},"fotolia":{"host_base":"fotolia.com"}}
画像もDBに格納して管理する －扱いがめんどうなLOB(ラージオブジェクト)は使わない方法も含め
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Health Insurance High Speed Internet Work from Home Healthy Weight Loss Best Penny Stocks Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
ファイルの先頭8バイトだけで画像のフォーマットを調べる - bits and bytes
PHPでファイルをアップロードしたとき $_FILES にアップロードされたファイルについての情報が入っています。 そして $_FILES[...]['type'] にはアップロードされたファイルの MIME type が入っています。しかしここに入っている値は PHP: ファイルアップロードの処理 - Manual に $_FILES['userfile']['type'] ファイルの MIME 型。ただし、ブラウザがこの情報を提供する場合。 例えば、"image/gif" のようになります。 この MIME 型は PHP 側ではチェックされません。そのため、 この値は信用できません。 と書かれている通り信頼できません。ソースコードを見てみると php-5.1.4/main/rfc1867.c の SAPI_API SAPI_POST_HANDLER_FUNC(rfc1867_post
商用無料の写真検索さん - フリーの画像素材
自分のブログ記事がテキストだけでそっけないので何とかしたいという悩みを持ってませんか？ あなたと同じように、自分のブログ記事がテキストだけでそっけない悩みを持っていたユーザーが、このサービスを使うことで「イメージ付きで読みやすいブログ記事」を簡単に作成しています。 といっても、画像を加工するのが面倒そうですよね。 そこで当サービスでは簡単に探してその場で加工して、タグをコピペするだけという画期的な仕組みを提供しています。 注意事項 ・ライセンスへのリンクをしてください。 ・利用したものは、さらに再利用されてしかるべき形態をとってください。 ・それ以外の利用をしたい場合は著作権者に直接許可を取ってください。 NG行為 ・ライセンスへのリンクをしない。 ・透かしを入れるなど再利用を禁止する。 ・それらを著作権者に無許可で行う。 よくある質問：画像を印刷物や番組で使用したいのですが無料で使用でき
「飛び出す写真」を簡単に作るPhotoshopチュートリアル | POP*POP
たまにこんな（↑）写真って見かけますよね。インパクト絶大な写真です。 そんな写真を簡単に作る方法がこちらで紹介されていました。ちょっと人とは違ったサイトを作りたい方はいかがでしょうか。 » Out of Bounds – The Something Awful Forums Photoshopで作成します。ではどうぞ！ ↑ 元となる写真はこちら。 まず作るレイヤーは3枚。下から順に黒の背景、素材、フレーム用のレイヤーとなります（↓）。 ↑ 次に矩形ツールで白色の長方形を作成します。 そして、選択ツールで長方形の内部を切り抜きます。これでフレームができあがりました。 ↑ 次にフレームの形を変えます。フレームのレイヤーで「Ctrl+T」を使ってフレームだけを選択。 右クリックし、「遠近法」でフレームの形を変えます。「自由な形に」を選べば微調整も可能です。 ↑ あとは、不必要なところを黒く塗りつ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ダウンロードし放題 商用利用可能な写真素材サイトいっぱい | DesignWalker