Jump to content
Stef's Coding Community

Optimizing large background graphics


Recommended Posts

With every site I create, I want it more challenging than the last. This is my first site with a lot of graphics and textures. I'm struggling with speeding up the load time. I’m playing with the code, css, and graphics. I’ve been able to reduce a lot of the graphics without losing image quality. The biggest issue is that I use a lot of pngs with shadows, and I’m having trouble with keeping them smooth during optimization. The main one is my wrapper bg graphic. The original was a png, but I changed it to a gif. I was able to significantly reduce it, but the shadow is horrible. I played with the dithering, but can’t get it to look real. The graphic has the burlap and leather texture. I’ve thought about creating a wrapper 1 and wrapper 2, so I can split the two. Any suggestions would be helpful.

 

Thanks

 

 

Site:

musta ngsandmotorsports.c om/arjays/index.htm

 

CSS Code Below

 

 

----------------------------------------------------------------

 

#wrapper{

width:1000px;

height:1410px;

/* Center the wrapper */

margin: 0 auto;

background-image:url(http://www.mustangsandmotorsports.com/arjays/images/body/wrapper-bg3.gif);

background-repeat:no-repeat;

}

 

 

body {

background-image:url(http://www.mustangsandmotorsports.com/arjays/images/body/wood-plank-drk.gif);

background-position:center top;

}

 

#branding img {

display:block;

position:absolute;

margin-left:505px;

margin-top:0px;

}

 

/*---------------------------------------Content Area--------------------------------*/

 

#para1 {

display:block;

position:absolute;

width:1000px;

height:430px;

margin-top:255px;

}

 

#para1 h1{

padding-top:100px;

padding-left:80px;

 

}

 

#para1 p{

padding-top:16px;

padding-left:145px;

padding-right:58px;

}

 

#para1 h2{

padding-top:10px;

padding-left:145px;

}

 

#para1 img{

display:block;

position:absolute;

margin-top:30px;

margin-left:90px;

}

 

#blogfeed {

display:block;

position:absolute;

width:760px;

height:430px;

margin-top:575px;

}

 

#para2 p{

padding-top:8px;

padding-left:145px;

padding-right:58px;

}

 

#para2 h2{

padding-top:30px;

padding-left:145px;

}

 

/*---------------------------------------RSS DISPLAY FEEDS--------------------------------*/

 

.rsscontainer{

margin-bottom: 5px;

}

 

.rsscontainer .rsstitle{ /*Style for .rsstitle DIV*/

font-weight: normal;

}

 

.rsscontainer .rssdate{ /*Style for .rssdate DIV*/

font-color: c3c1c1;

font-size: 90%;

}

 

.rsspaginate{ /*Style for Pagination DIV*/

width: 250px;

text-align: left;

padding: 2px 0;

margin: 10px 0;

}

 

.rsspaginate form{ /*Style for Pagination DIV's form element*/

margin: 0;

}

 

.rsspaginate .paginateselect{ /*Style for Pagination DIV's drop down menu*/

border: 1px solid navy;

margin: 0 10px;

}

 

.rsspaginate a{ /*Pagination links*/

padding: 0 5px;

text-decoration: none;

border: 1px solid black;

color: navy;

background-color: white;

}

 

 

.rsspaginate a:hover, .rsspaginate a.selected{

color: #000;

background-color: #FEE496;

}

 

/*---------------------------------------RSS DISPLAY CONTAINER STYLE--------------------------------*/

 

#bbcid{

width: 582px;

height:100px;

margin-left: 150px;

padding-right: 0px;

font-size:12pt;

}

 

#bbcid a:link {

color:#cccc99;

font-family: Georgia, serif;

font-weight:normal;

font-style: italic;

font-size:16px;

}

 

#bbcid a:visited {

color:#cccc99;

font-family: Georgia, serif;

font-weight:normal;

font-style: italic;

font-size:16px;

}

 

#bbcid a:hover {

