6 Replies Latest reply on Apr 13, 2018 2:13 AM by D Fosse

    Made image at 72 dpi, comes out blurry on web?

    gagnonm1993

      Hey guys, so I wanted to customize my banner on linkedin to match my portfolio and stuff, so linkedin says "1536 X 768" so in illustrator I set up my document to be that amount of pixels at 72 dpi, as per usual, so I downloaded this free vector of a hot air balloon and did an image trace, and everything looked fine, clear and all, brought that into photoshop, did my coloring to things, went to save for web and had it at 72 dpi for web with the correct pixel size, when I go to preview it comes out really blurry, and when brought into linkedin its blurry and im really not sure where I went wrong because its 72 dpi, the correct pixel size yet here it is blurry, I have no idea where to go from here

       

      here it is clear in photoshop preview:

       

      Screen Shot 2017-03-14 at 7.49.35 PM.png

       

      here's how it comes out on the web:

       

      Screen Shot 2017-03-14 at 7.49.15 PM.png

      it looks a lot more blurry when previewed in web then on this picture in here, I am just not sure where im going wrong

        • 1. Re: Made image at 72 dpi, comes out blurry on web?
          JJMack Most Valuable Participant

          You web image is huge for a web page, Resolution is meanless on the web it is not use.  You image print resolution is set to 144 DPI not 72 and  the 2384px x1414px image would print 16.556" x 9.125" the image would not fit one most displays. 4K an 5K displays could display all the image pixels

          • 2. Re: Made image at 72 dpi, comes out blurry on web?
            D Fosse Adobe Community Professional & MVP

            The idea that ppi has any relevance on screen has to be the most persistent myth in the history of computing.

             

            Pixels per inch is a print parameter. On screen it doesn't matter, it can be anything at all, and they will all display at the same size.

             

            Your only concern is 1536 x 768 pixels.

            • 3. Re: Made image at 72 dpi, comes out blurry on web?
              gagnonm1993 Level 1

              okay so when I start a document to work on, wouldn't I just set it to 1536 X 768 pixels, with it set to 72 resolution? thats what I did and it came out blurry, I've mostly worked in print and have some weak points when it comes to web work, Linkedin recommend "1536 X 768" for the banner, to get a clear outcome, how would I set up the document?

              • 4. Re: Made image at 72 dpi, comes out blurry on web?
                JJMack Most Valuable Participant

                If the image is for the web all that is important is the number of pixels the image is compose of.  You can set the resolution to 1 or 1,000,00 or 72 or any other number. The numbers does not matter resolution is not use on display devices they display the images pixels with their size pixels. On high resolution the image will display smaller size then it displays on low resolution display. It make no difference if the display  is 15" or 60" all the matters is the size pixels the display is manufactured with

                • 5. Re: Made image at 72 dpi, comes out blurry on web?
                  stevenp51192477

                  I'm going to go out on a limb here, lol. Pardon the intrusion. I was taught, in the earlier part of this decade, that the internet is viewed at 72 dpi/ppi (That could have changed with tech advancing, upload/down load rates, servers/hardware, i'm guessing). To add to what JJMack said, there are a couple of things to consider. The first thing to consider is the "image size", may it be pixels or inches. Next you have to consider the "resolution", which is how many pixels per square inch within the image size.  You want to think of image size and resolution as two different things, which I am sure you know. It's really the use of dpi and ppi that people tend to mix up which has nothing to do with the image size. The image size could be 1080 x 720 pixels in size, but the resolution would define that space. Which that itself is also confusing. I think I said it right, I hope lol.

                   

                  With the pic above, there are a lot of factors that determine the quality when you up load it to the net. Really, the quality is determined when you save the file. When you save an image the format of that file, compression, and quality(depending on the file format jpg, png, etc..) is going to help determine how good an image looks.  Then you have to think of file size. If there is a file size requirement and you have over the specified amount, you lose a little quality when you cut down the size of the file or if you go from 16 bits to an 8 bit file( I think). I think it compensates with anti aliasing and other things. Now that I think about it, and wrote about aliasing in the prior sentence, you also have to know if you are using vector or rastor art. You can or use to be able to work with vector images in Photoshop that were made in Illustrator, but I never really looked at the output as a saved jpg file. I don't know if Photshop rastorizes the whole image in the end? Photoshop was /is for rastor images.

                  • 6. Re: Made image at 72 dpi, comes out blurry on web?
                    D Fosse Adobe Community Professional & MVP

                    I'm sorry, but this is all irrelevant and confusing the real issue (the first paragraph at least).

                     

                    Anything you view on-screen, whether it's the internet or local files, align to the screen pixel grid. That's the resolution.

                     

                    If the file is 720 by 450 pixels, that's how many screen pixels will light up to display that image. It really ends there, there is no ppi to consider here. It's given by the screen pixel density. One image pixel is represented by one screen pixel.

                     

                    An application can scale the image pixels for different purposes. For instance, if the image has many more pixels than the screen contains, you need to scale down. This is Photoshop's zoom ratio, or corresponding in other applications. But this is pixel scaling, we all need to be clear about that. Ppi still doesn't enter into it.

                     

                    Now, on paper it's a different story. There is no existing pixel grid on paper, so one has to be invented. This is what the ppi figure defines - pixels per inch. In other words, ppi is strictly a print parameter. It has no relevance on screen.