在Django中如何根据屏幕尺寸加载适配分辨率的图片？

Hey there! Let's tackle this responsive image loading problem for your photographer CMS—you're right to avoid UA sniffing and CSS-only hacks, those are fragile. Here are two rock-solid, browser-native solutions that play perfectly with your dynamic Django queryset:

1. Use the <picture> Element (Most Flexible) #

This HTML element was built specifically for responsive image scenarios. It lets you define different image sources tied to media queries, and the browser automatically loads the best match for the current viewport. No JS required, no reliance on user-agent strings, and it works seamlessly with your database-driven content.

Django Template Example #

{% for photo in photos %}
  <picture>
    <!-- Mobile: Load low-res image -->
    <source 
      media="(max-width: 767px)" 
      srcset="{{ photo.low_res.url }}"
    >
    <!-- Tablet: Load mid-res image -->
    <source 
      media="(min-width: 768px) and (max-width: 1023px)" 
      srcset="{{ photo.mid_res.url }}"
    >
    <!-- Desktop: Load high-res image (fallback for older browsers) -->
    <img 
      src="{{ photo.high_res.url }}" 
      alt="{{ photo.caption }}"
      loading="lazy" <!-- Optional: Add lazy loading for performance -->
    >
  </picture>
{% endfor %}

The browser checks <source> tags top to bottom, loads the first one that matches the viewport, and uses the <img> tag as a fallback for browsers that don't support <picture> (a tiny edge case these days).

2. Use srcset + sizes (Simpler for Width-Based Switching) #

If your needs are more straightforward (just switching based on viewport width), srcset paired with sizes is a cleaner alternative. It lets browsers calculate the optimal image to load based on the image's intrinsic width and the intended display size.

Django Template Example #

{% for photo in photos %}
  <img 
    src="{{ photo.high_res.url }}" 
    alt="{{ photo.caption }}"
    srcset="
      {{ photo.low_res.url }} 480w,
      {{ photo.mid_res.url }} 768w,
      {{ photo.high_res.url }} 1200w
    "
    sizes="
      (max-width: 767px) 480px,
      (max-width: 1023px) 768px,
      1200px
    "
    loading="lazy"
  >
{% endfor %}

• The 480w values in srcset tell the browser the actual width of each image file.
• The sizes attribute defines how wide the image will display at different viewport sizes. The browser does the math to pick the smallest image that looks sharp for the current screen.

Why These Solutions Beat Your Previous Attempts #

• No UA Sniffing: Relies on native browser media query support, which won't break with new browser versions.
• Dynamic Content Friendly: Directly uses your Django template variables ({{ photo.*_res.url }}) to pull images from the queryset—no messy workarounds for CSS or JS.
• Performance Optimized: Browsers only load the image they need, saving bandwidth and speeding up page loads for mobile users.

Quick Django Model Setup Tip #

Make sure your Photo model automatically generates and stores the different resolution copies when a high-res image is uploaded:

from django.db import models
from PIL import Image
import os
from django.conf import settings

class Photo(models.Model):
    high_res = models.ImageField(upload_to='photos/high_res/')
    mid_res = models.ImageField(upload_to='photos/mid_res/', blank=True)
    low_res = models.ImageField(upload_to='photos/low_res/', blank=True)
    caption = models.CharField(max_length=255)

    def save(self, *args, **kwargs):
        super().save(*args, **kwargs)
        
        # Generate mid-res version if missing
        if self.high_res and not self.mid_res:
            img = Image.open(self.high_res.path)
            img.thumbnail((768, 768))
            mid_filename = os.path.basename(self.high_res.path)
            mid_path = os.path.join('photos/mid_res/', mid_filename)
            img.save(os.path.join(settings.MEDIA_ROOT, mid_path))
            self.mid_res = mid_path
        
        # Generate low-res version if missing
        if self.high_res and not self.low_res:
            img = Image.open(self.high_res.path)
            img.thumbnail((480, 480))
            low_filename = os.path.basename(self.high_res.path)
            low_path = os.path.join('photos/low_res/', low_filename)
            img.save(os.path.join(settings.MEDIA_ROOT, low_path))
            self.low_res = low_path
        
        super().save(*args, **kwargs)

Both of these approaches are industry standards and will keep your responsive image loading reliable for years to come.

内容的提问来源于stack exchange，提问作者Kyle Alm