Jump to content


Photo

Optimizing large background graphics


  • Please log in to reply
7 replies to this topic

#1 sarina28

sarina28

    Member

  • Member
  • PipPipPip
  • 78 posts
  • LocationSan Diego

Posted 04 September 2010 - 01:25 PM

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.mustangsa...wrapper-bg3.gif);
background-repeat:no-repeat;
}


body {
background-image:url(http://www.mustangsa...d-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.mustangsa.../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.mustangsa...s-homepage1.png); width: 112px; }
#home:hover { background: url(http://www.mustangsa...s-homepage2.png) 0 0 !important; }
#home.active { background: url(http://www.mustangsa...s-homepage1.png) 0 -50px; }

#about { background: url(http://www.mustangsa...out_arjays1.png); width: 99px; }
#about:hover { background: url(http://www.mustangsa...out_arjays2.png) 0 0 !important; }
/*#about.active { background: url(http://www.mustangsa...out_arjays1.png) 0 -50px; }*/

#crew { background: url(http://www.mustangsa...s_services1.png); width: 114px; }
#crew:hover { background: url(http://www.mustangsa...s_services2.png) 0 0 !important; }
/*#crew:active { background: url(http://www.mustangsa...s_services1.png) 0 -50; }*/

#services { background: url(http://www.mustangsa...rjays_work1.png); width: 111px; }
#services:hover { background: url(http://www.mustangsa...rjays_work2.png) 0 0 !important; }
/*#services.active { background: url(http://www.mustangsa...rjays_work1.png) 0 -50px; }*/

#customers { background: url(http://www.mustangsa...act_arjays1.png); width: 110px; }
#customers:hover { background: url(http://www.mustangsa...act_arjays2.png) 0 0 !important; }
/*#customers.active { background: url(http://www.mustangsa...act_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.mustangsa...jays-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.mustangsa...rjays-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.mustangsa...r/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.mustangsa...ruler-tacks.png);
background-repeat: no-repeat;
background-position: 19px 0px;
}

#footer p{
padding-top:170px;
}
  • 0

#2 Ben

Ben

    Administrator

  • Administrators
  • 5,638 posts
  • LocationChico, CA

Posted 04 September 2010 - 01:50 PM

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.
  • 0
Benjamin Falk
Falken Creative : Twitter

#3 sarina28

sarina28

    Member

  • Member
  • PipPipPip
  • 78 posts
  • LocationSan Diego

Posted 04 September 2010 - 03:54 PM

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
  • 0

#4 Ben

Ben

    Administrator

  • Administrators
  • 5,638 posts
  • LocationChico, CA

Posted 04 September 2010 - 04:05 PM

It takes 6ish seconds for me, but I do have a 20-25 Mbps connection which is pretty fast.
  • 0
Benjamin Falk
Falken Creative : Twitter

#5 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,618 posts
  • LocationTexas

Posted 04 September 2010 - 04:13 PM

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.
  • 0

#6 Cara

Cara

    New member

  • New Members
  • 2 posts
  • LocationSouth Africa

Posted 04 September 2010 - 10:38 PM

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.
  • 0
At the end of the day, we are all just learning!

#7 sarina28

sarina28

    Member

  • Member
  • PipPipPip
  • 78 posts
  • LocationSan Diego

Posted 05 September 2010 - 12:46 AM

Cara,

I thought about dividing up the wrapper background. I'll experiment with that a bit. Tonight, I did manage to decrease my total image size from 2.6 megs to 19 megs with some optimization.
  • 0

#8 Paulvarly

Paulvarly

    New member

  • New Members
  • 1 posts

Posted 06 February 2013 - 06:56 AM

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...??
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users