0

I have, on my website, elements created by JS, and content set from a JSON file, in which there are images paths.

My problem is that sometimes, a few images load with a really bad quality (e.g: images). It's never all of them at the same time, like 2 out of 6 images, once out of 3 page loading.

Knowing that the images are not heavy at all (JPG's, 200 to 500 Ko each, for a total of 6 images that could increase in the future) is there anyway I could resolve the problem?

As advised by mplungjan in the comments, i've saved the image when it loads with bad quality, and it has the same size as the original, and has no problem once opened with windows photos.

Also, no errors or warnings appear in the console when it happens, or in the network section neither.

This happens on every browser tested with, and the website isn't online yet, only stored locally on my PC

Do you think this could be a solution? :

https://stackoverflow.com/a/31370466/14748679 - (load a smaller quality first and replace it by a better one after once it's ready?)

or could I set a funciton that checks the load quality and reloads only the images that have the problem?

enter image description here

When I reload the whole page, it becomes (and this pictures size is 193Ko) :

enter image description here

This is the code used to set the create the element and set the image source :

 var profilphoto = document.createElement("img");
  profilphoto.src = "C:\\Users\\Luc\\Desktop\\Projet\\Projet6\\FishEye_Photos\\Sample Photos\\PhotographersIDPhotos\\"+items.photographers[i].portrait;
  profilphoto.setAttribute("aria-label", "Photographer's profil image");
  profilphoto.classList.add('profilphoto');
  photoandname.appendChild(profilphoto);
LucR
  • 25
  • 7
  • For the moment it's locally stored, haven't put the site only yet, so online aspects can't play a role. I'll try to save the image as you advise, just need to reload the page untils it happens again. I didn't understand the part about tags and clue, what is a clue? – LucR Dec 09 '20 at 12:41
  • 1
    So the saved "bad quality image" has the same size, and when i open it with windows it's perfectly fine. – LucR Dec 09 '20 at 12:46
  • 1
    I'll keep that in mind for when i do put it online, but it's all locally stored for now so there's no server involved for the moment – LucR Dec 09 '20 at 12:50
  • everything between the " " are all folders on my PC. I tried replacing the space between Sample Photos with %20, seems to reduce the frequence of the problem but still happens (once in 10 to 15 loads). – LucR Dec 09 '20 at 13:05
  • Also click F12 and look in the console and network tab when this happens – mplungjan Dec 09 '20 at 13:07
  • No, in another folder, C:\Users\Luc\Desktop\Projet\Projet6\Mainpage. So there both in Projet6, but not the same folders from there. Nothing in the console, and nothing different in network + selecting image between when it loads properly and fails (loads in 34ms with no error) – LucR Dec 09 '20 at 13:12
  • So `profilphoto.src = "../../FishEye_Photos/Sample%20Photos/PhotographersIDPhotos/"+items.photographers[i].portrait; ` should work. – mplungjan Dec 09 '20 at 13:21
  • Yeah it works, but the problem still happens though – LucR Dec 09 '20 at 13:26
  • Very weird. Nothing in the console or network tab when it happens? – mplungjan Dec 09 '20 at 13:26
  • 1
    Nope nothing, really strange and yes in every browser tested (Firefox, chorme and Edge) – LucR Dec 09 '20 at 13:27
  • 1
    Sounds like a rendering issue. Not a solution but for debugging, could you try to switch a `display:none` rule on such an image? Or some `filter:blur(0px)` or other rules that would force the browser to rerender the image completely. – Kaiido Dec 09 '20 at 13:36
  • Just added a filter:blur with a 3s ease to remove it. Give a nice effect but I still have the problem :( – LucR Dec 09 '20 at 13:51
  • 1
    ... weird. Could you host these files publicly so we can see them? Does the same happen if you load webp versions of these images? – Kaiido Dec 09 '20 at 14:04
  • Unfortunatly I can't yet. I don't have any hosting service for now, and the full website is pretty big, so I'll only host it once it's finished with a few other websites too (I'm following a training course). I'll try with webp format just to check, but i can't change the JSON file, so i can't convert the images, and i'm not supposed to use Node.js for this project(I also haven't studied it yet). Thanks guys anyway, If the problem persists once the site is online I'll relaunch the question I guess – LucR Dec 09 '20 at 14:20

0 Answers0