color:#000;

font-family: Georgia, serif;

font-weight:normal;

font-style: italic;

font-size:16px;

}

 

#bbcid-paginatediv{ /*Style for auto generated pagination DIV pertaining to #bbcid RSS box*/

width: 300px;

}

 

/*------------------------------------Main Navigation----------------------------- */

 

#main_nav {

list-style: none;

margin: 0;

padding: 0;

position:absolute;

height:300px;

width:570px;

margin-top:180px;

margin-left:428px;

background-image:url(http://www.mustangsandmotorsports.com/arjays/images/body/menu-chalk.png);

background-repeat:no-repeat;

}

 

#main_nav ul{list-style: none;

}

 

#main_nav a {

outline: none;

}

 

#main_nav:hover li a { background-position: 0 0px; }

 

 

/* ACCESSIBLE ROLL OVERS */

#main_nav li { float: left; }

#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 178px; }

 

#home { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays-homepage1.png'>http://www.mustangsandmotorsports.com/arjays/images/menu/arjays-homepage1.png); width: 112px; }

#home:hover { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays-homepage2.png) 0 0 !important; }

#home.active { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays-homepage1.png) 0 -50px; }

 

#about { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/about_arjays1.png'>http://www.mustangsandmotorsports.com/arjays/images/menu/about_arjays1.png); width: 99px; }

#about:hover { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/about_arjays2.png) 0 0 !important; }

/*#about.active { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/about_arjays1.png) 0 -50px; }*/

 

#crew { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_services1.png'>http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_services1.png); width: 114px; }

#crew:hover { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_services2.png) 0 0 !important; }

/*#crew:active { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_services1.png) 0 -50; }*/

 

#services { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_work1.png'>http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_work1.png); width: 111px; }

#services:hover { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_work2.png) 0 0 !important; }

/*#services.active { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/arjays_work1.png) 0 -50px; }*/

 

#customers { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/contact_arjays1.png'>http://www.mustangsandmotorsports.com/arjays/images/menu/contact_arjays1.png); width: 110px; }

#customers:hover { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/contact_arjays2.png) 0 0 !important; }

/*#customers.active { background: url(http://www.mustangsandmotorsports.com/arjays/images/menu/contact_arjays1.png) 0 -50px; }*/

 

 

/*---------------------------Right Side Navigation For Patches-----------------------*/

 

a.promo_rollover {

display: block;

position:absolute;

margin-top:560px;

margin-left:765px;

width: 221px;

height: 189px;

text-decoration: none;

background: url("http://www.mustangsandmotorsports.com/arjays/images/menu/arjays-promo.png");

}

 

a.promo_rollover:hover {

background-position: -227px 0;

}

 

a.blog_rollover {

display: block;

position:absolute;

z-index:1;

margin-top:720px;

margin-left:801px;

width: 184px;

height: 161px;

text-decoration: none;

background: url("http://www.mustangsandmotorsports.com/arjays/images/menu/arjays-blog.png");

}

 

a.blog_rollover:hover {

background-position: -218px 0;

}

 

.displace {

position: absolute;

left: -5000px; }

 

#scissors img{

display:block;

position:absolute;

margin-left:605px;

margin-top:619px;

z-index:1;

}

 

/*-----------------------------------Slider Area----------------------------------*/

 

.jflow-content-slider{

display:block;

position:absolute;

margin-left:25px;

margin-top:680px;

z-index:1;

}

 

#jFlowSlide{ background-image:url(http://www.mustangsandmotorsports.com/arjays/images/slider/slider-bg.png); font-family: 'Trebuchet MS', Helvetica, sans-serif;; font-weight:bold; font-size:13pt; line-height:23px;}

#myController { display:block; position:absolute; margin-top:-25px; margin-left:217px; font-family: Georgia, serif; font-size:14px; padding:2px 0; width:400px;}

#myController span.jFlowSelected { background:#663300;margin-right:0px; }

 

