Participating Frequently

Question

Question on exporting different sizes and resolutions

Forum|Forum|7 years ago
March 8, 2019
3 replies
4396 views

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

This topic has been closed for replies.

willcampbell7

Legend

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.

William Campbell

T

Test Screen Name

Legend

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.

BobLevine

Community Expert

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?

I

iLiveinOHAuthor

Participating Frequently

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

Community Expert

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.

JonathanArias

Legend

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?

I

iLiveinOHAuthor

Participating Frequently

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

Community Expert

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded