I have a problem and I dont know if it is a bug or other thing is happening. I am using the Slideshow element, with a height of 500px. I used an image of 1920x711. When I see the image in my screen (1366x768), I see it perfectly. But if I reduce the width of the window, there is a point where the image goes a bit blurred. This point is exactly at 1280px width.
An example where you can see the issue is this page: http://maipacific.com.mialias.net/prueba-plantillas/
Reduce the width till 1280px and see the diferences between lower than 1280 (blurred) or upper than 1280 (defined).
To access:
user: maipac482
pass: 34OnUnwQ
We have both tried an actual image in the slider and there doesn’t appear to be any blur regardless of screen width or size. You could try converting that image to a gif and see if this helps. However, using an actual image doesn’t appear to have any blur.
What do you mean with “actual” image? Have you check it in my web and you have not seen the issue?
I comment several things:
I am going to use photographs in the slide, so I am going to use .jpg. It was just a test.
In any case, after your answer I checked with .gif version and the problem is the same.
The same happen with any photo I used in any page.
I replaced in the page to test by a photograph. Please, check the issue with that image. When I see the hair of the girl,it goes blurred for widths lower than 1280px. Every photo I used, goes blurred for widths lower than 1280px.
I do see a slight blur on the image. So both Ben and I have done some further digging and testing. One of the tests Ben tried was to upload an image to a page using the native WordPress editor. When he viewed the image and reduced the browser width that too had a slight blur.
I confirmed this to when I recreated Ben’s test. So we did some further research and read some articles discussing this issue. From what I have read, this appears to be a consequence of responsive web design, browsers will resize large images so they can be viewed on smaller screens. Unfortunately, doing so may also reduce image quality in an effort to display all of the content.
To prove this, we tested an image in the native WordPress editor like I mentioned above and I also viewed some third party theme demo’s of themes with large images. When I resized my browser, the image did suffer from a slight degradation or blur.
Is it possible for you to run a similar test on your end, by uploading an image to the native WordPress editor via a page and then reduce your browser to see if the blurring appears?
I’m also going to be speaking to one of our developers and if there is a work around for this or not.
I have some test uploading a image in the wordpress editor and I dont see anything. Could you share some example url with the same issue ? I even seeing your templates using slideshow and I dont see any problem, but if I substitute your photos with my photos, I see the problem. But I have checked with a lot of photos.
I have something new that maybe can help:
I have seen that with the width where the image is seen correctly, if you see the image it is using (right button->open image in new tab), this is the original photo, and from the width where the image is seen blurred, if you see the image it is using, this is a cropped one. When it uses the cropped one, the problem happens. Maybe this is a clue to solve the issue.
Is it possible for you to share a link to the page where you added an image via the Add Media option, please. So we can take a closer look, as the page I tested on is only locally hosted.
I see blurred only the image in the B case. As I said in my last post, if you see when the image is blurred, this is not the original image but a cropped one. In case A, the image showed is always the original one.
In the images used in your demos, the blur does not happen. I dont know why.
Just wanted to shoot you a quick note to let you know that we are looking into this one. We’re a bit short staffed today, but will get back to you as soon as we can. Thanks for your patience!
Hi! How is it going? I have to have the web ready for this week. Do you know something more?
I have seen that the blurred image is a 1024px width one. It is logical that if a 1024px width image is loaded in a screen width bigger, it is showed blurred. This is the diagnostic of the problem, but I dont know the solution!
So I have downloaded one of your image the and added it to one of my local test sites. I added the image to a page using the native WP editor, a Photo module and the SlideShow module.
I am getting a slight blur on the image in the SlideShow module, no where else. Therefore, there is definitely an problem. Which I have reported to our track.
I have an update for you, which should address your issue.
Our developers have reviewed the problem and did some testing. The issue appears to be related to the largest image size set by WordPress which is 1024px. To resolve your issue you can do the following:
Go to your WordPres Admin Dashboard > Settings > Media and increase the largest size significantly and save the changes.
Then use the Regenerate Thumbnails plugin to regenerate your images.
You may also want to clear the Beaver Builder cache via WordPress Admin Dashboard > Settings > Page Builder > Cache.
It looks it works! As a workaround is ok, but I think it is necessary a definitive solution. Not to change the large image size to have the Slideimage element working properly. Do you agree?