Image Size Issue

[sredhead]

Firstly I have a website template with many images. I use Storyblocks for images, so decide to replace the template images with my own.

One of the image sizes is 1920 X 850. Using photoshop I cut this size of my images to match the template image sizes and saved the images as .jpg set at ‘Low’ using Save For Web; the images I used came to 102 to 201 Kb. These same images I also used in a different part of a modified template but resizing them from 1920 X 850 to 500 X 333 images and saved using ‘Low’ using Save For Web, the resulting size was 10 to 25K.

I tried to use some online sites to reduce the Photoshop ‘save for web’ (set Low) images but only reduced them to around 90 Kb for the 102 Kb images - which I feel is still too high.

My questions I need help with are:
a) as there are 66 of the 1920 X 850 images on the site, how can I reduce these to a lower size. These images show up on different pages of the template and are resized differently for these pages automatically for the different pages by the Bootstrap code (which is beyond my ability to figure out). I could reduce the size of the 500 X 333 images - as I mentioned - for the pages I made myself to 10 to 25K - but can’t figure out how to reduce the size of the 1920 X 850 images for the template pages due to the resize code that was used by the template?

b) As there are about 150 images, 66 of which are in the 102 to 201 Kb size, will having all these images in one folder effect the speed of the site, will the site be speeded up if I put these large images in a separate folder?

With other sites that I made I was able to determine the size of the images, but with these Bootstrap pages that automatically modify the resize of the images for different pages, I am having difficult to get the images to the lower sizes I would like.

I would welcome any insight into this issue. Thank you

[ronpat]

@sredhead,

This sounds like an HTML/CSS problem using the bootstrap framework, so I have moved this post to the HTML/CSS category.

To help us evaluate your issue and answer your question, we will need to see the actual code being discussed. You can provide that easily by posting a URL to your test site.

If you choose to include the HTML and CSS in a post instead, be sure full URLs are applied to the stylesheets, scripts, images, and other requireds resources.

Make-believe screenshots or drawings can be helpful to show how you expect the page to look/behave.

Thank you.

[sredhead]

I appreciate the reply ‘ronpat’, thank you for posting the question where it should be on the forum.

I haven’t loaded the site to the server yet, perhaps it will be better when I have done so, as it is really large, to be truthful I have little idea which of the ccs and Bootstrap files are governing the images and their size manipulation on different pages. I am used to adding images and using the lowest size possible; but there are images in the template and I just added my images at the same size, which I think is excessive.

The only issue I am thinking about first before loading to the server is whether all the images are in one file or in separate files will improve the site loading time?

[Gandalf]

When you have your site on the web, you’ll be able to run it through various online scanners to check your site. gtmetrix is particularly good at telling you what issues there may be.

[sredhead]

I appreciate the reply, and the introduction to gtmetrix - thank you.