Image size

hi i have added 20 images to my gallery and this has caused my page to be very slow in loading up.
Now i checked the sizes of the pictures and its been 4000x2300 as minimum size then 6000x4000 as the max. this also made the images crystal clear on my page when it loads up. however the slow loading made me edit the sizes of the images down to 400x300. now this took away my picture quality and its blur. may i know how to get the crystal clear images. Please i still have the original copied elsewhere. thanks for reading

What size do you display the images on your website - ie, what is the specified width and height?

i displayed them with max-width:100%, because i used dreamweavers template

Well, I don’t image many people have a 6000px, or even 4000px wide monitor :slight_smile: so, I don’t know what max size monitor you want to cater for, but if you went for, say 1800px, and resized you images to a maximum width of 1800px, that might (just might) be a reasonable compromise.

You have gone from the sublime (4000/6000px) to the ridiculous (400px). :smile:

right i think the images are direct from a camera thats why they are that big in size. do you suggest i take it back high

Make them no bigger than they are ever likely to appear on the page.
If they were in a container that has max-width: 1000px then make them 1000px wide.
If they are full browser width, consider what would be the largest you want to cater for.
Also consider the most effective amount/type of compression for the image.

It’s basically a compromise. More px means more KB or MB, so longer load times, so it’s really a case of finding what works for you (or more importantly, your intended audience). What I’m suggesting is progressively make the images smaller to see what works.

As you’re pics are coming from a camera I assume they are jpegs. You also have the option to reduce the quality of the image so they are smaller (in KB terms) but less clear.

Another way to reduce load times would be to reduce the number of images.

yes you right gandalf458 but taken them down gave me blur images on the page. now i have edited them to 50% of their original size using microsoft picture manager, and the quality is better, however the loading time has also been a bit poor.
Edit:
Just to inform you i am working on a gallery page thats why the images are many. i intended to have the images fill up the designated space, i dint want to click on any them open it in a larger form externally. hope this will help

2000 - 3000 is still kind of big for the web, especially if you have 20 on one page.
Maybe re-think how you deliver the gallery images. Like, just show thumbnails, then show the hi-res on demand, one at a time.

2 Likes

As @SamA74 says, the photos are still rather large. I don’t know MS Picture Manager, but you could try using https://tinypng.com to see if you can reduce the MB size. Despite the name, it works for jpegs as well as pngs, although I’ve not tried it for jpegs but it has significantly reduced the file size for many of my png files.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.