SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Background with many different color squares, how would you code?

    Hello Sitepointers

    I have this page background, made from many different squares, some of them has a bit of shade as well (pls. see attached pic.)

    delete00.jpg

    How would you code your page with this Bg? Background is quite big 1400pxx850px, if i will make as a 1pic it will weight about 1.5mb, or shall i crop squares separately and use CSS3 to create BG, the only problem with that would be - some of the squares are a bit darker than the others ...
    I am lost now, not sure what would be the best desision.
    What would you do guys ? maybe you got better solutions than theese two ...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There's no need for that bg image being 1.5 mb. Make sure to use the Save for Web tool in Photoshop to save it at an appropriate size. But this might also be a nice opportunity to try out the 'cicada' method mentioned by Alex Walker here:

    http://designfestival.com/the-cicada...web-designers/

    You could use some small squares and have them repeat in random order infinitely.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by MrPaulius View Post
    Hello Sitepointers

    How would you code your page with this Bg? Background is quite big 1400pxx850px, if i will make as a 1pic it will weight about 1.5mb,
    1.5mb !! It should be about 100 times smaller at 15k. Even most full page images can be optimised down to 150k (ten times smaller file size than yours) and even then I would dislike using something as big as 150k. Large files are still the enemy of a good website and you should always seek to keep files as small as humanly possible.

    The "cicada" approach Ralph suggests is a good way to tile a background and make patterns that appear to never repeat but you do have to construct the image carefully.

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cicada principle - the technique used there is amazing, and surely will be very useful in the future.

    As for the file size, I have just realized that I chose max quality in PS, that's why file size was enormous, decreased it to medium it looks good and only weights 118K.
    Probably to use such big file is not the best idea, but in this case i think this is the best option (i might be very wrong, just starting ), because one file weights 118K, if i would use separate smaller squares - there should be about 6 squares, each ~23K. Works out same.

    I was trying to make BG using cicada principle, but couldn't figure out how to get it work for this BG ...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Is the image in post one the full image you are using as it doesn't match the size you mention? If you post the full image then maybe we can look at seeing how you could make it repeatable (I assume you are just repeating it over the whole background of the page). Or are you just using a fixed sized centred image? A little more information on what you want to achieve would be helpful

    With regards to image quality remember that if this image is the background on which your site will sit then 90% of it will be hidden by the site in front so you can always lower the quality a little more than you think.

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, I just uploaded fragment of it, thought there will be a cap for larger files. Here is the original img, i have saved this one on better quality:
    upload1.jpg

    It will be fixed size at the center now. Before, I was trying to cut in 6/7 separate color squares, and try to do like shown in Cicada principle, but couldn't work my head around how to do it so decided to use one img at center. And weight works out same.

    Any ideas how to do it in a better way would be very welcome

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by MrPaulius View Post
    It will be fixed size at the center now.
    If you are not repeating the image over the whole page and there is no section that you can repeat in that image then you may as well use the one image but don't be afraid to lessen the quality as your site is going to be on top. Try saving as a jpg at 80% and you probably won't notice the difference.

    I would be inclined to maybe create a smaller repeating matrix of colours and get nearer to the 15k I mentioned at the start but that would mean having repeats more obvious. The most important aspect of a site is how fast in loads - even these days.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I often will "view in browser" while saving for web and devices at varying degrees of quality to see what I can live with. Then you have 5 tabs open in the exact location on page and can get good obsessive perspective of any image quality loss or gain while switching between tabs.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •