2 Replies Latest reply on Jan 10, 2013 3:56 PM by Nancy OShea

    Some help with my background

    Fierus Level 1

      Hey all. I just started on dreamweaver and I'm having trouble with the background. I made it myself in another adobe program and saved it in jpg, tif and psd. The image is 4000 x 4000 px. DW doesn't like tif and doesn't accept it. Now, for the psd and jpegs, it takes them and makes them the background but it zooms in rediculously and bloats the image.



        • 1. Re: Some help with my background
          Jon Fritz II Adobe Community Professional & MVP

          Browsers have no ability to read a photoshop .psd file, you should only be using .jpg, .gif and .png for best cross-browser rendering.


          Also, 4000 x 4000 pixels is HUGE for a webpage. You really should never get more than 2000 pixels in either direction and even that is a very large image for online purposes. A background image over 200KB is too large. It would take almost 1 minute for that single file to download over a 56k modem.


          To Optimize your image in Photoshop, open the image and hit Ctrl + Shift + Alt (or command) + S to Save For Web.


          Click the 2-Up tab and take a look at the file size and speed of download for the image. You can click the bottom image in the 2-Up and move the Quality slider for higher or lower quality. That will affect the file size and load time. Choose the lowest quality setting that doesn't make your image degrade too far and click Save.


          EDIT: DW isn't zooming in at all, it is simply displaying the file at full size (without the reduction in size you are likely using in Photoshop). If you are using PS to view the entire image all at once, you are likely zoomed out several steps and are only viewing it at 16-25% actual size. My 23" monitor is only 1920 pixels wide and 1080 tall, a 4000 pixel image needs to be reduced to 22% or so in order to view the entire thing without scrolling in PS.

          • 2. Re: Some help with my background
            Nancy OShea Adobe Community Professional & MVP

            Use a small  image swatch or tile.  Use CSS to repeat it horizontally, vertically or both ways to fill the viewport.  This reduces file size, saves bandwidth, and reduces the amount of time it takes to load your page. 


            More on Background Images



            2-image web design




            Nancy O.