.slide-wrapper { padding: 0px; }

.slide-thumbnail { width:686px;}

.slide-thumbnail img {display:block; position:absolute; max-width:686px;}

.slide-details { display:block; position:absolute; font-style: italic; color:#cccc99;font-family: Georgia, serif; font-weight:normal;

font-size:16px; width:480px; margin-top: 335px; margin-left:160px;}

.slide-details h2 { font-family: Georgia, serif;color:#333300;font-size:22px;text-align:center;font-style: italic; font-weight:normal; line-height: 1; margin:0; }

.slide-details .description { display:block; margin-top:2px; }

 

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:10px; padding-right:5px; padding-top:2px; padding-bottom:2px; }

.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #; }

 

/*----------------------------------Footer Area---------------------------------*/

 

#footer {

display:block;

position:absolute;

width:1000px;

height:252px;

margin-top:1160px;

background-image:url(http://www.mustangsandmotorsports.com/arjays/images/body/ruler-tacks.png);

background-repeat: no-repeat;

background-position: 19px 0px;

}

 

#footer p{

padding-top:170px;

}

Link to post
Share on other sites

I think you've done about everything you can with this. Splitting the main background into two images is probably the best you can do. With a design that is nearly all image based, there isn't really that much you can do.

 

I would just make this a learning experience, and remember for next time that you need to design the site in such a way that it doesn't require huge numbers of detailed images (or that the images that you can use can repeat in some way, so you can use a small image to cover a large area.)

 

If this is an issue with the client (forcing the user to download nearly 2.5 MB of images seems completely unnecessary -- it will result in slow loading times for anyone who visits the site for the first time, especially if they have a slower connection) you may have to consider simplifying the design and reducing some of the elements to cut down on the number/size of the images you use. I can understand having a website that is image-heavy for a site that involves graphics/art/movies/a portfolio/etc, but not for an upholstery site, where the focus really should be on making it easy for the user to navigate and find what they need quickly.

Link to post
Share on other sites

Thanks for your input. I figured as much too. I could not figure out what to reduce without loosing some the graphics. My client really likes the site layout. I'll try to play with it some more, before creating the other pages. Just out curiosity what connection speed do you have, and how long did it take for you?

 

Thanks

Link to post
Share on other sites

When I first went to the page it took about 3-4 seconds. Download time can vary depending on the a few varibles such as server, network, peak/non-peak time of days, etc.

 

The slide show ought to be contained within that greenish background when it slides. Right now it's coming from the far left. Position it correctly and you can then chop of a couple hundred pixels of transparency from your png images.

Link to post
Share on other sites

Hi Sarina28

I am sitting in South Africa where we have relativly slow internet speeds and I got to say, that page took an absolute age to load. Once it is loaded, it is very pleasing to the eye, although I am not sure under normal circumstances I would have waited to see.

 

Looking at your picures I would think it is possible to slim it down without loosing to much of the feel you have created.

 

The first thing I would do is find or make a repeating wood tile of about 200 x 200 pixcels. Currently yours is 1500px high.

 

Then I would divide the sack and leather background into three parts. The top which could hold the header and menu.

The middle I would addapt so it can be repeated on the y axis. Then the bottom can hold your footer and show the tappering bottom of the image and ruler. This would allow the site to extend vertically as required. Presently you have a single very large background image for this part which means you are confined to a very specific size page and it takes ages to load.

 

If you took this approach, the scissors, punch and other odds and ends could still be placed using relative placement and a combination of z-index and negative margins.

Link to post
Share on other sites
  • 2 years later...

ha ha, thanks. He loves it too but dont worry, I know my place

 

I have been trying to figure out photoshop myself but ive not used it before and im sure im doing everything the long-way round

Managed to cut out the current background so far so just got to decide what to use as a new one and then work out how to put it in

 

Im thinking; race track/forest/sunset/beach/lake backdrop...??

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...