Featured images (blog post) on the top page

Hello,

I don’t see any issues with the theme, it properly displays cropped versions (300×300) of the images that you have uploaded.

Better thumbnails come from better uploaded photos.

Best regards,
// Dumitru

Hi Dumitru-san,

Thank you so much for your prompt reply! Would you please compare the photo that you can see from below link? I am using the same photo, but the featured photo on the top page looks more blurry.

https://www.styledjapan.com/urban-life/urban-life/
https://www.styledjapan.com/culture/culture/

The first photo is, File size: 343 KB, Dimensions: 1765 × 1255.
The second one is, File size: 458 KB, Dimensions: 5184 × 3456

The quality of the photo seemed to be down already when I selected the photo as a featured image even on the edit page before I publish.

It would be very much appreciate if you could tell me any possible reason why this is happening.

Thank you very much!

Hi,

I don’t understand the issue.

Is the question “Why a 1765×1255 image cropped to 300×300 looks a bit more blurry than the original images”?
When an image is resized it always loses a bit of sharpness. If you start with blurry images (like in this particular case), the end result will be even less sharp.
Try uploading sharp images.

P.S. The theme has nothing to do with this. WordPress crops the images that you upload.

My issue is that the file is uploaded as high quality, yet seems blurry on the cropped rendition. I do not have this issue with my other pages on this theme.

https://www.styledjapan.com/urban-life/urban-life/

The photo seems to be sharp when viewed at above link, and I am not using burry images.

Thanks!

• This reply was modified 6 years, 3 months ago by kkiiyyoo.

I understand that the sharpness will be down a bit when the image is resized, but it loses quite a lot. I did not have this issue with my other site below. So, I was wondering why.

https://pin-drops.com

Thank you for your help!

• This reply was modified 6 years, 3 months ago by kkiiyyoo.
• This reply was modified 6 years, 3 months ago by kkiiyyoo.

I think we have different understandings of the concept of image sharpness.

What you see here is not actual sharpness: https://www.styledjapan.com/urban-life/urban-life/
What you have here is the original 1695×1205 image in the body of the post, which is then resized in the browser to 660×469. You’re still loading the original image, you’re simply resizing the same file to a smaller viewing size.

The homepage and other archive pages use CROPPED versions of your original image. WordPress actually creates separate files with the exact measurements as requested by the theme: 300×300.

This is the newly created 300×300 image, which is simply displayed by the theme: https://www.styledjapan.com/wp-content/uploads/2018/12/IMG_4042-1-300×300.jpg

Resizing a large image in the browser and actually creating new image files with the required size have different results. You might be used to the browser resizing, which is why it looks to you like an image is sharper than the other.

Thank you for explaining. Please find the screen shot from the link below.

https://www.dropbox.com/s/lr389gspovelmw4/screen%20shot.jpg?dl=0

When the browser window is not full size, the photos on the top page look blurry and displayed bigger than 300 x 300.

Please compare the screen shot of full screen browser.

https://www.dropbox.com/s/8ee8l6qljnnm81d/screen%20shot-full%20view.jpg?dl=0

Is this normal? I think the photo appearance should not be affected by the size of browser window. I am using Safari.

There is a small range of browser widths in which the responsive rules in the theme make the width of the theme a bit wider, which in turn makes the thumbnails a little larger (~335×335).

This is when the browser’s window width is between 1000px and 1200px. I think that most screens and devices are either smaller or wider than this, and not exactly in this range.

But it might be worth looking into improving.
I will keep this in mind for future theme updates.

Thank you for taking time on explaining. It is much appreciated!