Images shrink and look distorted in featured posts

Helga_Razinkova · May 12, 2022, 1:16pm

Hi everyone!

We have several featured posts, and images look somewhat terrible there:

Is there a way to resize images without losing quality?

Just in case, here’s our forum: https://community.elfsight.com/

Thanks!

JammyDodger · May 13, 2022, 9:25am

Is that from the Featured Cards component? If so, maybe @nolo can help?

nolo · May 16, 2022, 11:47am

Yeah that looks like the component. Though it’s based on the Featured Tiles component and I believe with regards to image resizing I didn’t change any code. I also sometimes see blurry previews with the Topic List Thumbnails component. Maybe @david has advice how to optimize images so the previews don’t get blurred?

david · May 16, 2022, 11:49am

You need to update the size definitions here:

github.com

nolosb/discourse-featured-cards/blob/b265de14a0c3ab678d6090af3ed81a5193ef663b/javascripts/discourse/components/featured-card.js#L6-L8

      
        
            responsiveRatios: [1, 1.5, 2],
            displayHeight: 200,
            displayWidth: 200,

And then do the maths to update the list of required resolutions here:

github.com

nolosb/discourse-featured-cards/blob/b265de14a0c3ab678d6090af3ed81a5193ef663b/about.json#L8-L12

      
        
            "topic_thumbnail_sizes": [
              [200, 200],
              [300, 300],
              [400, 400]
            ]

nolo · May 16, 2022, 11:58am

Oh… thanks for pointing this out! I let users adjust the sizes in settings:

Screenshot from 2022-05-16 12-55-03

Looks like I’ll have to think a bit if and how I can integrate this flexibility with the existing definitions

david · May 16, 2022, 12:26pm

The easiest approach is probably to define the component with the the largest reasonable size in the code (maybe 500x500, plus the 1.5x and 2x variants), and then let the browser resize them down when displaying?

nolo · May 17, 2022, 8:37pm

Thanks for the hint David! This seems pretty straightforward for the component. In any case, looks like I’ll need to understand a bit better what the browsers are actually doing, picking a scaled thumbnail and resizing it to the final layout size. As mentioned, I also saw blurry images with the topic list thumbnails and the results are slightly different depending on browser. And it’s probably because I do some size adjustments on my theme code.