Trouble w/ Background Image Load Time

[User 12046748]

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, dox

[Nathan Minier]

The biggest performance hit on the page is actually that house in the header; use GIMP or another product to change that to a PNG and re-size it to the target size (it's almost 700KB!). I would suggest wrapping your jumbotron in a div, determining a set height for that div, set you BG as the BG to that Div rather than the jumbotron, and trimming your image down to size (and convert to PNG). If you want to be mobile-friendly, you'll also want to exclude those pictures from mobile downloads (which you can do with bootstrap!). I would also suggest re-ordering the menu so it collapses into a hamburger on small screens.

"Never attribute to malice that which can be explained by stupidity." - Hanlon's Razor