Trouble w/ Background Image Load Time

[markf26988182]

So...

My local area of NA's website is complete & launched (w/ the help of some folks here...thanx).

1) My original background image was 1950 X 1460 & about 1.2MB...it loaded slow...& because of the bootstrap template I used, you can only see the very top of it.

2) I figured I could reduce file size & accomplish the same thing graphically by cropping the size to just the top.  When I did that...something in the code relative to it's position or display caused it to increase in size on the home page, showing only a small percentage of that cropped image (& ruining the look of it).  And...even that smaller image loaded slow.

3) So...not knowing how to alter the code relative to the display of that more narrow image, I decide to use the original size image & optimize it for the web, which decreased it's file size down to 205 KB.  BUT...that image still loads slow!

So I'm hoping someone can look at my home page code & tell me what is wrong...why the smaller images still load slow; & why the narrow image (which was reduced in height from 1460 down to 375) appeared larger.  I'm not sure if my problem is a code problem or an image file size problem.

http://www.burlingtoncountyna.org/

thanx,

mark4man

btw...site constructed in DW CC 2018

[Nancy OShea]

Are you talking about this background image in your Jumbotron?

http://www.burlingtoncountyna.org/SAM_5626-II.jpg

File size is 204 KB

1,950px × 1,463px

The CSS background-size: cover property will upscale your background to fill available viewport.

[Nancy OShea]

IMO, this image also needs work.

http://www.burlingtoncountyna.org/John-Woolman-House-II.gif

697.79 KB (714,539 bytes)

1,200px × 927px

GIF is not the best file type for photos.  Especially since you can make rounded corners with CSS.  Also the house perspective is off or it's a crooked house.   Either way, Photoshop's Perspective Warp could help straighten it.

Photoshop CC Tutorial: How to Use Perspective Warp! - YouTube