How do I export a small, high resolution image?

[walterw22222069]

I need to export logos at weird sizes (for example 300x600 when the logo is closer to 300x300) as jpegs, at 300 dpi. I have high resolution versions of the logos. I have the document set to 300 ppi. I've turned on resampling and smoothing. But every export/save for web/etc. is pixelated.

What am I missing?

[Theresa J]

What are the logos for? Resolution is only relevant for printing, so the 300ppi doesn’t really mean anything. It’s the total pixel count that matters. 300px is not very big and will be pixelated when you zoom in to look at it. If these logos are for web banners with specific pixel dimension, they should be fine.

[walterw22222069]

These are logos that will have to be uploaded to third party sites that send out client communications for us. So they freak out if it doesn't match their specifications, which is x dimensions, 300 dpi, and jpg.

[Theresa J]

Well the 300 dpi part is irrelevant because they are providing specific pixel dimensions. And dpi stands for dot per inch which is even more irrelevant. When someone provides these specifications to me I figure they don't really know what they are asking for.

[pziecina]

I'm going to be controversial now, and i know a number of Ps users are going to probably shout me down.

ppi setting though currently not used by browsers can help in the production of hi-dpi images for the web. The reason i say that is because screen resolution is important for web images, especially if one is using srcset/picture/image-set, (html and css properties).

If someone creates an image at say 300ppi that is 1x1 inch then the number of pixels is 300x300 px, which is important. This means that on a iPad Pro and a 4k monitor/tv the image will be displayed at 1x1 inch. Resampleing downwards for images by browsers when more pixel data is provided normally gives a better end result than a browser when it trys to upsample an image.

Then of course there is the css specs for image data and replaced content, which recommends including the ppi setting for images, and browsers using this data in its image rendering.

Btw: never save a vector image as jpg, as that removes all vector data, and the image becomes just a pixel image. In illustrator use export to svg.

[D Fosse]

While it may now be possible to code for different ppi values, given an original of sufficient resolution - it is IMO still a kludge and a bad workaround for a problem still unresolved (the co-existence of 2K and 4K displays).

The problem is the resampling that by necessity happens. You have no control over this, and more importantly, no way to sharpen for final screen size. That can only be done with pixels. Until you've tried it, you have no idea what a big difference this makes.

In short, images turn to mush, and worst case it looks outright out-of-focus.

I know all this first hand because, as photographer, I'm part of the small team that maintains the website where I work. The site is part adaptive, part fixed size. I hate the former with a passion and love the latter - simply because here, I can present my images razor-sharp and crisp as crystal, just as I want people to see them. The adaptive part, I put an image up there and try to never look at it again. It's that bad.

[pziecina]

I agree with you, but I was simply stating that if a user does absolutly nothing then with the way the built in browser re-sampling works it is better to supply more pixel data, than too little pixel data.

Ideally everyone would use srcset/picture elements in html, and supply the images required for all resolutions, but lets be honest asking someone to supply 3+ images for every single image used on a web site, is in most cases just not feasible. It maybe o/k if the budget and time allows it, and every set of an image is showing exactly the same info, but with so many different screen sizes and resolutions it is manually not possible to do, Then we also have the picture element for which you can use different images or a cropped image of the original, then the creation becomes for most people simply impossible.

I don't have an answer to the best way to create images for the use with srcset/picture, that would be acceptable for everyone, and any discussions i have had always end up with the time/cost being the main obstacle.

Now i am just looking forward to my retirement, so i can in the future ignore the problem

[walterw22222069]

The only other format they will accept is bitmap. Is there a way to export bitmap with the artboard?

[Dynamic Office]

Bitmap is also rasterising the image, which again will convert your beautiful crisp vector into pixel, without looking at the image I’d assume this will output the unwanted result.

I think as a designer it’s your duty to advise your client what they’re asking is wrong, and not best practise, then you can politely explain what the best option would be. It sounds like they don’t really know what they’re talking about as converting an image from 300x300 to 300x600 is only going to stretch the image out or leave 150px of white space either side of the logo.

[Simmer1]

Hi

It is always best to create the design to the size and dimensions your are after, rather than creating a design then changing the proportions after. Especially in a pixel based programs like photoshop.

Illustrator might be a better option as it uses vectors which can be stretched and proportioned altered without loosing the smoothness of shape edges.

[walterw22222069]

I thought so too, except Illustrator ignores the document dimensions if you select anything other than screen resolution at export.

[Dynamic Office]

Well no, With a Vector within illustrator you can scale up and down as much as you’d like – Set your canvas to 300x600, import your vector, scale it to fit, export as > Jpeg

If it’s a company logo, they will more than likely have some sort of .Ai file to work with – What they’re asking you to do with an image is near impossible without bad end results.

Also as mentioned the dpi has little to nothing to do with the image especially if it’s going onto their website.

Not teaching you or your client to suck eggs but ;

In printing, DPI (dots per inch) refers to the output resolution of a printer or imagesetter, and PPI (pixels per inch) refers to the input resolution of a photograph or image.