WebSite X5Help Center

 
Peter W.
Peter W.
User

Broken images when bilinear is used  en

Author: Peter W.
Visited 2341, Followers 1, Shared 0  

i have a website with a lot of images and I sometimes have the problem that when the Bilinear resample method is used, the images are shown as broken on the website. The only solution is to change the resample method to bicubic for each image, as that generally does not have this issue. I did once have this issue with "bicubic" as well, and that was resolved by using Decimate.

This seems to occur particually on websites that I have imported from previous versions of your software.

Not every image is affected, but for those that are, the problem persists until the resampling method has been changed.

The website where I have these problems, for example, is https://www.stnv.de/en/

No page showing the issue at the moment, as I have changed all the images to a different resampling method as a workaraound. One image that typically had this problem was the left and right arrow buttons to change page near the bottom of each page. I have attached that image file.

Posted on the
15 ANSWERS
Myron A.
Myron A.
User

Hi Peter,

My wish is to have a 4th option in Website X5 and that is to do NOTHING to my images.

I prepare all my images in Photoshop and they are sized and optimized pefectly BEFORE I bring them into X5.

Therefore, I don't want X5 to "touch" my files at all.

I hope Incomedia will address this, because there is nothing this software can do to improve my images.

Read more
Posted on the from Myron A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

. x Peter,

The PNG image attached appears to be regular. 
Post a link to a page where the image problem is present, so that it can be evaluated.  

(IT) - L'immagine PNG allegata sembra regolare.
Eventualmente postare il link di una pagina in cui si presenti il problema dell'immagine, in modo chepossa essere valutato...

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Esahc ..
Esahc ..
Moderator

Peter, could it be that simply replacing the image (same image, different name) would have fixed the issue? Perhaps resampling after import merely forces the image to be correctly reloaded into the project? I have often had to replace content after import, it's a trap, especially on largish projects.

(your website is great, I've just spent hours on it :-)

Read more
Posted on the from Esahc ..
Peter W.
Peter W.
User
Author

I have done such a good job of changing the resampling methog that I have fixed all the broken images, currently on the website. However, the problem appears to lie if images being "replicated" with different file names and some of these are then broken. For example, for that arrow right image, there are seven versions of that image on the server.

http://www.stnv.de/en/images/right.png
http://www.stnv.de/en/images/right_2l4twbra.png
http://www.stnv.de/en/images/right_9aa82cwb.png
http://www.stnv.de/en/images/right_19228879.png
http://www.stnv.de/en/images/right_ck2tjrn2.png
http://www.stnv.de/en/images/right_velalg4p.png
http://www.stnv.de/en/images/right_xvr6j399.png

All seven look OK, however the following are NOT OK:
http://www.stnv.de/en/images/italian.jpg  (OK)
http://www.stnv.de/en/images/italian_b5xtsod4.jpg  (This is how a broken image often appears)

I chose an image, as an example, that might mean something to the developers :-)

I had another look and have found two examples, I missed.

http://www.stnv.de/en/4x04-5_blood_and_fire.php
In the window labled "Subtitles (SRT), Part 1, 2 & The Movie." the USA and UK flags are broken.

However, those images are not typical as they are images inserted into a table widget. The problem usually happens in an image widget.

In order to demonstrate this, I decided to break my own website. I went to a page, that I can remember having to fix, and changed the sampling method back to Bilinear (and that is the only thing I changed) for all 6 book covers on this page: http://www.stnv.de/en/novels.php

You should see 5 such images (all 5 are visible in the software), but online only 2 of the 5 are visible. For the missing images, you cannot even click on them, it is as if they are not there.


You can see how it should look like, on the following page: http://www.stnv.de/en/novels2.php

So please look into this and let me know when I can repair that page again.

Esahc, I am glad you liked the website. A lot of visitors end up spending hours watching the episodes, etc. The Pilot is week, but then each one gets better and better.

Read more
Posted on the from Peter W.
Esahc ..
Esahc ..
Moderator

Peter, I am not sure how or what anyone can offer to solve this issue. I took each of the images from  http://www.stnv.de/en/novels2.php and added each as an image to a test page. The first row is bilinear, then decimate and then bicubic, but I could not replicate the issue.

It makes me wonder if perhaps the problem is custom code on the page/site ?

http://www.esahc.com/trek/trek.html

Read more
Posted on the from Esahc ..
Peter W.
Peter W.
User
Author

I have been observing this problem for years on a number of websites. I have just gotten used to always changing images to bicubic, as that solves the problem for the respective images.

The strange thing is, that it does not happen on every image. As you can see, there are still two images visible on that page, whereas the other three are not. All I have to do is, change those missing images to bicubic and they will appear again. 

I do not think the test you did is relevant, as you were taking images that had already been compressed with bicubic. A comparison of the source code of those pages would be perhaps more relevant. and that is what I have now done.

I saved the source code of novels2.php in both bilinear and bicubic mode into text files and then compared the two.

Looking at the source code, I discovered the following:
Each time I change the images, new versions of the images were uploaded with a code appended to the end. 

Looking at the differences to the source code, I found an issue that is causing this. Here is the edited relevant section of the source code differences:

