As developers and designers, we are constantly faced with the problem of trying to make images responsive for the websites that we create. This is difficult because images by nature aren’t responsive; they’re raster files that have a certain number of pixels per square inch. So designers find themselves constantly coming back to the age old question of “do you use a large image file that will look great on desktop monitors but will take forever to load on small mobile screens? Or do you take a smaller image file that won’t take as long to load but will look ‘grainy’ on larger monitors?” In this post, I would like to look at how to make your images responsive, so you’ll always have perfectly optimized images for every device with your HubSpot CMS website. Let’s get started!
Background: Targeting Device Sizes
Before we get into the nitty-gritty of how to make your images responsive I would first like to discuss device and pixel dimension targeting. Before you start writing your code, you will want to decide which tablet size and mobile size you would like to optimize your images for. In the below example, I am going to be using Apple iPad (768 pixels in portrait orientation) and Apple iPhone dimensions (320 pixels in portrait orientation).
Once you have figured out which devices and pixel dimensions that you would like to optimize your images for you’re ready to start writing your code.
Implementing Responsive Images
At a high level, we are going to be specifying which images are displayed on screen by using media queries. In this post we will be targeting three types of devices: desktop computers, tablets, and mobile devices. To implement this effect on your own website you will write media queries in your main stylesheet at the tablet and mobile dimensions that you have decided to optimize for.
The Modules
In my customer use case I have the image set as a background image on the module “Parallax Section One”, and I have assigned it a unique class that we will discuss in the CSS section of this blog post.
It is important to set up your image as a background image on the module and then bring in the image file in the CSS stylesheet. This technique will allow you to change the image files at different pixel dimensions.
Desktop CSS
In your CSS stylesheet, you want to pull in your largest image file for laptop and desktop computers first. In the code below I brought in my largest image file at a width of 2,129 pixels wide. This image will be served up to any device that is larger than 768 pixels wide.
.parallax-section-1{
height:1000px;
background-position:center top 153px;
background-attachment:fixed;
background-repeat:no-repeat;
background-color:#2c5461;
background-image: url('http://cdn2.hubspot.net/hub/411363/file-1363863664-png/eyesshutLarge.png');
background-size:contain;
}
Tablet CSS
In the tablet CSS section I start with a media query that tells the computer to only serve this image up if the pixel dimensions of the device are a max width of 768 pixels.
@media screen and (max-width: 768px){
.parallax-section-1{height:400px;background-position:center top 170px;background-repeat:no-repeat;background-size:contain;background-image: url('http://cdn2.hubspot.net/hub/411363/file-1337170621-jpg/768/eyesshut.jpg');background-color:#2c5461;
}
Once this media query is declared I bring in an image file that is resized perfectly for devices that are 768 pixels wide. (*Note: it’s easy to resize images for your website in a photo editing software application like Adobe Photoshop, to learn more watch this short YouTube video).
Mobile CSS
The same technique is used for the mobile device image. You write a media query that targets devices at a certain pixel dimension (in my case I have selected 320px). Then you bring in an image file optimized for that dimension.
@media screen and (max-width: 320px){
.parallax-section-1{visibility:visible;height:200px;background-repeat:no-repeat;background-size:contain;background-image:url('http://cdn2.hubspot.net/hub/411363/file-1341117953-jpg/768/Silence.jpg');
}
Conclusion
Once you’ve written your media queries for tablet and mobile dimensions your set to go. Then all you need to do in resize your image files in Photoshop and bring them in as a background image. This technique will ensure that your images look crisp at every dimension, and it will also make sure that your page load times aren’t extended because you’re bringing in an unnecessarily large image file. Thanks, let me know if you have any questions about the technique in the comments below. Happy HubSpotting!
If you're looking for more on HubSpot tutorials for responsive web design on the CMS, check out the following documentation:
