Highlighted

@2x and pixel density

Enthusiast ,
Aug 06, 2018

Copy link to clipboard

Copied

Hi,

If I have an image set to @2x so it is increased pixel density... unfortunately because this image is for a full width banner - even at the PNG setting for 8 vs 24, it is a few mb. I am thinking this is far too large for a web image.

Can you advise how to further control / optimize such a PNG? Maybe I need to pull it into Photoshop and do something else with it to further reduce file size overall? What should be the max file size for such a use I've described? I need it hiDPI or retina ready.

Also, what about for smaller view on phone and tablet. I was thinking to have the media query swap out the img for smaller size but still need hi enough res.

Any ideas there?

Thank you.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Why not use optimized JPG instead of PNG?  In PS, go to File > Export > Export As >  JPG.  Reduce quality slider to reduce file size.

PS-export2x.jpg

Views

251

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

@2x and pixel density

Enthusiast ,
Aug 06, 2018

Copy link to clipboard

Copied

Hi,

If I have an image set to @2x so it is increased pixel density... unfortunately because this image is for a full width banner - even at the PNG setting for 8 vs 24, it is a few mb. I am thinking this is far too large for a web image.

Can you advise how to further control / optimize such a PNG? Maybe I need to pull it into Photoshop and do something else with it to further reduce file size overall? What should be the max file size for such a use I've described? I need it hiDPI or retina ready.

Also, what about for smaller view on phone and tablet. I was thinking to have the media query swap out the img for smaller size but still need hi enough res.

Any ideas there?

Thank you.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Why not use optimized JPG instead of PNG?  In PS, go to File > Export > Export As >  JPG.  Reduce quality slider to reduce file size.

PS-export2x.jpg

Views

252

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
Aug 06, 2018 0
Adobe Community Professional ,
Aug 06, 2018

Copy link to clipboard

Copied

Why not use optimized JPG instead of PNG?  In PS, go to File > Export > Export As >  JPG.  Reduce quality slider to reduce file size.

PS-export2x.jpg

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Aug 06, 2018 0