Highlighted

The ultimate guide to saving jpegs/pngs for web ads?

Explorer ,
May 30, 2019

Copy link to clipboard

Copied

I'm battling a few clients in the realm of saving files (web banners) and how best to do so. So I'm looking for the ULTIMATE GUIDE to doing this.. i.e. tips and tricks to make ads, especially smaller ads, look their best. For the most part I build the ads in Illustrator, export for screens at 4x the actual size, and then use Photoshop to optimize/reduce the ads to actual size. These ads are combination of photoshop elements (like a background or a vehicle image) and Illustrator type/elements. The reason I can't just save an .ai based ad at actual size is it does a poor job of balancing type/images in the export - photoshop does a better job by far (IMO).

I've tried to convince all my clients to accept ads at 4x actual size and reduce it down to fit, but I have a few that just can't wrap their head around it. If I give them a 300x250 ad at 1200x1000 and they reduce it down it looks better than if I had given them the same ad at 100% of actual (less fogging and artifacts)... maybe it's just me but there is some logic to this... or am I wrong?

I constantly have the same clients ask me to resend the same jpeg ad at a "higher resolution" because the tiny ad I sent was blurry (like a 300x50) - it's driving me nuts. This thread might be the most useful ever if the pros can jump in here and post some usable tips, guidelines, tricks, etc. I have tried building ads in photoshop and indesign but the final results are the same. Am I just doing this wrong?

sample:

<a href="https://imgbb.com/"><img src="https://i.ibb.co/dtZVRSS/small-ad-sample.jpg" alt="small-ad-sample" border="0"></a>

Views

2.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

The ultimate guide to saving jpegs/pngs for web ads?

Explorer ,
May 30, 2019

Copy link to clipboard

Copied

I'm battling a few clients in the realm of saving files (web banners) and how best to do so. So I'm looking for the ULTIMATE GUIDE to doing this.. i.e. tips and tricks to make ads, especially smaller ads, look their best. For the most part I build the ads in Illustrator, export for screens at 4x the actual size, and then use Photoshop to optimize/reduce the ads to actual size. These ads are combination of photoshop elements (like a background or a vehicle image) and Illustrator type/elements. The reason I can't just save an .ai based ad at actual size is it does a poor job of balancing type/images in the export - photoshop does a better job by far (IMO).

I've tried to convince all my clients to accept ads at 4x actual size and reduce it down to fit, but I have a few that just can't wrap their head around it. If I give them a 300x250 ad at 1200x1000 and they reduce it down it looks better than if I had given them the same ad at 100% of actual (less fogging and artifacts)... maybe it's just me but there is some logic to this... or am I wrong?

I constantly have the same clients ask me to resend the same jpeg ad at a "higher resolution" because the tiny ad I sent was blurry (like a 300x50) - it's driving me nuts. This thread might be the most useful ever if the pros can jump in here and post some usable tips, guidelines, tricks, etc. I have tried building ads in photoshop and indesign but the final results are the same. Am I just doing this wrong?

sample:

<a href="https://imgbb.com/"><img src="https://i.ibb.co/dtZVRSS/small-ad-sample.jpg" alt="small-ad-sample" border="0"></a>

Views

2.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 30, 2019

Copy link to clipboard

Copied

i don't do the 4 times bigger things you do. i design at the size they ask and export from illustrator. I work for an agency with lots of clients. never had these issues.

the source of the problem appears to be the way you choose to work.

why don't you try doing what your clients ask for versus arguing with them? in my opinion, yes, you are making this more complicated than it needs to be.

These are  good courses for you to watch:

Illustrator for Web Design: Image Optimization

Illustrator for Web Design (2012)

however it will keep you all in illustrator, which i think is where you can stay the entire time and just work with the pixel sized you are asked to design for.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 30, 2019

Copy link to clipboard

Copied

Things that stuck out at me:

If you're sending them the 300 x 50 pixel image in JPEG, try another format; JPEG is a "lossy" format, even at minimum compression settings, which means that any minute detail might be lost in translation. Try something like PNG instead.

You clients might be viewing the image on an UHD (4K) monitor. A 300 x 60 pixel image will be incredibly tiny on that type of monitor. Make them aware of that if that's the case.

You could certainly scale big and finish small but I would design with the desired dimensions in mind, unless the same ad is going to be used different ways. (And both Illustrator and Photoshop are great at this with the use of Artboards.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 30, 2019

Copy link to clipboard

Copied

At 100% you can sharpen optimally. Any resizing will blur and soften.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jul 16, 2019

Copy link to clipboard

Copied

I was just about to ask the same question, but looks like it already exists. I, too, have found that small banners (e.g. 728x90) look fine. Legible even. But not sharp. I've found the only way to accomplish this is to create banners 2X as big and save down. However, I'm not sure if the "new sizing" will work if delivered as 1456x180 when 728x90 has been requested.

I've seen plenty of "non-sharp" web banner ads out there that pass as acceptable, and then I've seen crystal-clear ones. How is this accomplished? I've experimented with different file types, type optimization, sharpening, etc. but they're all fairly similar to each other in result.

Any thoughts would be much appreciated.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Jul 16, 2019

Copy link to clipboard

Copied

Well, no JPEG for a start.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 16, 2019

Copy link to clipboard

Copied

Any scaling will soften and blur. Always, no exception. If you can design at 100% and sharpen images optimally, it's razor sharp.

There are two problems today. One is responsive design, where the browser scales automatically and turns images to mush in the process.

The other is 4K/retina, where the browser also scales automatically, this time to a fixed 200%.

Put those two together, and it'll never be properly sharp.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Feb 05, 2020

Copy link to clipboard

Copied

What would you say is the best platform to create banners/artwork for web? I've been experienceing this problem too with fuzzy ads. Some of the sites we advertise on will accept a 2x resoloution but not all do and so far for me that's the only fix.  Thanks in advance!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Sep 14, 2020

Copy link to clipboard

Copied

Dude! I've had very similar issues for a long time—years actually. I'm still searching for the best method to save out small web/banner ads, because I'm a quality snob and it drives me nuts! For me, I've found that if you are handing over images to a dev and they are inserting into a site/web page, it can be saved out larger than actual size (2x, 4x or bigger, and the end result looks super crisp. At this point it's just a matter of file size and quality vs load speed), but when you are saving these small web ads to fit into specific containers online for your clients, it needs to be exact size, pixel for pixel. 

 

But yes, what stumps me is sometimes I see very small banner ads that are SUPER crisp on my retina display. How do they do it? Furthermore, super crisp motion graphics at very small sizes! If anyone has any optimization insights please share! It's good to learn that some of these ad sites are now accepting 2x sized images!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...