Highlighted

Trouble w/ Background Image Load Time

New Here ,
Dec 11, 2018

Copy link to clipboard

Copied

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

Views

204

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Trouble w/ Background Image Load Time

New Here ,
Dec 11, 2018

Copy link to clipboard

Copied

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

Views

205

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 11, 2018 0
Adobe Community Professional ,
Dec 11, 2018

Copy link to clipboard

Copied

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 O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2018 1
Adobe Community Professional ,
Dec 11, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2018 1