pelican-plugins/image-process

responsive-image handling adds entries to srcset even if the source image is smaller

Open

#53 opened on Jul 30, 2021

View on GitHub
 (0 comments) (1 reaction) (0 assignees)Python (22 forks)github user discovery
enhancementhelp wanted

Repository metrics

Stars
 (59 stars)
PR merge metrics
 (PR metrics pending)

Description

I have a set of images and some are large some are small.

My setup looks like this:

    'large': {
        'type': 'responsive-image',
        'srcset': [
            ('1000w', ["scale_out 1000 1 False"]),
            ('2000w', ["scale_out 2000 1 False"]),
            ('3000w', ["scale_out 3000 1 False"])
        ],
        'default': '1000w',
    },

I want 3 image sizes and no upscaling.

If the input image img_a.jpg is 3500px wide. I get a perfect srcset of:

<img 
   class="image-process-large" src="/large/1000w/img_a.jpg" 
   srcset="/large/1000w/img_a.jpg 1000w, /large/2000w/img_a.jpg 2000w, /large/3000w/img_a.jpg 3000w"/>

Where /large/1000w/img_a.jpg is 1000px wide, /large/2000w/img_a.jpg is 2000px wide and /large/3000w/img_a.jpg is 3000px wide.

But if I have an image img_b.jpg that is 1500px wide. I get the same srcset:

<img 
   class="image-process-large" src="/large/1000w/img_b.jpg" 
   srcset="/large/1000w/img_b.jpg 1000w, /large/2000w/img_b.jpg 2000w, /large/3000w/img_b.jpg 3000w"/>

Where /large/1000w/img_b.jpg is 1000px wide, /large/2000w/img_b.jpg is 1500px wide and /large/3000w/img_b.jpg is also 1500px wide.

It would be better if

  • /large/2000w/img_b.jpg and /large/3000w/img_b.jpg are not generated since they are not adding any information
  • the original image is used as a fallback

I propose that the generated tag sould look like this:

<img 
   class="image-process-large" src="/large/1000w/img_b.jpg" 
   srcset="/large/1000w/img_b.jpg 1000w, /img_b.jpg"/>

Contributor guide