Have you considered starting with a mobile-first approach and then using media queries to enhance the experience on larger screens?

In addition, you have the option to use media queries to serve specific CSS files.

One method I've experimented with involves utilizing a script block in the header or immediately after the opening body tag. This script only runs for mobile devices (detected via a classname added to the body or the presence of a media query CSS file) to target inline images with a specified class and empty the src attribute.

For more information, check out Prevent images from loading

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

Another approach is to use URL rewriting with mod rewrite and .htaccess or the URL Rewrite module for IIS. Redirecting user agent strings for mobile devices to a small blank image can be achieved this way.

Learn more at: A way to prevent a mobile browser from downloading and displaying images

RewriteCond %{HTTP_USER_AGENT} (nokia¦symbian¦iphone¦blackberry) [NC] 
RewriteCond %{REQUEST_URI} !^/images/$
RewriteRule (.*) /blank.jpg [L]

To enhance performance, you can load your inline images from a different subdomain and apply rewrites specifically for mobile devices, focusing only on those images that need adjustments rather than all images like logos.

If I comprehend your question correctly, it appears that utilizing srcset and sizes would be an ideal solution for this scenario. For a more detailed understanding of the concept, you can refer to this informative MDN article. Allow me to provide a comprehensive example:

<img srcset="elva-fairy-320w.jpg 320w,
         elva-fairy-480w.jpg 480w,
         elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
        (max-width: 480px) 440px,
        800px"
     src="elva-fairy-800w.jpg" 
     alt="Elva dressed as a fairy">

This code essentially communicates the following:

• If the browser does not support srcset, it should default to what is specified in src.
• Instructs the browser to consider 3 files with their respective natural widths when using srcset.
• Specifies the desired display width in sizes based on media queries, selecting the most appropriate one.

Subsequently, the browser autonomously determines the optimal image based on size and screen resolution of the user, consequently downloading only the selected image - a remarkable feature!

It's crucial to understand that mobile devices do not always equate to low bandwidth or small screens, and desktops are not always synonymous with high bandwidth or large screens.

The key is to base your decisions on the client's bandwidth and screen size. Media queries are only helpful for addressing the latter.

If you're interested in learning more about optimizing mobile performance, check out David Calhoun's informative writeup here:

I highly recommend giving it a read.

Recently, I came across an insightful blog post discussing the challenges of responsive images and serving smaller images on smaller devices. The comments on the post were particularly intriguing, especially the innovative replacement technique introduced by Weston Ruter:

For more details, check out http://jsbin.com/ugodu3/13/edit#javascript,html,live (and explore other iterations in the comments).

While this technique has its limitations (such as difficulty integrating into existing websites that affect all non-absolute links, not just images), I am eager to experiment with it along with lazy loading on my upcoming project - a heavy responsive website designed by my designer who is against making it lighter. Additionally, consider combining this approach with a PHP script for on-demand image resizing if your server allows it.

Amongst other common solutions like cookie-based approaches (like the Filament Group Responsive Images plugin), I personally prefer responsive images over CSS backgrounds due to their semantic accuracy and SEO-friendly nature. Although we cannot always assume larger screens mean higher bandwidth availability, tools like navigator.connection being limited to Android devices make assuming slow 2G/3G connections for mobile users the safest bet.

Have you considered using JavaScript to dynamically check the screen resolution width and switch CSS templates accordingly? If the resolution is below a certain number, such as 480 pixels (which is when the site starts looking bad), you can easily transition to a mobile-friendly template.

function detectScreenWidth() {
  var width = 0;
  if( typeof window.innerWidth === 'number' ) {
    // Non-IE
    width = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    // IE 6+ in standards-compliant mode
    width = document.documentElement.clientWidth;
  }
  
  if (width < 480) {
    // Switch to mobile template
  }
}

Dealing with the constraints of an existing site can be challenging, but we find ways to adapt. I recently faced a similar issue when incorporating a blog feed into a mobile website. My solution involved dynamically scaling images on the page to fit the width of the screen only if they were larger than the screen size.

var $images = $("img[width]");
    $images.each(function(){ 
      try{
          var $image = $(this);
          var currentWidth = Number($image.attr("width"));
          if(currentWidth > screen.width){
              $image.width("100%");
              $image.removeAttr("height");
           }
      }
      catch(e)
      {/*alert("image scale fail\n"+e)*/}
 });

By setting the width to 100% and removing height attributes, the image is able to perfectly scale to occupy the full width regardless of the device orientation. It's important to note that optimizing images for the web beforehand is usually sufficient, as reducing HTTP requests plays a more significant role in performance improvement than using smaller images. While this may not be the ideal solution, it offers low maintenance and control over image sizes on the site. Feel free to explore other ideas based on this approach.