One of the biggest issues with responsive design is the optimization and handling of images. If you’ve seen a responsive site, you know that images tend to squeeze down with the browser as it gets smaller. That’s all well and good, but if you’re viewing a picture of your cat on a mobile browser, it doesn’t need to be 1200 pixels x 800 pixels.
A file that size could run into the hundreds of kilobytes. Large files, large load times. Period. Knowing more about your images will help you continue putting great content on the web without sacrificing load time.
Images That Respond
Getting an image to scale down with your browser is actually quite easy as far as responsive design goes. A common method is to use the following CSS:
img { width: 100%; height: auto; }
An important distinction needs to be made here, though. In CSS, “width” and “max-width” are two different things. Width will set the element to 100% of the width of the container it resides in.
Not so bad unless the container it is inside is wider than the image itself. For example, a 600 pixel wide image in an 800 pixel container would make the image 800 pixels wide, scaling it up and making it pixelated.
Instead, change the above CSS to:
img { max-width: 100%; height: auto; }
Now, the image will never be wider than the container it sits inside and will only expand until it hits the native width of the image. That’s pretty much it in terms of getting images to size down properly. We could also discuss serving different image sizes, the <picture> element or srcset, but that’s for another time.
Image File Types
JPG (also JPEG) – Great for all sorts of images where compression is desired.
PNG – The most commonly used file type for icons or other items that need the background to be transparent.
GIF – The most fun images on the web, and a great file type for smaller images that need a transparent background. Can get some bad artifacts, so generally a PNG is used for static images.
TIFF – Never use this file type in a blog post. Every time you use a .tiff file on the web, Sergey Brin punches a cat.
SVG – Scalable Vector Graphics. This file type deserves its own post and will not be discussed here.
Image Optimization Example
I have an image of my dog (see below) and am going to export from Photoshop for this post.
1. Cropping – The image was taken with my cell phone and is 3264 px x 2448 px. The post you are reading has a content area of 723 px (maximum), so first I’ll trim it down to 725 px wide, just to have a nice number. After cropping down to exactly what I want shown in the image, my new image size is 725 px x 397 px. File size is already down from 22.9 megabytes to 843.2 kilobytes.
2. When exporting from Photoshop, use “Save for web and devices,” which automatically gives more control over the image output. This nifty feature will show you the size of the file and the rate at which it will be downloaded depending on Internet speeds.
3. Contrary to popular belief, JPG files do not need to be exported at 100% quality from Photoshop. When we “Save for Web and Devices” for this image as a JPG at 100%, file size is 224.1 K.
4. Pretty good, but we can do better. From the “Save for Web and Devices” screen, we can adjust “Quality.” I’ll be bold and brave and lower to 60%, lowering file size from 224.1 K to 65.93 K. Result is below.
5. Awesome. The naked eye quality is almost identical (to me, at least) and we’ve cut our image from 22.9 M to 65.93 K. Most of the time, it’s okay for us to be done here, but let’s take it one step further with Optimizilla.
6. After uploading the image, I turned the quality down to 60 again, cutting my file into a compressed 33 K. At this point you can start to see that it’s losing a bit of its finer details, but still pretty darn good overall.
7. We could get into dpi and resolution and work on tweaking those items a bit more, but you get the gist in terms of how the process works.
Extra Steps
In a perfect world, everyone would have Google Fiber and be on the web at speeds of 100 megabits per second, but sadly that is not the case. For further speed-boosting power, you can try a few different things.
Setting up a content delivery network (CDN) can drastically cut your image load times. The CDN is designed for speed and by using them to serve your images, you can keep loading the rest of your page while the CDN loads your media.
You could also spend some time with a caching system. In WordPress, there are several caching plugins of note, but two that tend to stand above the rest are W3 Total Cache and WP Super Cache.
By turning on a caching system, your page caches the first time someone goes to the page and will load faster for all who follow. Pretty great unless you’re constantly updating styles or content in a page.
Lazy loading is another way to get your page speed up with images. When you use a lazy loader, images are only loaded when they are shown on the page, reducing the initial drag of your load time. So keep in mind that there are always ways to improve load time.
Help You Help Yourself
Know how big your images are. The standard DSLR can shoot a 3.2 MB image with no issue. Ehrmagerd, the megapixels! Think about your end user. Unless they need to take that photo, download it and put it on a poster, it never needs to be that size.
For a rundown of additional responsive design best practices, check out Responsible Responsive Design: An Overview.
And for those who can’t afford Photoshop try using some online resources to reduce your images like:
https://tinypng.com/ or https://kraken.io/web-interface