html

Different Image Files Based on Browser Width

August 25, 2022   |   Quickbits

.ipad,.mobile{display:none;} @media(max-width: 768px){   .desktop,.mobile{     display:none;   }   .ipad{     display:block;   } } @media(max-width: 500px){   .desktop,.ipad{     display:none;   }   .mobile{     display:block;   } } <img src=”image-file-desktop” class=”desktop”> <img src=”image-file-ipad” class=”ipad”> <img src=”image-file-mobile” class=”mobile”>

Read More

Including WebP Images

July 31, 2022   |   Quickbits

<picture>    <source type=”image/webp” srcset=”_content/Marketing/images/@(ImageMobile).webp 1x, _content/Marketing/images/@(ImageMobile)2x.webp 2x”>    <source type=”image/jpeg” srcset=”_content/Marketing/images/@(ImageMobile).jpg 1x, _content/Marketing/images/@(ImageMobile)2x.jpg 2x”>    <img src=”_content/Marketing/images/@(ImageMobile).jpg” alt=”@Title” loading=”lazy”> </picture>

Read More

Including WebP Images for Various Screen Sizes and Densities

  |   Quickbits

I’ve been working on optimizing images on a site of mine, and ended up really digging into the images necessary to be optimized at various monitor pixel densities, along with images based on screen width. This also ended up requiring a bit of a process to generate all of the necessary images. The first line […]

Read More

Removing the Horizontal Margins on a Google Chart Graph

May 14, 2016   |   Web Dev

I seem to be able to successfully modify quite a bit with google charts, but I couldn’t find a good way to remove the horizontal padding to the left and right of a google graph.  From what I can find, there really isn’t a good way to do it.  I thought I was close with […]

Read More