--- title: "HubSpot CMS Tutorial: Responsive Images, The Right Way" description: Implementing responsive images on the HubSpot CMS is easier than you think. image: //cdn2.hubspot.net/hub/53/file-597040093-jpg/Blog-Related_Images/Homepage_Images/responsive-design-1.jpg --- # [![Hubspot](https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_color.svg "Hubspot") Designers](https://designers.hubspot.com) # Latest CMS Developer Posts # HubSpot CMS Blog ## HubSpot CMS Tutorial: Responsive Images, The Right Way Written By [Jonathan Pavoni](https://designers.hubspot.com/blog/author/jonathan-pavoni) on Sep 4, 2014 9:30:00 AM - [Tweet](https://twitter.com/share) 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](http://www.thehumanright.org/) 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. ![The Modules](https://designers.hubspot.com/hs-fs/file-1559674306-png/Designers-Hubspot-v2/Blog_Images/Screen_Shot_2014-09-03_at_6.19.46_PM.png?width=622&name=Screen_Shot_2014-09-03_at_6.19.46_PM.png "The Modules") 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. ```    height:1000px; ``` ## **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. ```    ``` 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. ```    ``` ## **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! [![Subscribe to HubSpot's Designer Blog](https://no-cache.hubspot.com/cta/default/327485/e64147ef-bf5c-4efa-87a1-e8871792dc23.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/e64147ef-bf5c-4efa-87a1-e8871792dc23) ***If you're looking for more on HubSpot tutorials for responsive web design on the CMS, check out the following documentation:*** - **[Using Max-width](https://designers.hubspot.com/docs/snippets/responsive/max-width)** - **[How to set your base font size for responsive design](https://designers.hubspot.com/docs/snippets/responsive/how-to-set-your-base-font-size-for-responsive-design)** - **[How to Implement a Fixed-Top Mobile Navigation (Design Manager)](https://designers.hubspot.com/docs/snippets/responsive/how-to-implement-a-fixed-top-mobile-navigation-design-manager)** - **[How to Implement masonry.js with Flexible Columns](https://designers.hubspot.com/docs/snippets/responsive/how-to-implement-masonry-js-with-flex-columns)**     Topics: [Tutorial](https://designers.hubspot.com/blog/topic/tutorial) ![](https://cdn2.hubspot.net/hub/53/file-406901828-png/Jon_pic.png) ### [Jonathan Pavoni](https://designers.hubspot.com/blog/author/jonathan-pavoni) Jonathan Pavoni is the CEO of Creatrix Marketing. He is a passionate entrepreneur, marketer, and writer. He loves to help companies utilize technology to achieve growth. [Facebook ](https://www.facebook.com/jonathan.pavoni.3) [LinkedIn](https://www.linkedin.com/pub/jonathan-pavoni/4/952/574) [Twitter ](https://twitter.com/JonPavoni) | [Website](http://www.CreatrixMarketing.com) ### Stay Up To Date 👇 [![Learn how to code on HubSpot CMS](https://no-cache.hubspot.com/cta/default/327485/48f45cc1-54a9-4ef7-a5a0-7d5dd9d1125b.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/48f45cc1-54a9-4ef7-a5a0-7d5dd9d1125b) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty.   [![Join the HubSpot CMS Developer Slack](https://no-cache.hubspot.com/cta/default/327485/cdc804dc-ef60-407e-be85-eae710c82187.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/cdc804dc-ef60-407e-be85-eae710c82187) [![Ask questions in the CMS Developer Forum](https://no-cache.hubspot.com/cta/default/327485/c010e1d7-342f-49bf-90f3-b7a0ec528d8f.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/c010e1d7-342f-49bf-90f3-b7a0ec528d8f) [![Join the free CMS for Developers Course](https://no-cache.hubspot.com/cta/default/327485/d2de59e8-c568-4db8-b61e-d091317736ed.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/d2de59e8-c568-4db8-b61e-d091317736ed) [![View the HubSpot API Documentation](https://no-cache.hubspot.com/cta/default/327485/29dd2781-ed8c-40a1-bd07-7ff1137a16eb.png)](https://cta-redirect.hubspot.com/cta/redirect/327485/29dd2781-ed8c-40a1-bd07-7ff1137a16eb) ### Designers Blog Topics - [Website Design (55)](https://designers.hubspot.com/blog/topic/website-design) - [Design (33)](https://designers.hubspot.com/blog/topic/design) - [Website Development (27)](https://designers.hubspot.com/blog/topic/website-development) - [Tutorial (22)](https://designers.hubspot.com/blog/topic/tutorial) - [Product Updates (21)](https://designers.hubspot.com/blog/topic/product-updates) - [Best Practices (16)](https://designers.hubspot.com/blog/topic/best-practices) - [CMS (16)](https://designers.hubspot.com/blog/topic/cms) - [Inspiration (15)](https://designers.hubspot.com/blog/topic/inspiration) - [Free Resources (12)](https://designers.hubspot.com/blog/topic/free-resources) - [Customer Story (7)](https://designers.hubspot.com/blog/topic/customer-story) - [COS (5)](https://designers.hubspot.com/blog/topic/cos) - [Examples (4)](https://designers.hubspot.com/blog/topic/examples) - [web development (4)](https://designers.hubspot.com/blog/topic/web-development) - [SEO (3)](https://designers.hubspot.com/blog/topic/seo) - [UX Research (3)](https://designers.hubspot.com/blog/topic/ux-research) - [Productivity (2)](https://designers.hubspot.com/blog/topic/productivity) - [Conversion Rate Optimization (1)](https://designers.hubspot.com/blog/topic/conversion-rate-optimization) - [HubDB (1)](https://designers.hubspot.com/blog/topic/hubdb) - [Infographic (1)](https://designers.hubspot.com/blog/topic/infographic) [see all](https://designers.hubspot.com/blog/responsive-images-hubspot-cms#) ### Recommended Posts ### Subscribe to the Designers Blog [### Learn how to work with our API ](https://developers.hubspot.com/) [### Chat with Designers in the CMS Forum ](http://inbound.org/group/hubspot-designer-forum) [### Get the HubSpot CMS for Developers Certification ](https://academy.hubspot.com/certification) [### Try HubSpot's Website Platform for Free ](https://app.hubspot.com/l/products?pql-source=website-designers-portal-side-cta) ### Designers Blog Topics - [Website Design (55)](https://designers.hubspot.com/blog/topic/website-design) - [Design (33)](https://designers.hubspot.com/blog/topic/design) - [Website Development (27)](https://designers.hubspot.com/blog/topic/website-development) - [Tutorial (22)](https://designers.hubspot.com/blog/topic/tutorial) - [Product Updates (21)](https://designers.hubspot.com/blog/topic/product-updates) ### Recommended Posts ### About - [What is HubSpot?](https://www.hubspot.com/what-is-hubspot) - [Our Story](https://www.hubspot.com/internet-marketing-company/) - [Executive Team](https://www.hubspot.com/company/management) - [Press Room](https://www.hubspot.com/internet-marketing-company/press-room) - [Partners](https://www.hubspot.com/partners/) - [Deutsche Website](https://www.hubspot.de) - [FAQs](https://www.hubspot.com/faq) ### Jobs - [Cambridge](https://www.hubspot.com/jobs/) - [International](https://international.hubspot.com) ### Learn Inbound - [Marketing Resources](https://www.hubspot.com/free-marketing-resources) - [Inbound Marketing Blog](http://blog.hubspot.com) - [Deutscher Inbound Blog](http://blog.hubspot.de/marketing) - [HubSpot Academy](https://academy.hubspot.com/) - [INBOUND Conference](http://inbound.com/) ### Support - [Open a support ticket](https://help.hubspot.com/support) - [Submit a feature request](http://ideas.hubspot.com/) - [Join a local user group](https://academy.hubspot.com/local-hubspot-user-groups/) - [Help & support home](http://knowledge.hubspot.com/) ### Contact Sales - [Request a call](http://offers.hubspot.com/contact-sales) - North America - [888.482.7768](tel:8884827768) - United Kingdom - [+44.20.36847648](tel:+442036847648) - Ireland - [+353.1.5187500](tel:+35315187500) - Germany - [+49.69.299571918](tel:+4969299571918) - Australia - [+61.28.22.81902](tel:+61282281902) ### Locations HubSpot, Inc. 25 First Street, 2nd Floor Cambridge, MA 02141 European Headquarters One Dockland Central, Dublin 1, Ireland Asia/Pacific Office 60 Anson Road, Mapletree Anson, #10-03, Singapore 079914 - Copyright © 2017 HubSpot, Inc. - [Legal Stuff](https://www.hubspot.com/legal-stuff) - [Privacy Policy](https://www.hubspot.com/privacy-policy/) - [Site Map](https://www.hubspot.com/sitemap/)