I've noticed that the quality of my images in my portfolio and on my home page are a bit fuzzy. However, when I'm in a particular portfolio and I click on an image and view it in a lightbox, the image is significantly more crisp and clear. Do you know how to resolve this issue? I've attached the images so you can see what I mean. Thanks!
Thanks for the quick response. Unfortunately, that doesn't seem to help. Even with the WP Retina 2x enabled, the photos still appear a bit pixelated. They also appear fuzzy on my phone unless I go into lightbox. Once in lightbox, they're crystal clear!
Do you have any other suggestions on how to fix this issue?
Could you try using larger images (2x size) on portfolio single pages instead? For example, if a current full-size image is 1280x850, try upload a larger size as 2560x1700 instead. The plugin should properly bring the 2x version for retina devices.
Could you please also send me the site URL so I can check it here?
Sorry for the super late response. I've been doing some traveling recently and haven't had time to reply. I tried using a larger resolution image (4700 x 3100) as the featured item, but it still looks the same.
Here is the link to my website: http://farewelljon.com.
I just returned from my trip from Europe, and I was able to look at my website via a Windows PC. I've noticed that while the Retina 2x plugin has improved the image quality on my Macbook, the images still look quite pixelated on a Windows PC. Is there a fix for this as well?? My website is https://farewelljon.com.
Did you mean the images look a bit blurry when viewing on Chrome on a Windows PC? If so, then it is an issue of the browser itself when an image is resized via CSS.
For example, based on your site, if the actual image size is 800x533, but when it is displaying in a smaller container (750px), it will be resized to 750x500 and this is handled by a web browser.
In my experience, Chrome seems to give a poorer quality when an image is resized than Firefox.
To fix this, it is best to have both image and container the same size (width) so the images can be displayed properly without a blurry issue.
You can try adding this custom CSS to change the width from 750 to 800:
.content-width {
width: 800px;
}
Your images are already 800px wide so the quality should be better. I hope it helps.
Thanks Paul! I just tried it and it doesn't seem to improve the image quality. Perhaps I can tinker with my photos for a bit and see if I can figure out a solution. Thanks! I'll let you know if I need more help.
This is such a strange thing! Here's what's going on (hopefully it makes sense!):
When traveling with my Mac, I was uploading all my photos with a 1300px width (even though they container size was 750px). They looked very crisp after installing Retina 2x. However, upon returning home and using my Windows PC, I discovered that all the images were blurry.
I took your advice and changed the container size to 800px, then I also uploaded photos with exactly an 800px width. The photos then looked super crisp on my Windows PC. Unfortunately, the photos now look blurry on Mac!
Man, it seems like I have to choose if I prefer the images to be crisp on PC or Mac, but that they can't be crisp on both.
Is there any way around this issue? It seems like a very unique problem...
Wait! Ignore everything I just wrote. I've solved most of the issues by making the portfolio items the default 1280px again, instead of 800px. I uploaded my photos as 1980px, and they now appear crisp on both Mac and Windows.
But now I have another problem with responsiveness. Everything (e.g. featured item photos, photos in portfolio, photos in blog, etc.) is responsive unless my screen is larger than 1400px. If my browser is wider than 1400px, all of my portfolio items shrink down to 750px.
I've noticed that this does not happen when I activate my parent theme; it only happens when my child theme is active. I've tried debugging everything (e.g. Custom CSS, style.css, functions.php) but nothing seems to work : (. Please help.
Thanks Paul! Sorry for all the questions. I will attach my password in another post if you need to access my website.
Sorry for the very late reply! I actually changed my page so that the images are back to the default 1280px (which I kind of prefer at the moment). And, everything seems to look great! If I do decide to change the default image size again, I will be sure to try that code. Thank you for all your help! I really really appreciate it!!
Hi Paul,
I've noticed that the quality of my images in my portfolio and on my home page are a bit fuzzy. However, when I'm in a particular portfolio and I click on an image and view it in a lightbox, the image is significantly more crisp and clear. Do you know how to resolve this issue? I've attached the images so you can see what I mean. Thanks!
Cheers,
Jon
Hi Jon,
Did it happen when viewing on a retina screen? If so, please try using this plugin: https://wordpress.org/plugins/wp-retina-2x/
Best,
Paul
Hi Paul,
Thanks for the quick response. Unfortunately, that doesn't seem to help. Even with the WP Retina 2x enabled, the photos still appear a bit pixelated. They also appear fuzzy on my phone unless I go into lightbox. Once in lightbox, they're crystal clear!
Do you have any other suggestions on how to fix this issue?
Best,
Jon
Could you try using larger images (2x size) on portfolio single pages instead? For example, if a current full-size image is 1280x850, try upload a larger size as 2560x1700 instead. The plugin should properly bring the 2x version for retina devices.
Could you please also send me the site URL so I can check it here?
Hi Paul,
Sorry for the super late response. I've been doing some traveling recently and haven't had time to reply. I tried using a larger resolution image (4700 x 3100) as the featured item, but it still looks the same.
Here is the link to my website: http://farewelljon.com.
Thanks again for the help!
Best,
Jon
Hmm. Actually it should work...
Could you please send me the login account of your site (perhaps just a temporary account for me)?
I will try to check the settings and debug the code on your end.
* Don't forget to mark your reply as Private when sending me the credential.
Thanks for the information, Jon.
(So sorry for the slow reply due to weekend!)
Here's what I did:
1. I went to "Meow Apps > Retina" and enabled the Auto Generate option and selected the Picturefill as the method option
2. Then I went to "Media > Retina" and clicked the 'Bulk Generate (Thumbnail & Retina)' button
As I checked the result on my Macbook, the retina images could be displayed properly now.
Hi Paul,
No worries; that seems to have solved the problem. You're the best!!! Thank you!!!
Cheers,
Jon
You're most welcome, Jon! Glad I could help!
Hi Paul,
I just returned from my trip from Europe, and I was able to look at my website via a Windows PC. I've noticed that while the Retina 2x plugin has improved the image quality on my Macbook, the images still look quite pixelated on a Windows PC. Is there a fix for this as well?? My website is https://farewelljon.com.
Thanks!
Best,
Jon
Hi Jon,
Did you mean the images look a bit blurry when viewing on Chrome on a Windows PC? If so, then it is an issue of the browser itself when an image is resized via CSS.
For example, based on your site, if the actual image size is 800x533, but when it is displaying in a smaller container (750px), it will be resized to 750x500 and this is handled by a web browser.
In my experience, Chrome seems to give a poorer quality when an image is resized than Firefox.
To fix this, it is best to have both image and container the same size (width) so the images can be displayed properly without a blurry issue.
You can try adding this custom CSS to change the width from 750 to 800:
.content-width { width: 800px; }Your images are already 800px wide so the quality should be better. I hope it helps.
Cheers,
Paul
Thanks Paul! I just tried it and it doesn't seem to improve the image quality. Perhaps I can tinker with my photos for a bit and see if I can figure out a solution. Thanks! I'll let you know if I need more help.
Best,
Jon
Sure! Let me know if you need any help.
I just checked your site again using Chrome on Windows and the images look good now with 800px wide (no blurry image issue).
This is such a strange thing! Here's what's going on (hopefully it makes sense!):
When traveling with my Mac, I was uploading all my photos with a 1300px width (even though they container size was 750px). They looked very crisp after installing Retina 2x. However, upon returning home and using my Windows PC, I discovered that all the images were blurry.
I took your advice and changed the container size to 800px, then I also uploaded photos with exactly an 800px width. The photos then looked super crisp on my Windows PC. Unfortunately, the photos now look blurry on Mac!
Man, it seems like I have to choose if I prefer the images to be crisp on PC or Mac, but that they can't be crisp on both.
Is there any way around this issue? It seems like a very unique problem...
Thanks Paul!
Best,
Jon
Oh shoot, I just checked the mobile version and for some reason the following code you gave me creates 2 columns in my portfolio:
.content-width {
width: 800px;
}
Ahh! Oh man, I thought everything was working well : (.
Wait! Ignore everything I just wrote. I've solved most of the issues by making the portfolio items the default 1280px again, instead of 800px. I uploaded my photos as 1980px, and they now appear crisp on both Mac and Windows.
But now I have another problem with responsiveness. Everything (e.g. featured item photos, photos in portfolio, photos in blog, etc.) is responsive unless my screen is larger than 1400px. If my browser is wider than 1400px, all of my portfolio items shrink down to 750px.
I've noticed that this does not happen when I activate my parent theme; it only happens when my child theme is active. I've tried debugging everything (e.g. Custom CSS, style.css, functions.php) but nothing seems to work : (. Please help.
Thanks Paul! Sorry for all the questions. I will attach my password in another post if you need to access my website.
Best,
Jon
OMG IGNORE EVERYTHING!! I JUST FIXED IT ALL!!! Haha!
The problem was the child theme style.css:
/*
Theme Name: Child Theme
Theme URI: https://uxbarn.com
Description: My Child Theme
Author: UXBARN
Author URI: https://uxbarn.com
Template: enso
Version: 1.0.0
License: GPL
License URI: http://codex.wordpress.org/GPL
Tags: light, right-sidebar, responsive-layout, accessibility-ready
Text Domain: uxbarn
*/
I thought this was just a comment in CSS, but I guess it makes a difference! I just changed the version from 1.0.0 to 1.0.3.
I don't know if this is the right way to go about it. Please let me know if this is not a good idea!
Best,
Jon
Wonderful! It is totally OK to change the version number.
By the way, what if you just use this custom CSS alone without modifying the image size via PHP code in the child theme?
.content-width { max-width: 800px; }Could you try it again, clear the cache, and see if it can solve the blurry image and responsiveness issues?
Hi Paul,
Sorry for the very late reply! I actually changed my page so that the images are back to the default 1280px (which I kind of prefer at the moment). And, everything seems to look great! If I do decide to change the default image size again, I will be sure to try that code. Thank you for all your help! I really really appreciate it!!
Cheers,
Jon