how do you quickly load images in a gallery?

[aswestos]

I am trying to make an image gallery (you can view it here) and a lot of my drawings are an insane size and i don't want to sacrifice the quality of my images and while i admit, some of them are huge, but i wish to have the images load faster. I have already compressed the png's but i still feel like it could load faster. am I going insane? how could i do better? I am a beginner in web development. all criticism is constructive. I am welcoming anything you feel can make my gallery better.

[ThunderPerfectWitchcraft]

Either use thumbnails with a reduced size and load the full sized image only on expansion, or consider changing the format to webp (which should be smaller without noticeable quality loss).

[rolypolyphonic]

I noticed some of your images are 2700+ px wide; that's pretty big for web viewing. I would suggest shrinking them down (For comics or anything with text, I would consider 900px to be the smallest advisable size; but I would say around 700-1200px is a good width for online viewing).

A lot of people don't like WEBP, but I find that it really shrinks down on file size a lot without compressing the images or getting rid of transparency if any. I use BIRME to bulk-resize and convert images to WEBP.

Alternatively, you could also convert your images to JPEG. Depending on what software you use, there are options to convert to JPEG without those typical JPEG artifacts/'pixellisation' usually associated with the format.

[aswestos]

Alternatively, you could also convert your images to JPEG. Depending on what software you use, there are options to convert to JPEG without those typical JPEG artifacts/'pixellisation' usually associated with the format.

Because this seems to be the easiest thing to do at 2 am after waking up in the middle of the night and remembering i want to improve my load speeds before i forgot again, i would say not to horrible of results. i timed it to be roughly 20 seconds for the full gallery. i'll try out the web, something files here when i fully wake up.

I just use photoshop so im very familiar with the vanilla file types

[Dan Q]

I am trying to make an image gallery (you can view it here) and a lot of my drawings are an insane size and i don't want to sacrifice the quality of my images and while i admit, some of them are huge, but i wish to have the images load faster. I have already compressed the png's but i still feel like it could load faster. am I going insane? how could i do better? I am a beginner in web development. all criticism is constructive. I am welcoming anything you feel can make my gallery better.

As I think others have said: the single biggest problem is you're using the full-size images both for "displaying the full size image", and for "displaying a thumbnail".

Here's what I'd change:

1. In the "column" of images, don't use the full size images. Make (much) smaller resized thumbnails (lower resolution, higher compression) of each, and use those.
2. Keep the URL of the "full" version of each image somewhere accessible: I'd add it into a data-attribute of each <img>, e.g. <img src="/pictures/ahwell-thumbnail.jpg" data-full-src="/pictures/ahwell.jpg" alt="Ah! Well. Go to Hell." onclick="myFunction(this);">, where ahwell-thumbnail.jpg is the tiny, fast-loading version!
3. Update your JS code so that it uses the data- attribute instead of the src when loading the expandedImg. I.e. instead of expandImg.src = imgs.src;, something like expandImg.src = imgs.dataset.fullSrc;.

I've knocked up an example in a CodePen for you. I didn't want to make thumbnails of your actual images, so I've used placeholder images for now, but you'll hopefully make sense.

[aswestos]

I've knocked up an example in a CodePen for you. I didn't want to make thumbnails of your actual images, so I've used placeholder images for now, but you'll hopefully make sense.

omg Dan,  thank you so much, i'm a beginner with js, i can read it but i really don't know how to implement it well. i just started summer this year.
I like this code pen site as well. it really makes it easy to work on things rather than pinging it through the worldwideweb and clearing cache and... (who would of thought theres good resources for this stuff![ ]) i'll def start using it! especially for practice.