I have this page background, made from many different squares, some of them has a bit of shade as well (pls. see attached pic.)
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 âŚ
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:
You could use some small squares and have them repeat in random order infinitely.
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.
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 âŚ
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.
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:
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
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.
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.
âŚ