docsallover

video {
  max-width: 100%;
  height: auto;
}

docsallover

<video controls poster="path/to/poster-image.jpg" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser does not support the video tag. Please <a href="video.mp4">download the video</a>.</p>
</video>

docsallover

<video src="path/to/your/video.mp4"></video>

docsallover

<img src="path/to/image.jpg" alt="Description" loading="lazy">

docsallover

<picture>
  <source media="(min-width: 800px)" srcset="large-hero.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="large-hero.jpg" type="image/jpeg">
  <source srcset="small-mobile-hero.webp" type="image/webp">
  <img src="small-mobile-hero.jpg" alt="Person hiking on a mountain trail">
</picture>

docsallover

<img srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w" src="image-large.jpg" alt="A panoramic view of mountains at sunrise" width="1200" height="800">

docsallover

<img src="path/to/your/image.jpg" alt="A descriptive alternative text for the image">

docsallover

class ProductSerializer(serializers.ModelSerializer):
    category = CategorySerializer(read_only=True) # Nested serializer
    class Meta:
        model = Product
        fields = ['name', 'price', 'category']

docsallover

class ProductViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Product.objects.select_related('category').all() # Optimize here
    serializer_class = ProductSerializer

docsallover

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = ['id', 'name', 'price'] # Only include these fields
        # OR: exclude = ['description', 'created_at']