Homepage images blurry

• 

  amedusalaughs · Member · Jan 3, 2021 at 2:43 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’m using the Apostrophe 2 theme and having set featured images on my posts which appear high quality when on the page, when returning to the homepage, the image has become pixelated and low quality. It’s not happening for all images, so not sure what’s going on?

  Are there image requirements I need to meet in order for them to remain high quality?

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-mckluskey · Staff · Jan 4, 2021 at 2:46 pm

  • Copy link

  Hi there!

  For Apostrophe 2, Featured Images are 225 square, and we recommend an image at least 450 by 450.
  In the case of Featured Posts, they’re 465 wide by 225 high, and we recommend an image at least 930 by 450.

  That said, I don’t really see the images to be of different quality on your site. Could you share a screenshot of what you see on the post page and what on the homepage? You can use an online tool for that (such as https://snipboard.io/) and paste the link into your reply.

• 

  amedusalaughs · Member · Jan 4, 2021 at 4:37 pm

  • Copy link

  Hi!

  Thanks for replying!

  Here’s a screenshot of my homepage- you can see that the first and third image are very pixelated and the middle one okay. https://snipboard.io/e7imBS.jpg

  However, when you click on the post, the featured image is high quality. The image for the first post- https://amedusalaughs.wordpress.com/2021/01/03/period-sex/
  is 3000×2002, so should meet the requirements, shouldn’t it?

  I was wondering if perhaps the image was too big and wordpress had automatically compresse it?

• 

  staff-blorbo · Staff · Jan 4, 2021 at 8:03 pm

  • Copy link

  So, taking a look at https://amedusalaughs.wordpress.com/2021/01/03/paris/ the image used there is https://amedusalaughs.files.wordpress.com/2021/01/pexels-photo-5987212.jpeg?w=1860&h=900&crop=1

  And the original is https://amedusalaughs.files.wordpress.com/2021/01/pexels-photo-5987212.jpeg

  These aren’t bad at all.

  On the main page though it’s using https://amedusalaughs.files.wordpress.com/2021/01/pexels-photo-5987212.jpeg?w=323&h=323&crop=1&zoom=2 which you can definitely see the distortion at.

  I know you mentioned that https://amedusalaughs.files.wordpress.com/2019/02/pexels-photo-5012182-new-size.jpeg?w=323&h=323&crop=1&zoom=2 isn’t distorted, but take a close look at green rim of the bowl there and it’s definitely distorted the same way.

  Do you see the same problem if you upload your own image and don’t use Pexels?

• 

  amedusalaughs · Member · Jan 4, 2021 at 8:34 pm

  • Copy link

  Yes, taking a closer look you’re definitely right- it’s just a little less noticeable as the image is a little busier.

  I still have the same issue if I download my image from Pexels, and then upload that- this I tried with aspirations of a secondary structure protein, further down my blog.

  I also did a test with my own image, and you can see here that the corners of the leaf are still pixelated- https://snipboard.io/UJr80q.jpg

  Any advice would be much appreciated! :)

• 

  staff-blorbo · Staff · Jan 4, 2021 at 11:41 pm

  • Copy link

  Hm, we’re going to need to look into this.

  I’m seeing the same problem in the theme’s demo site: https://apostrophe2demo.wordpress.com/

  But, if you look at its screenshot at https://wordpress.com/theme/apostrophe-2 it wasn’t always this way.

  I’ve reported it at https://github.com/Automattic/themes/issues/2963 and you’re welcome to follow along there if you’d like to.