10 Replies Latest reply on Jul 2, 2014 4:48 PM by Jaykobe

    How Can Make a Large Background Image For A Website (reduced file size)?

    Jaykobe

      Hi, I want to edit a large photo so that it fits the width of the browser (I'm using a responsive layout). The image needs to be a small file size so that it loads quick enough.... My question is are their any tricks or adjustments within Photoshop where I can reduce the file size of an image whilst maintaing large image size. I heard that adding noise can reduce the file size or something? Is there any other effects that do this?

       

      Thanks in advance!!!

        • 1. Re: How Can Make a Large Background Image For A Website (reduced file size)?
          JJMack Most Valuable Participant

          Jaykobe wrote:

           

          Hi, I want to edit a large photo so that it fits the width of the browser (I'm using a responsive layout). The image needs to be a small file size so that it loads quick enough....

          These days with high speed broadband Internet connections images file size is not much of a problem.  Even mobile devices can load image quickly using broadband or high speed phone data services. However the number of pixels you have for a high resolution photo will not fit within a web page for they are designed to fit within a display pixel width. Images need to be resize using interpolation to reduce the number of pixel you have for an image so it will fit within the number of pixels a display supports.  This will also reduce its file size. I have no idea what you mean  when you write "I'm using a responsive layout".   With the emergence of small mobile devices it has become necessary design alternative web pages to support these devices smaller display sizes.  With high resolution mobile displays image resized for larger displays way work well however you need to use larger text designed for high resolution displays.  High resolution displays need web pages that have text sized to be readable on high resolution displays. There are many Laptops and Tablets with large high resolution displays also these days.

          • 2. Re: How Can Make a Large Background Image For A Website (reduced file size)?
            Trevor.Dennis Adobe Community Professional

            JJMack wrote:

             


            These days with high speed broadband Internet connections images file size is not much of a problem.


             

            OK.  Make me depressed why don't you.     I have had Photoshop and the high priority Windows updates coming in for >four hours here, and neither one has reached the half way point yet.  I'm thinking of becoming nocturnal to make best use of limited bandwidth.

            • 3. Re: How Can Make a Large Background Image For A Website (reduced file size)?
              Mylenium Most Valuable Participant

              These days with high speed broadband Internet connections images file size is not much of a problem.  Even mobile devices can load image quickly using broadband or high speed phone data services.

               

              You would talk differently if you were stuck with a 1.5 MBit DSL or lived in an area where mobile Internet means GPRS/ EDGE. in teh latter case even using this forum with al lits bloated JavaScript under the hood is a pain. So no, it still does matter. As for the OP's question - there is no magic formula to reduce file size. It all depends on the actual content in the image. If a highly detailed image is compressed it will always be larger than a smooth background. That's just the way it is and all tricks liek adding noise or blur can't defeat the math of most compression algorithms. If you can provide the image, we may be able to advise, otehrwise you will just have to experiment with different settings. For many web uses there would e.g. be no problem to actually use a smaller image and scale it up...

               

              Mylenium

              1 person found this helpful
              • 4. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                Jaykobe Level 1

                Great advice thank you Mylenium.... I agree that creating web pages that load fast/ish for EVERYONE is the best practice, and so does Google last time I checked! I will do what you say and probably use images with less colour tones/details and reduce the dpi. Maybe I could send you a link to the images once they have been made and you could help me then? Thanks Again....

                • 5. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                  JJMack Most Valuable Participant

                  If I were stuck in an area that only had low speed Internet connections I would not use the web as much as I do.  I did not say not to create web pages that load quickly or create small image files for the web.  All I stated  was there are more complex issues you need to deal with these days due the high resolution displays and small format Mobile web devices. Image file size is realy not a problem when you resize an image to fit on a web page it file size will be greatly reduced and not be a big problem.

                   

                  To compare a web page to a Windows Update or a 1GB Photoshop application download is ridiculous nonsense.

                   

                  IMO only if your target audience are remote locations with limited Internet connections is when you need to worry about web page transfer times,  You will be using simple text pages without dynamic thrills and fancy javastuff.  You will not be streaming video or usinf high quality images.

                  • 6. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                    D Fosse Adobe Community Professional & MVP

                    Trevor Dennis wrote:

                     

                    OK.  Make me depressed why don't you.

                    Yeah, me too. Internet providers still haven't caught on to the fact that some people actually live outside the cities <Weirdos. What are they even doing all day out there?>

                     

                    I'm getting a little fed up with this idea that we're all so wonderfully wired in at the speed of light 24/7. Well, we're not. The speed of my internet connection is best measured in geological time.

                     

                     

                    JJMack wrote:

                     

                    If I were stuck in an area that only had low speed Internet connections I would not use the web as much as I do.

                     

                    Where do you get this stuff...?   About the only thing I do strictly for fun on the internet is this and a couple of other forums. Other than that it's strictly business and I really don't have a choice in the matter. So there I sit, patiently waiting, counting 0, 1, 1, 0, 0, 1, 1, 1....

                    • 7. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                      JJMack Most Valuable Participant

                      twenty_one wrote:

                      JJMack wrote:

                       

                      If I were stuck in an area that only had low speed Internet connections I would not use the web as much as I do.

                       

                      Where do you get this stuff...?   About the only thing I do strictly for fun on the internet is this and a couple of other forums. Other than that it's strictly business and I really don't have a choice in the matter. So there I sit, patiently waiting, counting 0, 1, 1, 0, 0, 1, 1, 1....

                      You making my point if all you have is slow Internet connection you use the web less. You only use it when you have a real need.  You do not use it for fun or streaming video you live with the reality of what you have and use it accordingly.

                       

                      In 2003 I took a long vacation to New Zealand and Oz land.  I carried my ThinkPad with its 15" IPS 1600x1200 px Display for Photoshop and storing my images. I also use for connecting to the Internet via modem for E-mail and banking not for fun.  These days you can carry a iPod in you shirt pocket and gab a cup of coffee at a local Starbucks a use a high speed wireless in access point they provide for their customers for free.  High speed in becomming the norm in all but rual areas.

                      • 8. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                        D Fosse Adobe Community Professional & MVP

                        Well, when you put it like that I can go along with it...

                        • 9. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                          JJMack Most Valuable Participant

                          Trevor

                           

                          Your profile state:

                           

                          "Full Creative Cloud subscription. I use them all apart from the Web related apps. System: i7 3930K, Z79-UD5, 32Gb RAM, GTX570, 14Tb over 12 drives (two raid 0 arrays), Coolermaster Storm Trooper full tower. MSI GT70 3630QM, GTX680M, 16Gb RAM, Dual 128Gb SSD in raid0, 1TB HDD, Windows 8.1 Photography: I work as a commercial photographer, but only when the jobs interest me. Kit: All Canon 1DsMk3, 1DMK4, XF300, G1X. I have a comprehensive collection of lighting equipment from Bowens studio lights with Travel Pack, and am moving towards large LED panels for video and green screen. My strange avatar picture was taken as part of a Photography weekend challenge, this one being a 'Faceless Portrait'. I won the challenge :-)"

                           

                          In 2014  I'll bet you have option down there on the North Island cities like Auckland and Wellington and on the South Island Christ Church will have high speed internet connection available get with the program man...Your only young once.... Time the leave the sheep...

                          • 10. Re: How Can Make a Large Background Image For A Website (reduced file size)?
                            Jaykobe Level 1

                            Hey mate…. Finally managed to get a few shots together… I have uploaded one of them to this home page banner on this site: https://www.detoxteaaus.com.au

                             

                            Can you please tell me if this loads fast enough? Also, if I were to omptimise the image, what would be the best way?

                             

                            Many thanks in advance!