Improve Website Performance With Our Responsive Image Generator
We’ve all experienced frustration when we’ve tried viewing a website on our smartphone just to discover the website wasn’t built for our particular device. Maybe the images were cut off or proportioned weird, or you had to scroll left to right to read the content on the page. These are clear signs you’ve found a non-responsive website, and if you’re like us, you didn’t stay on that site very long. With all the search algorithm ranking factors that revolve around website health and a positive user experience, building a responsive website is a no-brainer these days and has been the industry standard since 2013.
View the Responsive Image Generator
Remind Me - What Is Responsive Web Design?
Responsive web design is the process of creating a website which will fit all screen sizes and provide a positive user experience in all browsers, regardless of the device. This is so important in the mobile-first era, where Google now indexes the mobile version of a website in determining where a site ranks in search. At Blue Compass, we keep mobile-first top of mind while creating responsive web designs, and we start the website design process by creating the mobile design, and then transform it to fit tablet and desktop.
When web designers and developers create a website structure for each device, it not only makes web design performance and usability reach new levels, but it makes the site faster. Even more exciting, there are additional methods to make your website more optimized for speed.
Why Site Speed Matters
Considering that 53% of mobile site visitors leave a page that takes longer than three seconds to load, website speed is incredibly important. Users want information instantly, and if you can’t give it to them fast enough, they’ll find someone that will. Google understands this and now deems page speed as a ranking factor in their algorithm. You can test your website load time on Pingdom or Google PageSpeed Insights to see how quickly your page is loading.
If your website is taking 5+ seconds to load, it’s time to see what you can do to optimize your website speed. One of the easiest methods to enhance site speed is to keep your image sizes minimal. We all want to see crisp and beautiful images on our websites, but at what cost? It is a fine line we must walk to accompany the highly-desired attractive images with a fast loading website.
How Do I Resize Images?
Resizing images is one of the most effective ways to improve website speed. We recommend images be less than 100 kilobytes (KB) if possible. If you find oversized images on your website, you should compress them or make them responsive to reduce the file size. Image compression does not change the dimensions of the image, but does scale down the quality. Online images do not need to be the same quality as print images, so the result of the compression should be quite minimal on the photo quality you see. However, for the most consistent and mobile-friendly option, Blue Compass recommends making your images responsive.
How to Make an Image Responsive
We recommend using an image srcset code to make an image responsive. This will automatically choose the image size that will be optimal for the device being used and improve page load time. This used to be a very technical task that not all marketers could achieve without the help of a developer, as you needed CSS codes to make it work. We understand not everyone has access to talented web developers, and we believe everyone should be able to enhance their website and its load time on their own. That’s why our team created a responsive image generator to make the process easy for everyone.
The method behind our responsive image tool takes the idea behind responsive websites, where the web design changes to perform for all devices, and channels that into specific website images. When a web page resizes or loads on a different device, an image srcset will allow the browser to detect the proper image to display for optimal speed and quality. This not only improves your website’s load time, it will make Google happy that you are following their best practices for images which will help your site rank higher in search.
What is an image srcset?
For those of you that are not developers who speak code, the image srcset is a type of HTML code that will specify which size of the image to use in different situations, making the image responsive. The srcset attribute is required when <source></source> is used in <picture></picture>.
While the image srcset attribute for responsive images is not a new concept, it has only been fully supported since late 2017. This means, while the early release of this attribute has been available since around 2014, some prominent browsers didn’t include it to their updates until 2017. Thus making us web developers eager for adaptation.
As with many shiny new things, there is a steep learning curve, until someone comes along and simplifies the process, and we’ll talk about how we did that with our responsive image generator tool below. Before, the difficult part (the image srcset) is the management and maintenance:
- To start it, you must know code.
- To create it, you must resize, optimize and save nine different image files based on the original image. This is typically done with photography software.
- To update it, you must change the code and recreate the images every time you need to plug in a different image.
These steps alone are why many choose to skip this process entirely and willingly take the ‘hit’ in performance. However, these tasks become even more daunting when creating content with multiple images on the page, because each of these steps would have to be replicated for each image.
To put this into perspective, let’s say you have 5 images within your article. Each image averages 300 kilobytes (KB). That means each time a visitor comes to this page, it will load 1.5 megabytes (MB) for the article images alone. Without optimizing or compressing the images, that size can increase significantly. With a proper responsive image approach, containing correctly sized and optimized images, those 5 images could be 50 KB per image on a smartphone. Rather than your visitor loading 1.5 MB of images on their phone, they would load 250 KB of images, thus allowing for a 600% faster image load. To make this happen without any type of tool, you would need to create 45 different image files total (9 optimized sizes for each of those original 5 images).
While Blue Compass does recommend this approach, we do realize it is difficult to expect clients to jump through so many hoops to add images to their page. Utilizing photo software, creating nine different images, understanding and writing code and doing this multiple times per page is a large request for anyone, especially clients who want an easy method to maintain their content.
Blue Compass has created a responsive image tool that makes this a simple process that anyone with a website can use. We have made it so easy to use, so you don’t even need CSS codes to make your image responsive. All you need is your uncompressed image, and we’ll handle the rest!
How The Responsive Image Generator Works:
- To start, visit: https://tools.bluecompass.com/responsive
- Decide whether you want this tool to host your images, and enter a hosted image URL (ie - https://www.yourdomain.com/image.jpg) (Figure 1).
Or if you choose to put them on your own server, upload your image from your computer (Figure 2).
- Once the image has been applied to the tool, you are now able to select a file compression rate. We’ll recommend an automatic compression level, but you can set and compress your images to your desired quality. On the left side is your original image, and on the right side is your compressed image for your review. As you will see, your image will remain in good quality, while the image file size is lowered dramatically.
- After your compression quality has been determined, you can choose if you want a different image generated for mobile, tablet and/or desktop. You most likely want all three to ensure your image is fully responsive. For advanced users, you can select “Advanced Options” and change your media query breakpoints. If you are unsure, skip this step - the tool will still function properly with our pre-programmed choices.
- Next you will place in your image’s ALT and Title tags. As you know, these are important for ADA and SEO compliance.
- Last step: PREVIEW IMAGE and see if you are happy with how it performs. When you select PREVIEW IMAGE, your image will display using the code generated. Simply resize the arrows on the outside of the image to see how it reacts to the different media sizes you selected in Step 4. If you need to make any modifications, you can jump back to any of the previous steps.
- If you uploaded your own image from your computer in Step 2, select DOWNLOAD FILES and a zip file containing all of your images and your code will be downloaded for your use. If you used an image from your own website URL, select VIEW CODE and your code will be displayed. While it looks confusing, rest-assured if you copy that code and place it into your website, it will function properly.
Contact Blue Compass With Questions or Feedback For Our Responsive Image Generator
While this tool is still in Beta, we are eager to receive your feedback in order to perfect the system and roll it out for full public use. Please contact us and share your thoughts.
A few larger corporations have already contacted us with the desire to install this tool for use on their own internally managed content management system (CMS). This allows every single image that’s uploaded into their CMS to automatically be sized to fit each type of device. If that is of interest to you, please drop us a line, and we can provide pricing information. We look forward to hearing from you!
Cary Coppola
Cary is actively involved with client strategy, client relationships, new business development, front-end development and the overall business direction for Blue Compass. His favorite responsibility is working with the Blue Compass team to orchestrate complex client requests.