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

Explorer ,
May 30, 2019 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

16.0K

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
community guidelines
Guru ,
May 30, 2019 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
community guidelines
Adobe Community Professional ,
May 30, 2019 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
community guidelines
Adobe Community Professional ,
May 30, 2019 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
community guidelines
New Here ,
Jul 16, 2019 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
community guidelines
LEGEND ,
Jul 16, 2019 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
community guidelines
Adobe Community Professional ,
Jul 16, 2019 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
community guidelines
New Here ,
Feb 05, 2020 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
community guidelines
Community Beginner ,
Sep 14, 2020 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
community guidelines
New Here ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

Agreed. I have also had the same issues for years and struggle to find a good solution for producing actual pixel sized ads (300x250, 300x100, etc) razor sharp. I saw someone mention "sharpen optimally", can anyone elaborate on that?

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
community guidelines
New Here ,
Jun 23, 2021 Jun 23, 2021

Copy link to clipboard

Copied

I work for a digital agency and we leverage HTML ads for all of our client's Google Display Network and smaller programmatic banners whenever possible. The quality is much higher than with GIF, JPG, or PNG formats and the load speed is also much quicker.

 

Here is an article with the HTML requirements that may be helpful.

https://support.google.com/google-ads/answer/1722096?hl=en#zippy=%2Canimated-and-non-animated-image-...

 

 

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
community guidelines
LEGEND ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

I'm battling a few clients

step 1 is stop that... the client is always right unless what they are asking for is wrong.

 

in other words there is NO standard for internet adds and when you make adds for a living its up to you to know which CMS is going to handle the clients website... once you know who is actually hosting this add they will have all their template details posted and you have to follow that or talk your client into using someone else

 

p.s, Illustrator = vector and most devices expect adds to be bitmap... if you make a vector image for the net then the device at the other end has to put that image together before it can be displayed (fine on a desktop but not for phones)

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
community guidelines
New Here ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

Similar to others, I've had the exact same issues for years. Typically I've saved at 150 ppi, but I've had cases (like you mentioned) where the client wants exact dimension (say 300x200) and it looks terribly pixelated after exporting. I was once told to use svg files by a web developer, and after doing some research they could be the magic bullet...but it might depend on the client and whether they are using a developer to add the ads or just uploading via a platform/vendor of some kind. This html route seems suitable too, just might require me to learn some new software.

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
community guidelines
Adobe Community Professional ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

quote

Typically I've saved at 150 ppi


By @Samantha5C75

 

Ppi is irrelevant for web/screen. You can save at 1000ppi, 475 ppi or 1ppi, and it doesn't make any difference, it's all the same on the web page. Just try it for yourself. Ppi is a print parameter*

 

You need to design in pixels. There are two potential problems - responsive design and 4K/retina screens. Responsive design will scale any image arbitrarily, up or down, and basically makes the whole thing quite unpredictable. Any scaling will soften the image.

 

4K/retina, however, is not really a problem. The easy way is to simply design for standard HD. When a web browser detects a high resolution screen, it will do a clean pixel doubling so that four screen pixels are used to represent one image pixel. This is the industry standard today, and the big advantage is that the same material can be used whatever the screen technology, and it will always display at an appropriate screen size.

 

Keep in mind that Photoshop doesn't do any of this scaling for high density displays, so to see the same thing you need to set View > 200%.

 

A more sophisticated solution is to code the site so that you upload two versions of the same image. The browser will then put the appropriate version up on screen, depending on screen resolution.

 

Either way, you need to think in pixels, not ppi!

 

(*the ppi number is also used by Photoshop to calculate font sizes. Point is a physical size unit from lead typesetting.)

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
community guidelines
New Here ,
Jan 10, 2022 Jan 10, 2022

Copy link to clipboard

Copied

This is a good thread to read through. I've had these issues too.

 

Actually, PPI is not a print parameter, it's a pixel parameter that relates to image file resolution and screen resolution. DPI is the print paramater. But I get what you're saying.

 

And instead of setting the view in Photoshop to 200%, isn't it the same to just create the ads at 2x the dimensions? I use a 5K retina iMac for daily work, and if a 970 x 250 ad is the target size, I work at 1940 x 500 @ 72ppi in Photoshop.

 