Bilinear
"novels.php" img id="imObjectImage_139_391" src="images/stp2_6cminusw.01.Friends.and.Foes.Cover.v5.png" FOUND
"novels2.php" img id="imObjectImage_139_369" src="images/Star-Trek-Phase-2-True-To-His-Oath-2_oj9ysdis.png" FOUND
"novels3.php" img id="imObjectImage_139_395" src="images/Star-Trek-Phase-2-The-11th-Hour-Cover4_0ecoloj6.png" FOUND
"novels4.php" img id="imObjectImage_139_393" src="images/Star-Trek-Phase-2-The-Enemy-of-my-Enemy-Coverwshuttle--2-_6z458by8.png" NOT FOUND
"novels5.php" img id="imObjectImage_139_394" src="images/Star-Trek-Phase-2-Calm-Before-the-Storm_17668zw5.png" NOT FOUND


Bicubic:
"novels.php" img id="imObjectImage_139_391" src="images/stp2_d81ay92a.01.Friends.and.Foes.Cover.v5.png" FOUND
"novels2.php" img id="imObjectImage_139_369" src="images/Star-Trek-Phase-2-True-To-His-Oath-2_0hpz8izp.png" FOUND
"novels3.php" img id="imObjectImage_139_395" src="images/Star-Trek-Phase-2-The-11th-Hour-Cover4_y6q8arkb.png" FOUND
"novels4.php" img id="imObjectImage_139_393" src="images/Star-Trek-Phase-2-The-Enemy-of-my-Enemy-Coverwshuttle--2-_geb6ae60.png" FOUND
"novels5.php" img id="imObjectImage_139_394" src="images/Star-Trek-Phase-2-Calm-Before-the-Storm_99dbv7yu.png" FOUND


I then looked at the server if the given filenames had been uploaded:

Bilinear
images/stp2_6cminusw.01.Friends.and.Foes.Cover.v5.png = FOUND
images/Star-Trek-Phase-2-True-To-His-Oath-2_oj9ysdis.png = FOUND
images/Star-Trek-Phase-2-The-11th-Hour-Cover4_0ecoloj6.png" = FOUND
images/Star-Trek-Phase-2-The-Enemy-of-my-Enemy-Coverwshuttle--2-_6z458by8.png = NOT FOUND
images/Star-Trek-Phase-2-Calm-Before-the-Storm_17668zw5.png" = NOT FOUND


Bicubic:
images/stp2_d81ay92a.01.Friends.and.Foes.Cover.v5.png" FOUND
images/Star-Trek-Phase-2-True-To-His-Oath-2_0hpz8izp.png" FOUND
images/Star-Trek-Phase-2-The-11th-Hour-Cover4_y6q8arkb.png" FOUND
images/Star-Trek-Phase-2-The-Enemy-of-my-Enemy-Coverwshuttle--2-_geb6ae60.png" FOUND
images/Star-Trek-Phase-2-Calm-Before-the-Storm_99dbv7yu.png" FOUND


In Bilinear mode on https://www.stnv.de/en/novels2.php - two images are not displayed, 4 and 5. 
As can be seen, they are assigned new names, but files of those names are NOT UPLOADED.

This is causing the broken images.

This does not appear to happen the first time an image is uploaded. But on subsequent uploads after some minor changes are made to the image, etc. is when the software starts to rename the images and in bicubic mode, then forgets to upload the missing images. It works every time in bicubic mode so there is something different in the software between those two modes.

I have exported the complete project and can make that available to you, if that would help isolate and fix this bug.

It is 1.6 GB in size.

Read more
Posted on the from Peter W.
Peter W.
Peter W.
User
Author

In the software (I am using v13 Pro), the images are missing on the preview as well (see attached), so it is no wonder they are not uploaded. As any additional code on the server cannot influence how the preview works, this looks to me like a bug.

Perhaps this can be found and fixed in time for v14?

Read more
Posted on the from Peter W.
Peter W.
Peter W.
User
Author

You can download a zip file which includes the respective images (original and as uploaded to server), novels2.css and the source code of the page in both bilinear and bicubic modes and a file showing the differences.

I also extracted those five pages and inserted them into a new project file. The images have not been updated often enough in the test file for the problem to occur. I uploaded the test to https://www.stnv.de/test

You should now have enough information to understand where the problem happens.

Read more
Posted on the from Peter W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

1) - the images must be light weight (max. 300-500 KB) and appropriate measures appropriate for this purpose; ... never original pictures from the camera; use IrfanView, ACDSE, Gimp, etc. to equalize the images;
2) - the images must reside on a main internal disk of the PC in a well-defined directory (C: \ resources), (D: \ resources); never use images in remote locations or in external drives to the PC;
3) - the images must be named short and alphanumerically, preferably in lowercase, without the use of empty spaces and even of special characters and punctuation; allowed (-) and (_); ... even paths must be short and properly named;

