In the past, I have not had this issue as bad as I have it now. For example, on this page, the header image looks fine – but the image is the same size 2560 x 1707. https://maydayclub.ca/elementor-28853/ I made that page a few years ago, and you can see how the image isn’t blurry.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Here is all the additional CSS I am currently using on my site for your reference, but I have tried deleting it all and I am still getting the same issues, so I am confident that the CSS is not the issue here.
.header-filter::before { background-color: rgba(0, 0, 0, 0.15) !important; }
.hestia-ribbon.section-image:after { background-color: rgba(0, 0, 0, 0) !important; }
.section-image.hestia-about:after { background-color: rgba(0, 0, 0, 0) !important; }
.header-filter::before { background-color: rgba(0, 0, 0, 0) !important; }
.navbar .navbar-nav>li a {
font-size: 16px;
}
.navbar .navbar-header .navbar-brand img {
max-height: unset;
width: auto;
height: auto;
}
.navbar .title-logo-wrapper {
max-width: 110px;
}
.page-header .container {
height: 600px !important;
I encountered a problem in setting the cover image. The illustration image I uploaded seems blurry both in desktop and mobile version (mobile is much worse though). Check out the hero background image in https://bbetterm1.com/
I have turned off all the image optimzation plugins and I have set jpeg-quality to 100 by add_filter. It seems there are two problems here (i am not certain):
I’d appreciate it if someone could help me figure out this problem. Thanks!
]]>So the images of the products on any shop page or a page where multiple products are populated, have become blurry as on date 9th November, 2022. It was fine yesterday. I checked and assumed the issue was from the jetpack plugin. I deactivated the plugin but there is no change.
The images are being resized to a smaller size. I have tried doing the bsaics, that is changing the width through the customiser, but it did not have any effect.
Another thing to note is that the images are fine for individual product pages.
Kindly help.
Thanks
]]>Whereas previously the first slider image loaded pretty much upon page load, now, instead of the slider frame, I simply get a horizontal black bar about 16px high. Then, when the full frame loads, it takes a long time to load the image, during which I see a circling loading icon over a cloudy screen within the slider, and when an image does load, after an inordinate lag considering the image size, it’s the second one, not the first slide (all of the images are the same size).
Lazy load and LQIP are currently off, but it was pretty much the same thing when they were on. The upshot is, the slider images don’t seem to be caching at all (although they did before I enabled quic.cloud). I intentionally made them NOT full screen so they WOULD load swiftly, as they are all linked to the sites they are screenshots of if anyone wants to takes a closer look.
I have played around with lazy load and LQIP settings on the HTML, Page Optimization and Media tabs in Litespeed cache, but this is my first time with it all, and there are a LOT of settings! I would very much appreciate any guidance that might narrow down a little where the problem is.
]]>1) Have tried the following image size/resolutions, but all of them are displayed on the mobile interface with the same level of blurriness. There is no difference between all the tried image sizes/res.
? 1500px x 950px, 72dpi.
? 4959px x 900px, 72dpi.
? 7937px x 1443px, 72dpi (currently live).
2) Had installed and used “Regenerate Thumbnails”. No effect at all on the display of images.
3) Had under “Theme File Editor > functions.php” inserted this code, but with no effect at all.
add_filter(‘jpeg_quality’, function($arg){return 100;});
4) Had under “Media Settings”, adjusted all my image sizes to “0” value as advised by various forums. No effect at all on the display of images.
I am at a total loss and would really appreciate some help on this.
Thank you!
Charles
I have tried multiple things to fix this. I have disabled cropping. The slider resolution itself is 2000 x 1000. In Settings, the resolution is also set to 2000 x 1000. It’s marked as full width. The first image of the slider is also 2000 x 1000. (I have not yet edited the remaining slides).
None of these things have fixed the problem – the slide is still slightly blurry or fuzzy. When not in the slider, the image looks clean and high res.
What else could be causing this problem?
Thanks.
]]>The image “Making Life’s Special Moments Sweeter” is sharp and clear on a desktop size, but when in mobile versions, it’s a bit blurry.
I have had this problem with other images.
Is there something I need to set to make sure images in the mobile version as just as sharp and clear as in desktop.
Thanks!
]]>I have created a test page to see my problem.
I want to speed up my site, so I realized that if I upload a photo for example with size 1280×500 pixeles.. in a laptop with two column this will be displayed at 600×250 (seeing in google devtool inspector).. So I exported this photo again at 600×250 from my image editor, I uploaded again to wordpress..but surprisingly, it is a little blurry, so not as crispy as the bigger on, altought it is loading 600×250. Also when for example a 4 column row, one image will display at 250×250.. If I upload a bigger one 350×350..It will still be little blurry… the only way is to upload a for example 1080×1080. Examples here–> [ redundant link removed ]
I am wedding photographer and image quality is very very important for me. Also I dont want to upload very big images to solve, this..as this will slow down my site. Hope you can help me.
]]>