レスポンシブイメージ、使ってますか? ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で! 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも!アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です(参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か? レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です(現在のHTMLの仕様書)。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
1: 名無しさん@おーぷん 2016/06/04(土)00:56:32 ID:cJN こんなんでも分かっちゃうもんなのかね 3: 名無しさん@おーぷん 2016/06/04(土)00:58:04 ID:cJN >>2 違う 5: 名無しさん@おーぷん 2016/06/04(土)00:59:19 ID:lwE これ大阪だろ 6: 名無しさん@おーぷん 2016/06/04(土)00:59:47 ID:cJN >>5 なんでそう思った? 8: 名無しさん@おーぷん 2016/06/04(土)01:01:22 ID:lwE >>6 近所だもん 9: 名無し 2016/06/04(土)01:02:11 ID:PRd >>8 今からお前の家にイッチ来るぞ 鍵閉めとけよ 10: 名無しさん@おーぷん 2016/06/04(土)01:03:02 ID:cJN >>7 どこでそう判断したか聞き
私が本格的にブログを始めた2015年、いつもAC写真の素材にお世話になっていました。 ただ近頃は利用者が増えたのか、似た画像を目にするようになりました。 「他にも無料写真はないかな?」と探した結果、クオリティの高い写真を提供する下記サイトにたどり着きました。 保存時に画像サイズが選べる『pexels』 高画質でシュールな写真『GRATISOGRAPHY』 “関連画像”の機能が便利な『picjumbo』 見たことのないクールな写真『SplitShire』 うっとり見とれる写真素材『Unsplash』 会員登録不要ですぐにダウンロードして使えます。また著作権なしで、商用利用も可能な素材ばかりです。 Webデザイナーやエンジニア、ブログを書く人たちに少しでもお役に立てれば幸いです(すでにご存じでしたらすみません...orz)。 補足:「パブリック・ドメイン」とは? ここで紹介するサイトのほとんど
by Marcelle Lucena SNSにアップロードされたバラバラの写真の中から同一人物の写真を探し、SNS上での友達作りに役立てるためのサービスとして開発された顔認識システム「FindFace」は、顔認識技術が犯罪などに悪用される恐れがあると報じられていました。そんな中、FindFaceを使ってSNS上の女性の写真とアダルトビデオをマッチングさせ、AV女優の身元を特定するという悪事が発生しています。 Facial Recognition Service Becomes a Weapon Against Russian Porn Actresses - Global Voices Advocacy https://advox.globalvoices.org/2016/04/22/facial-recognition-service-becomes-a-weapon-against-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く