Make ultra light server & visitor friendly pages, with heavy graphics: HTML Tutorial

Discussion in 'HTML & Website Design' started by SkyDesign, Aug 12, 2007.

  1. #1
    Hi

    I was thinking about helping out the community, after seeing how people make beautyful but heavy sites.
    I decided to give few tips for those people. Now if you get 100k visitors daily your servers run hot
    and cost money to keep up. Now if you don\'t want to make your site look ugly and you want to run it fast
    same time as good looking, you need to optimize it, this takes time but is well worth it. One of my sites
    that is graphically heavy cost me 3500$/month, now after optimize it\'s 430$/month - WOW - it looks JUST
    THE SAME IF NOT BETTER!

    Now you start from Photoshop and when you slice your table, make many slices so if you have a graphical
    border with 10 vertical lines with different color, don\'t make it one slice - make it 10. So when you
    fire up your dreamweaver you can use bgcolors and not images to show the same result, also if you need
    to have image on that spot, just make one pixelbox image with that color and place it on the spot, remember
    to put in the height and width atributes. Also if you have same images on the page, just use one image on
    all the spots. After sliceing just optimize it to the lowest when you save the slices to web and after that,
    make a new optimize for it and this time make it higher in quality. Now build the page and after that, you
    will find that some color intensive parts of your site look ugly and cheap cause they are too optimized, now
    just replace that image with better quality one, but don\'t touch the rest. With these methods my site looks
    cleaner and costs ALOT Less. There is more to it than that, but i will show it to you when i create a video
    about this and put it on youtube. Until then, practice. I hope you find this mini tutorial useful!
     
    SkyDesign, Aug 12, 2007 IP
  2. websys

    websys Active Member

    Messages:
    841
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    78
    #2
    3500 USD for web hosting per month ? what's the url of the site ?
     
    websys, Aug 12, 2007 IP
  3. sogastic

    sogastic Peon

    Messages:
    202
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Im not sure that I have seen anybody who makes one colored area to image. And if your lucky you'll find 3-5 places what are one colored. That doesn't actually help much. Cache helps.
     
    sogastic, Aug 12, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Image optimization techniques, image recombination techniques, NOT using images for visual elements that don't need images, code reductions, etc can indeed reduce operating costs greatly - in some cases as much as 80%.

    There are a LOT of big fat bloated pages sliced up from .psd's with no actual thought to the elements involved - even more fat bloated pages of 70 or more files that could be done just as easily with 30 files, relying on unnecessary javascripts for stuff CSS can do, extra wrapping DIV's and SPAN's around elements that need neither, inlining of presentation and all around use of coding techniques that have more of 1997 about them than 2007.

    Of course, the moment you say 'slice your table' I'm thinking /FAIL/ at intarweb... But then I still say you code your content first, then figure out how to tile in the elements as backgrounds of your existing markup.

    Using Dreamweaver/Fireworks/Photoshop = /FAIL/ hard - especially given what CRAP photoshop is at making optimized images.

    Do you have an example page up anywhere of your 'optimizations' - I'd be willing to bet I could give you an even smaller page with more practical optimizations.
     
    deathshadow, Aug 12, 2007 IP