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:

here's how it comes out on the web:

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

[JJMack]

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

[D Fosse]

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.

[gagnonm1993]

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?

[JJMack · Accepted solution]

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

[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.

[D Fosse]

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.

[totally_kyled]

My whole thing. why even bother adding it. If they have the ability to create sectional situations with the welcome screen from print/iphone/web etc why, when choosing web, give an option for screen PPI/DPI any PI - this to me is really just leading to confusion. Until someone comes along and goes "OH its because of a,b,c" well then we now have a reason that this question was even asked in the first place.

So 2 things.

1. why do they even have the option in web format files to assign a PPI

2. if there is a reason for this, then this question and ALL web based PPI questions are relevant (this is less of a question more of a statement).

if anyone can answer those I feel it might help to guide this confusing conversation a little more clearly.

[D Fosse]

First question - they don't. Save For Web and Export both strip the ppi number from the file entirely. It has no ppi at all. If you see a ppi number, it's because the file has been reopened into an application that routinely assigns a default ppi if there isn't one. Photoshop, in this case, assigns 72.

There are two or three main reasons raster image files need a ppi number.

1. You might want to print the file at some point. That's where ppi directly applies and is needed to set the size on paper.
2. Type. Font size is defined in points, which is a physical size unit, 1/72 inch - a traditional unit based on lead typesetting. The only way to calculate a font size in a digital raster file, is to do it through the ppi number.
3. For Photoshop, you might add Smart Objects. For consistency between applications, Smart Objects are treated as physical sizes rather than pixel dimensions. It's very similar to how type is treated and again it's done through the ppi number.

[totally_kyled]

Great answers. What i was hoping would be the response to said questions asked as to just give clarity to anyone, who like me, might be looking for a more broad perspective of why or when.

thanks again!