September 10, 2020 at 4:57 am #1244728
I have a private website. I’ve uploaded several PNG files. These images are usually 3600 x 3600 pixels, 2 MB.
This thin digital tear or rip in the images seem only to appear when these images are added into a gallery media element, regardless of whether images are forced to be the same size; the size of the preview image also does not affect this digital tear from appearing.
This tear does Not appear in these same images when they are used as individual image media elements.
I have 2 examples of individual images that look normal and 2 galleries below it with these image tears on the web page (see private content).
Is there something about the gallery media element that can lead to these digital image “tears/rips” and what can be done to remove them, if possible?
Thank you in advance for your attention and assistance.September 10, 2020 at 5:03 am #1244731
Update: The digital tear, it seems, also appears on the upper left corners of the images. So, there are digital tears on left and right corners of all of my PNG images when they are within the gallery media element.September 10, 2020 at 8:08 pm #1244992
Can you please share the login name too?
Could you please attach some screenshots of the issue?
VictoriaSeptember 10, 2020 at 10:20 pm #1245024September 12, 2020 at 4:55 pm #1245370
Can you please make that account admin? We cannot see pages like this.
VictoriaSeptember 12, 2020 at 6:46 pm #1245420September 14, 2020 at 7:38 pm #1245818September 14, 2020 at 8:30 pm #1245838September 14, 2020 at 8:42 pm #1245841September 18, 2020 at 12:10 pm #1246765
Please have a look at the following thread:
If you need further assistance please let us know.
VictoriaSeptember 18, 2020 at 4:11 pm #1246847
I’m not sure if I correctly understood the thread on blurred pictures. I set the Big Preview Image and Preview Image to different sizes, but the tear on the top right and top left corners still show appear.
My issue is – regardless of blurry image or clear image – these tears continue to exist. I only scaled down the image – knowing that they are blurry – to create different sizes of one image file, to demonstrate that regardless of size or clear/blurry image, the tears/rips in the upper corners continue.
I added a code block of a basic gallery to show that the image files themselves are fine. The images only get the corner tears/rips when inserted into the gallery content element, and I’m not sure how to fix the problem (eliminate the tears/rips).
Please let me know if you can see these corner tears/rips on your side. The tears are faint but they are there. If you cannot see them, I can upload additional files to Dropbox. If you cannot see these tears, we are looking at different things, and you may not be seeing the problems that I am describing about how images have these faint (they appear a very light white when contrasted with the dark colors of my images) after they are added to the gallery content element. But please do have another look – it’s not a clear/blur issue but a tear/rip issue in the top right and left corners of images.
If the corner tear/rip problem in my images – in the end – cannot be resolved within the gallery content element, I will not use gallery and use the basic gallery that I created in my code block. Thank you, and please let me know what you find and further recommend to how to resolve this issue. I’m not sure if other Enfold users have experienced this problem with the gallery content element. Looking forward to your reply.September 21, 2020 at 8:15 am #1247277
Thank you for the update.
Sorry for the confusion. What do you mean by jagged tear exactly? Do you mean that the images are cropped and doesn’t display the whole image same as the source or original image?
If this is what you meant, then this is quite normal. Cropping of images depends on the thumbnail registration settings or if the crop parameter for a particular image size is enabled. If this parameter is enabled for a particular thumbnail, WordPress will automatically crop and resize that thumbnail to the specified dimension regardless of the original image’s aspect ratio. If the crop parameter is disabled, the thumbnail will be resized and retain its aspect ratio without being cropped.
IsmaelSeptember 21, 2020 at 9:05 am #1247284
I do not mean cropping of the image. Imagine you have a physical piece of paper and somebody made physical rips in the corners. In other words, the paper is torn in the corners. Imagine this same problem seems to be happening, but with PNG images. This problem only happens when I use PNG images in the gallery element.
This problem does not happen when images are added to an accordion slider This problem does not happen when images are inserted into a easy slider.
When I created a basic gallery using a code block using CSS and HTML, this problem did not happen.
If you look at the images inside my media library, the images show now digital rips/tears at all.
I’ve added an additional screenshot image in my Dropbox with pink arrows pointing to these rips/tears in my PNG images, in addition to the first screenshot image I sent 10 days ago (see Private Content).
The most important part of figuring out this problem is being certain that you are seeing the same Dropbox files that I am talking about. Please look at these 2 screenshot files in my Dropbox.
If you do not look at these 2 screenshot files, then you and I are not talking about the same thing and we are not looking at the same thing.
I also have included this URL for the web page where the problem appears.September 22, 2020 at 1:48 pm #1247619
Thank you for the clarification.
We could see the tear in the images now. What happens when you select a different thumbnail from the gallery’s Styling > Gallery Preview Image Size settings? This is set to 495x400px by default with crop disabled and selecting a different thumbnail or image size without the tear might solve the issue.
IsmaelSeptember 22, 2020 at 4:40 pm #1247657September 22, 2020 at 5:11 pm #1247662September 22, 2020 at 5:27 pm #1247672
Maybe off Topic – but you definitly need pngs for that?
The file size of a png is allmost a few times bigger than jpgs – a 2MB png could be replaced by a better resolution jpg with approx 300kb
So if you do not need the transparency – why no jpg use?
Can you share the screenshot in public to see the issue?September 22, 2020 at 7:38 pm #1247689
Thank you, Guenni. I like using PNG because jpeg, while smaller, loses sharpness in the image on screen, looks slightly blurry. I have a white background so my darkly colored images look like they have thin, jagged white rips on the left and right corners of the images.
Moderator: please see my additional comments in Private Content.September 23, 2020 at 10:25 am #1247805
OK – i just asked because i can not reproduce the issue.
See the bottom of that page : https://webers-testseite.de/gallery/
This is a gallery with left jpg – right png.
Click to see the lightbox – allthough this is a big png – there is no darker corner. – no tear ( rupture, torn, crack, rip nor break)
Yes, you are right – the png is a bit sharper on the preview image of the gallery, but at what price?
A page with 5-6 png of this dimension would take much longer to load completely. The surfing behaviour of most visitors to a page is such that if a page takes longer than 5 seconds to load, the attention is reduced to zero.September 28, 2020 at 1:20 pm #1248982
Does the tearing happen on any type of pictures or images? We are not really sure what is causing this image tear, so using JPEG instead of PNG temporarily might be your best option in this case.
Thank you for your patience.
IsmaelSeptember 28, 2020 at 3:36 pm #1249018
This tearing happens for PNG, JPEG, and JPG images/files whenever I insert them into the gallery element. I went back to much older images, JPG, that were ordinary, unmodified JPG pictures/images of scenery, taken from my digital camera from nearly 10 years ago, and inserted them into a new gallery element on a totally different page, and I still saw the tearing.
I wondered if maybe the problem was because the images were art works (instead of ordinary photograph images) or maybe because I was first using PNG images/files and then later JPEG images/files, but PNG, JPEG, and JPG images/files added into the gallery element still produced a gallery of images with this tearing. This tearing problem happens in a gallery element that contained exclusively PNG images, exclusively JPEG images, exclusively JPG images, or any combination of these 3 types of image files.
When viewed in the media library itself, the PNG, JPEG, and JPG files look totally fine, no problem, so the file themselves seem to not be damaged.
Were you able to reproduce this problem on your own website? I want to know if this is a problem specific to me, or if you or other people have been able to reproduce this problem. Knowing this would be helpful in finding out what is causing the problem I am having.
I have not seen this tearing problem when my art work images/files – JPEG or PNG – when using masonry gallery. But masonry gallery is not how I wish to present my images. I want my images, ideally, to be in some type of gallery.
Thank you for the inquiry.
This issue does not happen on our installation as shown in the screenshot of a gallery below. Original size of the images is around 1920x1080px, and the selected thumbnail is “Portfolio (496x400px)”.
Did you install an image compression or optimization plugin?
IsmaelOctober 1, 2020 at 4:13 pm #1249901October 3, 2020 at 3:35 pm #1250333
as someone who has been doing internet design for a long time, and someone who started using Photoshop in the early 90s to do image editing would be very interested to see this live at your site. If you don’t want to make it public you can send me a link via e-mail.
The contact information can be found on my avatar or nick.December 20, 2020 at 10:09 pm #1268881
Any updates on the imaging “tearing” issue for the gallery media element?
I found an unrelated website, Zillow.com, which shows image tearing in their search box.
It is very interesting to me that tearing is appearing in a search box.
I don’t know if there is a larger issue of tearing that appears outside of the Enfold theme specifically. I wonder if tearing is appearing on other websites that do Not use Enfold. For these unrelated websites, is tearing appearing in elements beyond the search box element?
It would be good to know what theme or template builder Zillow, if it is WordPress-based, or not. That may lead solutions to the tearing problem for Enfold and to non-Enfold/non-WordPress-based websites. Zillow.com is a well-known website.
It may be helpful to contact Zillow about this to help all people who have websites who have this “tearing” issue. I am still very interesting in identifying the underlying cause or causes of the problem for me and for anyone else who has this problem.December 22, 2020 at 4:51 am #1269219
You must be logged in to reply to this topic.