Question on exporting different sizes and resolutions

[iLiveinOH]

My question is: If the file I exported as a jpg at 200px x 300px is 'fuzzy' can I up the ppi and lower to the dimension ratio so that it will export at that size I want?

Background Story:

Client asked for a specific sized web banner. Let's say 200px x 300px

I created the banner in Illustrator and made sure everything was vector and then exported as a jpeg(yes I know it's raster) at 72ppi at those dimensions.

The ad was a bit fuzzy and it didn't seem like png was that much better but I could be wrong. I also sent svg files if they could use those.

Can I up the ppi and lower the size so the final output matches 200px x 300px. (Not even sure if this makes sense, I have yet to comprehend sizes with pixels and resizing designs/images.)

[JonathanArias]

if you just place that illustrator vector art on to an indesign layout at the size you need. and export to .jpg, you will not have any of these issues.

i am assuming you are posting on the indesign forum because you made a document 200px x 300px and placed a .jpg that was exported from an illustrator file which is smaller than 200px x 300px , so yes, when you scaled up, and exported from indesign, things don't look how you want them to look.

however, you could have just made all of this in illustrator at that size and exported.

want to show screenshots and share you process for working?

[iLiveinOH]

I'm confused on why exporting a file from Illustrator vs InDesign would matter? You're telling me if I have an ad created at 200px x 300px and want to export it as a jpg for 72ppi that InDesign will export a jpg at a better quality then Illustrator?

You mention to export from InDesign and BobLevine says Photoshop, why does it matter what program you export from? (I understand if you want a vector file then use Illustrator or InDesign, but since my final output is going to be a raster file does it matter what program to use?)

[hammer0909]

This topic becomes a point of contention only because InDesign wasn't really designed for that purpose so the output you're getting could be a result of the intended purpose it was designed for. That being said, you can totally export out of any program that you wish. Usually out of InDesign, users are exporting content that is of a higher resolution. In your case, your outputting a file of a fairly minimal size and resolution. And yes, every raster file does have a resolution. I think Bob's point was that for the web, the focus is on pixel dimensions instead of resolution that we thing of as print professionals.

Regardless, to your point, the output in your opinion is soft. InDesign provides control of the output resolution when exporting to .jpg. I'd try exporting the file at like 300 psi or higher and then downsampling it in Photoshop. This way you're staring with way more pixels then you need which might provide you with more detail in the long run. Programs like Illustrator and Photoshop have specific web output functions that provide more control where InDesign doesn't give you those options. Still, I think you can get the output that you need, you just might need to jump through an extra hoop or two.

[iLiveinOH]

Really appreciate your response. That makes sense and I had no idea this would make a difference.

[JonathanArias]

its does not matter what program you are on. no

why are you using indesign if you already made the banner in illustrator?

again, can you show us what you are doing and explain you method so we are not just guessing/asking 20 questions here.

you are in the indesign forum asking a question about a web banner you made indesign?

or did you make the web banner in illustrator?

[iLiveinOH]

The content is irrelevant, think of any design. I'm in an InDesign forum because it relates to all programs and exporting and the name  of the forum I'm in is also irrelevant.

[BobLevine]

I said if you take the same graphic with the same pixel count and save it in Photoshop at different “print” resolutions it will look identical.

Of course different devices will show it differently but all three will look the same next to each other on those devices.

And the content is not irrelevant. This is after all an InDesign forum. To say that irrelevant makes little sense to me.

[iLiveinOH]

I'm not going to sit here and argue with you Bob. I'll find the answers elsewhere.

Hope you have a great weekend!

[BobLevine]

Resolution on the web means nothing. Pixel count is all that matters and web banners should be created in Photoshop.

That out of the way, what does any of this have to do with InDesign?

[iLiveinOH]

Isn't pixel count the resolution? Don't regular monitors view at 72 ppi and Retina displays at 144ppi?

I don't understand why JonathanArias says it's best to export with InDesign and you say Photoshop? Why does the program you're exporting from matter. (I have over 10 years experience with the Adobe Suite and understand Photoshop is raster based for photography while Illustrator and InDesign are vector based)

[BobLevine]

randyj30598509  wrote

Isn't pixel count the resolution? Don't regular monitors view at 72 ppi and Retina displays at 144ppi?

You're talking PPI which is a print resolution. For web, again, the only thing that matters is pixel count.

Don't believe me? Create a 300x300 image and save at 72 ppi, 144 ppi and 300 ppi.

Place them all on a webpage. I can guarantee they will all look the same.

Finally, if you really want to use InDesign for this, then export a PDF/X-4 file out of InDesign and open it in Photoshop and rasterize it there.

Edit: The monitor thing is incorrect, too. There are way too many devices and resolutions to count.

[Frans v.d. Geest]

You're talking PPI which is a print resolution

Welll, in fact dpi (Dots) is the printers resolution, ppi pixels, but a ppi value is an indicator for quality of print yes.

[BobLevine]

You are of course, correct.

I don’t know what I’d do without you, Frans.

[iLiveinOH]

Instead of arguing with you or trying to prove who is right or wrong. Where can I learn more information on this topic? Do you have any specific suggestions?

Thanks!

[iLiveinOH]

I'm not trying to argue with you but understand why because I thought I understood resolution.

When I think of ppi (I relate pixels to a monitor so immediately think of a screen's resolution)
and DPI (I think printer because it prints dots per inch)

You guys are saying that's incorrect? Where can I better learn this information?

I also do not believe you that if you create a design and save it at different resolutions that it will look the same? (Yes on the same monitor it will, but if you put a retina display next to a regular monitor you can notice a difference)

[hammer0909]

I don't think anyone is saying right or wrong. Within the industry I regularly hear people use many of these terms interchangeably, however I know what they mean so I don't sweat it.

You're right. when you think of pixels, you should think of screens because they display images using pixels.

Digital files however are also made up of pixels (at least raster-based images are). So raster-based image resolution is defined in ppi and when using them for web-use, our primary focus is on pixel dimensions although those files still do indeed have a resolution.

As printers and designers, we refer to files by their resolution primarily. For project x, I need an 11 x 17 image at 300 ppi. We're not concerned with pixel dimensions although the files we work with certainly has that as well. But for printing purposes, we just don't care, our focus is on the size and resolution of the image.

Dots per inch or dpi, is typically used to refer to output devices such as desktop printers, filmsetters, and platesetters. Most printers will disclose their printing resolution as something like 720 dpi which refers to how many dots the printer is laying down per square inch. Forgive me, in Europe maybe they use doc (dots per centimeter), I honestly don't know. Film and plate setters output at a resolution of typically 2540 dpi. Super high amount of dots per inch.

To further muddy the waters, filmsetters and platesetters and therefore printed products produced on printing presses refer to an lpi number which refers to lines per inch which is the halftone dot pattern put on paper. High-end commercial printing is usually 175 lpi but can certainly go higher into 200 lpi or more.

I don't know if this help to clear things up or not but hopefully it gives you a little more insight into the discussion.

[Frans v.d. Geest]

>in Europe maybe they use doc (dots per centimeter), I honestly don't know.

We don’t, we use dpi as well. However we both use lpi and lpc for our line rasters 😉

[Per Berntsen]

randyj30598509  wrote

When I think of ppi (I relate pixels to a monitor so immediately think of a screen's resolution)
and DPI (I think printer because it prints dots per inch)

Monitors do have a ppi (pixel density), but that's unrelated to image ppi.

For instance, my 1920 x 1200 monitor is 20.5 inches on the long side, and 1920/20.5 = 93.6 ppi.

The math for image ppi works the same way. If you have a 2400 x 3000 pixel image, it will print at 8 x 10 inches with the ppi set to 300, because 2400/300 = 8, and 3000/300 = 10. As has been pointed out by others, image ppi is irrelevant for screen viewing, the image will display according to its pixel dimensions. Ppi is optional metadata, and images will display correctly on screen even if they have no ppi value at all.

You may find this article helpful; What is a digital image?

I also do not believe you that if you create a design and save it at different resolutions that it will look the same? (Yes on the same monitor it will, but if you put a retina display next to a regular monitor you can notice a difference)

Most applications (not Adobe applications, but web browsers etc.) will scale images to 200%, so they don't display so small on Retina displays, which have a very high pixel density, and consequently very small pixels.

The image you posted illustrates how a web browser on a Retina screen can be tricked into not displaying an image at 200% (which makes it less sharp), but displaying a different image with twice the pixel dimensions instead. This involves special coding on the website, and also uploading two versions of the image. Image ppi does not play a part in this.

The phone image may have been created for a different purpose, but it illustrates precisely how an image will display on a Retina screen (left), and what it will look like with the proper website coding (right).

[willcampbell7]

For your example of a web graphic, 200x300 pixels IS THE SIZE. A combination of ppi and other measure of size applies to print. For web, you have no control over ultimate size (inch, mm, etc.)

Think of it this way: if viewing a web page on a 47" TV that is 1080p, the pixel dimensions of that device is 1920x1080. For a 47" diagonal measure that is a rectangle approximately 40x23 inches. That's about 48 pixels per inch. So a graphic 200x300 views roughly as 4x6 inches. That seems pretty big. But view the same web page on a phone that is around 600x1200 pixel display and physically 2x4 inches, the same graphic views approximately 1 inch tall. Given the multitude of viewing devices for web pages (TVs, desktop displays, phones, and tablets) you have no control over ultimate size.

This difference in physical size between a TV and phone is not an issue -- we don't view a TV from 18" away like we do a phone. Same idea applies to print work. A book held in one's hand needs more resolution than a billboard because the closer the printed product is to our eyes, the more resolution is needed.

To answer your question, no you cannot "up the ppi and lower the size." Particularly until it matches the pixel dimensions it was to begin with. That doesn't make sense. You're right back where you started. The pixel dimensions IS the size. And it is the spec for the website to which the graphic is to be submitted. The pixel dimensions must match the same a print ad has to match a publication's page size.

Now it's quite true when working in such limited pixel dimensions, which are quite common for web ads, a design you imagine for print can end up looking awful. Design for web is a different animal. Avoid small serif type faces, for example. Avoid any small text really. Look at other web ads (depending on browser, you can right-click, view image, then save as to view in Photoshop). If you study a few web ads you'll see most use large fonts and less complex graphic elements. There's only so much you can convey in a space measuring 200x300 pixels.

[Test Screen Name]

JPEG is always fuzzy for text. That's by design, it's supposed to be fuzzy for text. So compare with PNG.

Now, look at your add at its pixel size 200 x 300 in Photoshop At 100%. Don't zoom in! How does it look? Commonly people put far too much detail for a small space in a web banner.