WeaverCast 15 - Image for Responsive and Retina
In this show we go over how to properly use images in today’s responsive and retina web. We go over various tips that will both speed up your website and make it look more crisp. You get all this with minimal extra work.
- Fluid Image: https://joeworkman.net/rapidweaver/stacks/fluid-image
- Ruby from ElixirGraphics: http://elixirgraphics.com/themes/ruby
- Duo Responsive Browser: https://itunes.apple.com/us/app/duo/id777886035?mt=12&at=11l8IQ
- ImageOptim: http://imageoptim.com
Why do we need to treat images different for responsive and retina
In today’s web, people visit your websites from many different devices now. 30% of all web traffic happens from mobile devices. We need to learn how to optimize our websites so that our websites load faster since mobile devices do not have the same processing power or bandwidth that desktops have.
We need to worry more than the changing sizes of our visitors screens. Many of these same screens use the amazing new retina technology. Retina displays pack in 4x the amount of pixels, in the same physical space, as a non-retina device. When normal images are presented on retina displays, they will not be sharp. The reason for this is that each non-retina pixel inside the image is spread across 4 retina pixels.
We will learn how to overcome both of these new web paradigms in this show.
Scaling images across multiple screen resolutions
Most responsive themes for RapidWeaver will automatically scale image for us across all of our devices so that they look good on all devices from the desktop to the mobile phone.
However, If you use the Fluid Image stack we will be able to gain even better functionality out of the box on top of automatically scaling the image across all of our devices.
Scaling for Mobile Devices
Out of the box, Fluid Image will automatically create a scaled down version of your image to use on mobile devices. This will reduce the bandwidth required for the webpage to load, making the website load much faster on mobile devices. This is especially important since mobile devices have limited bandwidth.
If you add an image that is 2x the resolution of the image to be displayed, Fluid Image will automatically scale the image so that is looks crisp as can be on both retina and non-retina devices.
For example, if you want an image that will be 800x500 pixels on both retina and non-retina display, you will need to add a 1600x1000 pixel image into Fluid Image.
Stack Image Editor
To enter into the Stacks Image Editor, simply double click on the image inside Edit Mode. The stacks image editor will shrink all images that are greater than 800px. If you desire to add an image into Stacks that is larger then 800px, you will need to make sure that both the max-width and max-height settings are unchecked.
If you change any of the layout or styling options within the Stacks Image Editor, the changes will be added directly to your image before its uploaded. These options do not use CSS to style your image. However, the Fluid Image stack does use CSS so it is completely nondestructive to your images.
Resize your images
Its very important that you resize your images before you add them into your RapidWeaver project. Do not add 15 megapixel images directly into your project. This will now only slow down your RapidWeaver project but it will great reduce the performance of your website since the images will be so large.
It is best practice to reduce the dimensions of your image to the maximum size that you will need for your image to be displayed on your webpage.
Compress your images
You can use a great open source tool called Image Optim in order to compress your images down. ImageOptim will reduce the size of your images with virtually zero degradation in how the image will look. Many time you will be 60% or more reduction in file size.
Do you even need images?
Have a look at Font Awesome from show 14. Font Awesome is a great way to replace small images on your site. It support responsive and retina out of the gate!