0

I am building a web page and its is a product customizer. So I need many images. On average if I compress the photo of each combination it is going to be 100kb. They are JPG. Any more compression and artifact starts popping up.

1500 total combinations (got that from Rule of Product) * 100kb = 150Mb for a single page.

Not sure if this metric is true or not, but I heard Entire websites on average are 150Mb. I have a Single page that has 150Mb worth of photos.

Only one photo is going to be displayed at a time. The rest are display:none; Although I read that even on display:none images still take up bandwidth.

I still have to consider Javascript logic I have to put through. Will this hurt performance? Every time a person changes a radio button, it has to loop through all the images. finding the the correct image with an alt tag that contain the values of each radio button input.

  1. Event Listener for onChange of radio button
  2. Then looping through all the photos, where the alt tag of that images contains the values of the radio button, thus showing the correct image.

Any advice is appreciated.

Đăng Khoa Đinh
  • 5,038
  • 3
  • 15
  • 33
CodingBrah
  • 59
  • 8
  • There are lots of questions and answers on StackOverflow about lazy loading. At any rate this is a shameless plug for SimplyLazy. I wrote a simple tool to handle this type of situation very easily and it's super lightweight (600 bytes, yes bytes): https://github.com/maxshuty/simply-lazy – maxshuty Jun 20 '21 at 00:17
  • 1
    Dare I say you have a design problem? What page design(s) could you use to not automatically load 1500 images if you scroll to the bottom of the page? – traktor Jun 20 '21 at 01:53
  • @traktor All images are in the same position, just 1 out of 1500 image is being displayed at a time. So I can't do any scrolling to load logic – CodingBrah Jun 20 '21 at 17:16
  • Okay, the link for "This question already has answers here" is incorrect. Instead of trying to pre load all the images, either set up a single `` element in the page of which you dynamically change the `src` attribute to change image on display, or create a `new Image()` element that you use to replace the existing image on display in the DOM. See [this answer](https://stackoverflow.com/q/9815762/5217142) for error handling. – traktor Jun 20 '21 at 23:18
  • @traktor Thanks, I am trying to optimize for SEO as well. I am assuming dynamically switching image src attribute will hurt SEO.Need to limit all those images from loading, showing only one at a time based on options selected and have SEO. Want these images to appear on Google Images. – CodingBrah Sep 28 '21 at 19:38

0 Answers0