Participating Frequently

Question

Jagged images on small banners

Forum|Forum|6 years ago
June 10, 2019
6 replies
3046 views

What is the best Adobe tool for creating small web banners? (example 300x250px, 250x250px etc.)

I am using Photoshop and Illustrator, but needing jpg or png format the images and texts are always jagged.

What am I doing wrong?

Thanks

This topic has been closed for replies.

I

InannaWFCA

Participant

This is going to sound crazy, but I have found that Microsoft Paint is the most effective tool for scaling down graphics to small dimensions. If you 1) use any Adobe program to create your graphic (I would recommend doing so at a larger size than you ultimately want), 2) export it (I've been using PNG format), and 3) then re-size the image in Paint to the dimensions you need, I have found it magically retains its crisp lines.

I don't claim to understand why this works, but I completely understand the frustration of images losing their definition when you make them smaller / not being able to export high definition images and also have them retain the correct dimensions. I hope this helps!

Nancy OShea

Community Expert

"Microsoft Paint is the most effective tool for scaling down graphics "

Not sure I agree with that. I use File > Export > Export As. Select your required image size.

To save bandwidth, use JPG and reduce the quality slider.

Keeping in mind that a 250 x 250px image on a 4 or 5K display will look like a postage stamp, you really need a set of @1x, 2x, 3x images for optimial viewing on various devices.

Responsive Images:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Nancy O'Shea— Product User & Community Expert

marliton

Community Expert

Hi. You will always see jagged borders in small images with small details like text. Try working in Illustrator with the function Align to pixel enabled. That could minimize the jagged but that will not remove it.

Marlon Ceballos

melissapiccone

Community Expert

Screenshots so we can see what the problem is. You are making very small images, they will be pixelated when you zoom in and a little jaggy normally.

Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist

MVstudioAuthor

Participating Frequently

Hi there! This is an example of what I mean with "jagged". But in the end I believe that the problem is due only to the fact that it is a very small image.

As for the resolution (500ppi, 300ppi, 72ppi) it is not important if I increase in my psd file, since then on the web it will still be resized to 72ppi, right?

Abambo

Community Expert

massimovtrackingram wrote
As for the resolution (500ppi, 300ppi, 72ppi) it is not important if I increase in my psd file, since then on the web it will still be resized to 72ppi, right?

Forget ppi for the web. Web images work with pixels (500 pixels width....or 1000 pixels width).

I do not see jagged text. The text is as it should be. However, Internet explore does a very bad job downscaling images and may introduce jagged text.

BTW, if you mean this (300% magnification):

That is antialiasing and a technique to get hard edges looking better at 100% (one pixel on screen, one pixel on the image).

Spatial anti-aliasing - Wikipedia

ABAMBO | Hard- and Software Engineer | Photographer

Abambo

Community Expert

You are using the right tools.

You need to produce the banners for the size needed (at the end of the process) and they will be correct.

Please post an example (original and jagged) and experts will help you.

ABAMBO | Hard- and Software Engineer | Photographer

Nancy OShea

Community Expert

I have moved this discussion from Creative Cloud to the Photoshop forum.

The days of one size fits all are long gone. Keep in mind that 300 x 225 pixels is tiny on Retina & hi-pixel density devices. Nowadays, web designers typically use the SRC SET image property with multiple sized images -- @1x for small, @2x for medium, @3x for large and @4x for extra large. In this way, the browser selects the best image for the respective devices ensuring a better user experience for everyone and reduced bandwidth for mobile data plans.

Responsive images - Learn web development | MDN

When I'm creating web images, I start with the largest image for the largest target devices.

File > Export > Export As >

Nancy O'Shea— Product User & Community Expert

kglad

Community Expert

up-scaling bitmaps results in pixelation, down-scaling is not as problematic. so make your bitmaps as large as the largest they will need to be.

or use vector images, https://modassicmarketing.com/understanding-image-file-types

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