Code Snippet Preview

The carousel code snippet provided on the Bootstrap 4 documentation has the class .img-fluid which would require you to use large images that scale down to mobile. This can make your pages load slower than needed.

Using the responsive <picture> tag you can load different pictures for different screen sizes and pixel densities. Achieving optimal page load speed and design control.

If you need IE browser support use this picturefill script.

If a picture looks blurry on a retina device, you can add a high resolution image version like this

<source srcset="img/blog-post-1000x600-2.jpg, blog-post-1000x600-2@2x.jpg 2x" media="(min-width: 768px)">

What image sizes should you use? You will often want to use common aspect ratios found in video media. I created a demo to show what these different sizes look like.

Related resources

  • WordPress vs HubSpot CMS Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Quickly Create a Website for B2B Company
  • HubSpot Custom Modules Marketplace
  • Buy HubSpot Modules in Bulk