レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」

 
レスポンシブデザインのメインヴィジュアルで使用するような画像を設定したブレイクポイント毎に最適化し生成してくれる「Responsive Image Breakpoints Generator」。画像のリサイズならphotoShopなどで、ちゃっちゃとやった方が早いと思いますが、仕組みを理解するという意味では面白いサービスです。

Responsive Image Breakpoints Generator

↓サイズ毎のイメージも確認でき、HTML5のソースも表示されます。


  • PSDファイルをSketchファイルに変換する「PSD to Sketch Design Converter」
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • 非レスポンシブの要素をレスポンシブ化する「Reframe.js」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
RELATED POSTS
  • 陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • 入力フォームを実装するためのテンプレート「Boilerform」
  • 【jQuery】スクロールに合わせて要素を切り替える「Midnight.js」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」