So the question is, will the web page that's doing the display of the ad also handle the scaling? If the source code specifies an ad size of width="970" and height="250" on a page, and my ad JPG or PNG is 2x the size, won't that display a better quality ad than if it was saved as 970 x 250 @ 72 ppi?

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
community guidelines
Adobe Community Professional ,
Jan 10, 2022 Jan 10, 2022

Copy link to clipboard

Copied

quote

Actually, PPI is not a print parameter, it's a pixel parameter that relates to image file resolution and screen resolution. DPI is the print paramater. But I get what you're saying.

 

By @tonyinthecitytoo

 

No, that's incorrect. Pixels per inch, ppi, does not apply on screen. On screen there already is a pixel grid, the native screen resolution, and the image pixels align to that. It's just pixels, so many high by so many wide.

 

On paper there is no such pixel grid, so one has to be invented. This is the ppi number. It means exactly what it says: pixels per inch.

 

Dots per inch is something else. That's the density of ink dots on paper, and it has no relation to image pixels as such. They do not have to be the same, and rarely are.

 

For an image file, pixels per inch is the correct term, not dots per inch.

 

Since ppi does not apply on screen, the ppi number is stripped in Export/Save For Web. A file out of Export does not have a ppi number at all, not 72, not 300, not anything else.

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
community guidelines
Adobe Community Professional ,
Jan 10, 2022 Jan 10, 2022

Copy link to clipboard

Copied

Scaling is great until you get into fine detail. A one pixel line scaled to 50% displays as...

You might think that you just won't put thin lines in but don't forget about type, serifs and counters and such can be tiny. That is why computers use anti-alising and other tricks, to smooth out jagged pixel transitions.

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
community guidelines
Community Beginner ,
Mar 09, 2022 Mar 09, 2022

Copy link to clipboard

Copied

I have had this issue also for many years. ie: trying to supply crisp banner ads that are not html5.

As soon as websites start accepting svg files along with the jpg, pngs etc i think our problem will be solved.

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
community guidelines
Adobe Community Professional ,
Mar 09, 2022 Mar 09, 2022

Copy link to clipboard

Copied

SVG is already fully supported in all web browsers and is a good option.

 

But note that SVG files should be made in Illustrator, not Photoshop, to have any real purpose. Out of Photoshop it will still have pixel content and so you could just as well use PNG. To make a true vector SVG you have to use Illustrator (with a very few special exceptions).

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
community guidelines
Community Beginner ,
Mar 09, 2022 Mar 09, 2022

Copy link to clipboard

Copied

Thanks. Yep, I am aware of the difference between vector and pixel and thats why svg is so good. I realise that building my own websites I use svg all of the time but when supplying paid banner ads for advertsiing to websites, no one accepts svg as a file format. i have no idea why but it would solve so many issues.

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
community guidelines
New Here ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

Is it possible some advertisers are using web hosts that won't accept svg? Seems outdated, but that's all I can think of. I don't code myself, but if I'm working directly with a developer, there is usually no problem using svg. As for the ppi discussion, I get what you're saying but I'm a bit limited in the parameters I choose when building an image in photoshop/illustrator. At the end of the day what will fix this problem? I can build the dimensions 2x, 3x, etc. the desired output, and I can increase ppi. From experience, these are the only things that seem to improve the quality. Without html 5 or svg, what is possible? There was something said about viewing at 200%, but I'm not sure what that was in reference to. 

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
community guidelines
Adobe Community Professional ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

LATEST

Viewing at 200% is for people with retina/4K displays. When a web browser detects such a display, it automatically scales to 2x linear dimensions. This is the industry-standard workaround to make images display at roughly the same size that it would on a standard screen - and so the same material can be used regardless of screen technology.

 

View > 200% in Photoshop doees exactly the same thing, so it will exactly match the browser on a retina/4K display.

 

As has been said countless times here, increasing ppi is totally pointless for a web image. It makes no difference whatsoever, it doesn't change anything. Ppi is a print parameter, not valid on screen.

 

The 2x etc options in Export is for a different purpose: it's possible to code a website so that you upload two images, and the browser chooses which one to display based on the screen type it detects. But again, this requires special website coding and normally doesn't apply.

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
community guidelines