Highlighted

Jagged images on small banners

Community Beginner ,
Jun 10, 2019

Copy link to clipboard

Copied

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

Views

322

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

Jagged images on small banners

Community Beginner ,
Jun 10, 2019

Copy link to clipboard

Copied

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

Views

323

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
Jun 10, 2019 0
Adobe Community Professional ,
Jun 10, 2019

Copy link to clipboard

Copied

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

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...
Jun 10, 2019 1
Adobe Community Professional ,
Jun 10, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

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...
Jun 10, 2019 1
Adobe Community Professional ,
Jun 10, 2019

Copy link to clipboard

Copied

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.

Regards,
Abambo
Hard- and Software Engineer and Photographer

I'm not an Adobe employee. All advice constitutes my own opinion. Use at your risk! 🙂

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...
Jun 10, 2019 1
Adobe Community Professional ,
Jun 10, 2019

Copy link to clipboard

Copied

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.

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...
Jun 10, 2019 1
Community Beginner ,
Jun 12, 2019

Copy link to clipboard

Copied

example-300x250.png

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?

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...
Jun 12, 2019 0
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

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

Regards,
Abambo
Hard- and Software Engineer and Photographer

I'm not an Adobe employee. All advice constitutes my own opinion. Use at your risk! 🙂

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...
Jun 12, 2019 1
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

For crisp lines and details on icons, logos, text and simple drawings, use Illustrator and export to SVG.  When SVG is re-scaled, it doesn't lose quality.  You can't do that with JPG or PNG imaes.

SVG-options.jpg

Nancy O'Shea, ACP
Alt-Web.com

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...
Jun 12, 2019 1
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

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.

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...
Jun 12, 2019 1