Images shrink and look distorted in featured posts

Product Support

AI-generated summary

Images shrink and look distorted in featured posts

The discussion revolves around an issue with images in featured posts looking distorted. Helga_Razinkova shared an example of the problem, and JammyDodger suspected it to be related to the Featured Cards component. nolo confirmed this and sought advice from david on optimizing images to prevent blurriness.

david suggested updating the size definitions and required resolutions in the component’s code. nolo appreciated the input and mentioned plans to integrate flexibility in the size settings.

A possible solution was proposed by david, defining the component with a large reasonable size and letting the browser resize the images. nolo found this approach straightforward and plans to investigate further, considering browser behavior and potential theme-related issues.

1

Hi everyone!

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

image
image1273×736 102 KB

Is there a way to resize images without losing quality?

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

Thanks!

7

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

8

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?

9

You need to update the size definitions here:

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

10

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

Screenshot from 2022-05-16 12-55-03
Screenshot from 2022-05-16 12-55-03673×282 20.1 KB

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

11

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?

12

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.