(IT)
1) - le immagini devono essere di peso leggero (max 300-500 KB) e di misure adeguate atte allo scopo; ...mai immagini originali da fotocamera; utilizzare programmi tipo IrfanView, ACDSE, Gimp, ecc. per equalizzare le immagini;
2) - le immagini devono risiedere in un disco principale, interno del PC, in una directory ben definita (C:\risorse), (D:\risorse); mai usare immagini in posizioni remote oppure in unità esterne al PC;
3) - le immagini devono essere nominate in modo breve ed in alfanumerico, possibilmente in minuscolo, senza far uso si spazi vuoti e neanche di caratteri speciali e punteggiature; consentito il (-) ed il (_); ... anche eventuali percorsi devono essere brevi e nominati correttamente;

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Peter W.
Peter W.
User
Author

1) - the images must be light weight (max. 300-500 KB) and appropriate measures appropriate for this purpose; ... never original pictures from the camera; use IrfanView, ACDSE, Gimp, etc. to equalize the images;
The images themselves should be no problem. I use Paint Shop Pro and as a trained photographer and computer programmer, I know how to handle images.

2) - the images must reside on a main internal disk of the PC in a well-defined directory (C: \ resources), (D: \ resources); never use images in remote locations or in external drives to the PC;
All images are stored on a mirrored drive installed internally in the computer. If I understand it correctly, images are just imported and stored in the WebsiteX5 directory.

3) - the images must be named short and alphanumerically, preferably in lowercase, without the use of empty spaces and even of special characters and punctuation; allowed (-) and (_); ... even paths must be short and properly named;

My images normally have short names and I always use an underscore instead_of_spaces in filenames. However, i have been observing that WSX5 often adds long codes to filenames.

None of the issues mentioned are responsible for these issues.

Read more
Posted on the from Peter W.
Esahc ..
Esahc ..
Moderator

I wish you luck Peter. I suspect unless you can create a new (small) test project that demonstrates this issue and can be made available to Incomedia there will be little joy. None the less I have requested their assistance.

I tried to recreate your problems by exporting and importing but could not.

I find it interesting that on https://www.stnv.de/engl/novels3.php there appears to be half the image of "the enemy of my enemy", and yet on https://www.stnv.de/engl/novels2.php the last two images are totally missing.

I do suspect it has something to do with the image names because as KolAsim said, WX5 likes shortish image names, and yet when we re-use an image the second and subsequent copies get a random string attached making the name significantly longer and I assume unique. I presume this could cause issues when importing to a new version. I have never understood why WX5 thinks this is necessary because when I used to hand code websites I always re-used a single file.

Good luck.

Read more
Posted on the from Esahc ..
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Peter W.
... ... 2) - the images must reside on a main internal disk of the PC in a well-defined directory (C: \ resources), (D: \ resources); never use images in remote locations or in external drives to the PC; All images are stored on a mirrored drive installed internally in the computer. If I understand it correctly, images are just imported and stored in the WebsiteX5 directory. ... ... ... 

Maybe I did not understand, and I have a doubt about point 2):
>> internal hard drive, C:\ ... or internal hard drive D:\

(IT) - Io forse non ho capito, ed ho un dubbio sul punto 2):
>> disco fisso interno, C:\ ... oppure disco fisso interno D:\

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Peter W.
Peter W.
User
Author

You are right that some of the filenames, used for those pictures, did have spaces in them and were long, but the files were otherwise being used correctly and the spaces are being replaced with a "-" in the software, when uploded.
If the length of the filenames was the issue, why did it always work in Bicubic and only sometimes work in Bilinear?
According to my analysis, the problem was not the length of the filenames, but the fact that the bilinear image files were not being uploaded to the server, while those with bicubic coding were always uploaded correctly.

As to the setup of my PC:

C: is a 500GB SSD drive that is primarily used for Windows 8.1, installed programs (incl. WebsiteX5) and minimal data.

The project files for WebsiteX5 are located at C:\WebSiteX5-13Pro\

D: is my BluRay
E: is my 2.5TB mirrored (Storage Spaces with 2x 2.5TB) data drive, where my Star Trek files and images reside.

As far as I understand it, images used with the Image widget are stored in the Library directory. In this case:
C:\WebSiteX5-13Pro\Stnv-English\Library

Anyway, I have renamed all of those five images in the example to have short filenames. I have also set them all to be bilinear for the test. I have uploaded the changed project to https://www.stnv.de/engl and at the moment the images are visible. I probably need to update them a few times to get WebsiteX5 to change the filenames and make them disappear.

The test upload has been made to
https://www.stnv.de/engl/novels.php

Interestingly, now another issue has turned up. On this page, the 5th image is only half shown, yet it appears correctly in the software (both in IMAGE OBJECT and the preview function)!!! The original filename used is stp2.05.Calm.Before.the.Storm.png and bilinear encoding is on use. I have attached the original image.
https://www.stnv.de/engl/novels4.php

I will certainly bare in mind the file naming conventions and will test this on all future images that decide to disappear.

Read more
Posted on the from Peter W.
Incomedia
Claudio D.
Incomedia

Hello Peter,

Please try to press CTRL while opening the preview so all files are generated again by the program to be sure to have all images processed and then proceed to export.

Try also to reduce the number of simultaneous connections inthe export settings to see if this helps.

Many thanks!

Read more
Posted on the from Claudio D.