Cloudinary - Cloud-based image management & upload. ResponsiveImages: A Ruby Gem for Server and Client-Side Responsive Images. A simple, flexible and elegant solution for responsive images in rails applications. Responsive images seems to be an ongoing problem without any great solutions yet. As we continue to develop responsive front-ends, we continue to develop better way to address the problem. The Problem Most solutions tend to be either client-side implementation like HiSRC or rwdImages or occasionally, there are server-side solutions for Apache that require .htaccess.
Unfortunately, we don't use Apache and I'm not a big fan or relying on third-party services. A few months ago I developed a simple jQuery plugin to handle Responsive Images on the client-side. Our Solution The overarching problems is that we don't know what size the device is before the page is rendered. Using the responsive_image_tag helper, the gem will automatically load the appropriate size for the src attribute prior to rendering the page. The gem also handles background images with responsive_background_image.
Which responsive images solution should you use? There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques. The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions. To choose which technique is right for you and your project these questions may help as a guide. Do I have legacy content? Which really means... do I have legacy content that is impractical to update? The only technique I know of that works with absolutely no markup changes is Adaptive Images. Another question to ask yourself is if you care about legacy content.
Do I care about special markup? This is really a sub-question of the above. Do I care about semantics? Some responsive images techniques involve markup which isn't strictly semantic. Share On. Johnkoht/responsive-images.
Scottjehl/picturefill. How to use src.sencha.io. This Guide is most relevant to Sencha Touch, 1.x. Sencha.io Src helps you dynamically resize images for the ever increasing number of mobile screen sizes. We’ve previously done a lot of work in Sencha Touch to make your UI resolution independent, and Src expands this to include your image assets.
It’s easy to use, and in this guide, we run through the main API options for the service. Sencha.io Src is essentially a proxy that lies between image assets (hosted either on your own server or by a third party) and the browser or application requesting them via HTTP. The API is accessed entirely via placing a prefix before the original image URL. This prefix gives you declarative access to all of the different types of transformation that the service can perform. This approach makes the service very easy to add to existing web sites or apps without any programming knowledge. Let's start with a quick example. Defined sizing Important note: Sencha.io Src will only shrink images. Orientation Where: Imgix - Image Processing On-Demand, Served By CDN.
» Responsive IMGs Part 2 — In-depth Look at Techniques Cloud Four Blog. Responsive IMGs Part 2 — In-depth Look at Techniques In Responsive IMGs Part 1, I took a high-level look at what responsive IMGs are, the problem they are trying to solve, and the common issues they face. In this post, I’m going to take a deeper look at the specific techniques being used to provide responsive IMGs and try to evaluate what works and doesn’t. If you haven’t read part 1, you may want to do so before reading this post as it will help explain some of the terms I use.
When I started working on this project two months ago, I thought I would get to the end and be able to say, “Here are the three approaches that work best. What I’ve found is that there is no comprehensive solution. Because of this, the best thing we can do is understand the common elements and challenges so that we can start to pick the best parts of each for building our own solutions. So um… this is a long post. Abandoned approaches Dynamic Base Tag Temporary images Javascript-based solutions URL parameters 1. 2. 3. » Responsive IMGs — Part 1 Cloud Four Blog. In my post “Where are the Mobile First Responsive Web Designs”, I noted that one of the first things I look for when trying to determine whether or not a responsive web design is “mobile first” is whether or not it has a strategy for handling the IMG tag. A recent Smashing Magazine round up of responsive web design techniques included several new approaches for handling IMG tags which makes it the perfect time to dig into this problem and the potential solutions in more depth.
Why IMG Tags Suck for Responsive Web Design If you want your site to load as quickly as possible, you do not want to deliver larger files than are needed. Many responsive web design sites provide mobile devices images at sizes appropriate for desktop and ask the mobile device to resize the image. In my research, I found nearly 80% decrease in file size by delivering images at the actual size they were going to be used on a mobile device. So what’s the problem with the IMG element in responsive designs? ResponsiveImages.org. A Pixel Identity Crisis. A note from the editors: This article was augmented post production with vendor prefix information to cover Webkit-based and Opera browsers. The pixel has always been the smallest unit in screen-based design.
Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept. Because of this consistency, web designers have adopted pixels over points and other units to build websites. Article Continues Below Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. The hardware pixel#section1 Most of us are familiar with the hardware pixel.
The reference pixel and splitting atoms#section2 Things are changing for the pixel. Reference pixels are amazing, but now we have two conflicting definitions. Choosing a viewport for iPad sites - Allen Pike. The iPad has made choosing a good viewport tag for your site more challenging. You now need to specify something that looks good with your content for screens that are 320px, 480px, 768px, and 1024px wide. Viewports Mobile Safari presents desktop-sized sites on small screens by rendering to a virtual browser screen that is 980px ((Of course, when the iPad is in landscape orientation of 1024px wide, it will use 1024px.)) wide, and letting you pan and zoom that page.
Viewport tags let you tell Mobile Safari that your site displays properly narrower than 980px, and set other preferences for scaling your page. Craig Hockenberry famously determined the ideal viewport tag for content sites in the iPhone era. That technique is no longer sufficient for the iPad because it can blow up your content larger than 1:1, blurring your images. The Apple tech note ”Preparing Your Web Content for iPad” has a good suggestion: avoid hard-coding a width for your viewport.
Avoiding Blowup The initial-scale Hack. Adaptive Images for Responsive Designs. So you’ve been building some responsive designs and you’ve been working through your checklist of things to do: You started with the content and designed around it, with mobile in mind first. You’ve gone liquid and there’s nary a px value in sight; % is your weapon of choice now. You’ve baked in a few media queries to adapt your layout and tweak your design at different window widths.
You’ve made your images scale to the container width using the fluid Image technique. You’ve done a good job so pat yourself on the back. HTML has an <img> problem CSS is great at adapting a website design to different window sizes – it allows you not only to tweak layout but also to send rescaled versions of the design’s images. HTML is less great. Well, you could just use a high resolution image and the fluid image technique would scale it down to fit the viewport; but that’s sending an image five or six times the file size that’s really needed, which makes it slow to download and unpleasant to use. Adaptive Images in HTML. SVG Icons FTW. Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible.
But think about your icons. Using raster graphics for icons means that they are not manageable in CSS. What if we need to change a color of an icon for its hover/active/focus state? But fortunately we’ve had icon fonts coming to the rescue. It’s plain text, which means they can be gzipped to up to 95%It’s a vector graphic, which means it can be scaled to any size making it Retina readyIt’s one source file, which means a minimum of HTTP requestsIt’s a font – you can easily change size, color, shape and add a shadowBrowser support for older browsers possible (e.g.
So today we will explore the possibilities of using SVG icons instead. Using SVG icons Getting started Isn’t that nice? Using SVG. SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Why use SVG at all?
Small file sizes that compress wellScales to any size without losing clarity (except very tiny)Looks great on retina displaysDesign control like interactivity and filters Getting some SVG to work with Design something in Adobe Illustrator. Notice the artboard is cropped up right against the edges of the design. You can save the file directly from Adobe Illustrator as an SVG file. As you save it, you’ll get another dialog for SVG Options. The interesting part here is that you can either press OK and save the file, or press “SVG Code…” and it will open TextEdit (on a Mac anyway) with the SVG code in it.
Both can be useful. Using SVG as an <img> If I save the SVG to a file, I can use it directly in an <img> tag. In Illustrator, our artboard was 612px ✕ 502px. <! Creating Retina Images for Your Website. July 6th, 2012 by Kyle Larson Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images! Things to Consider When Adding Retina Images The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only).
If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. Simple Retina Images Creating Retina Icons for Your Website Retina Background Images. Retina Display for Mobile Web. 5 Ways to Support High-Density Retina Displays. An interesting point was raised by Brendan Davis in my recent post “Responsive Web Design and Scrollbars: Is Chrome’s Implementation Better?”
: are RWD breakpoints affected by high pixel-density screens? The short answer is: no — but we need to delve a little deeper and look at the problems they can cause. What is Retina? “Retina” is Apple’s brand name for double-density screens but other manufacturers are creating similar displays. For example, the MacBook Pro 15″ has a resolution of 2,880×1,800 or 220 pixels per inch.
Therefore, the device reverts to a standard resolution of 1,440×900 but the additional pixels can be used to make fonts and graphics appear smoother. What’s the Problem? Standard-resolution bitmap images can look blocky on a Retina display. Real-World Usage If you look around the web, you’d be forgiven for thinking everyone has a Retina display.
That said, Retina-like screens will eventually migrate to all devices. 1. You may also be able to replace some images entirely. 2.