Scaling a jpg contained in a pdf

[YvLy]

I need to export jpg's for an IOS app and need different dimensions for different phones.

I was planning to resize the jpg's  but then several people suggested to use pdf instead.

I am aware that you can scale pdf's when they contain vector and fonts ... but how does the scaling work with images??

Is the algorithm different?

I always had the believe that a pdf simply CONTAINS a jpg and that the rendering algorithm are the same?

 

 

 

[v_kyr]

See for example:

• Understanding the PDF File Format: Overview

• Understanding the PDF file format – How Are Images Stored

• There are several versions of each image inside your PDF file

• ... and so on ...

[YvLy]

Thanks v_kyr! That was extremely helpful!!

[YvLy]

0

Am I correct in saying: A PDF compression uses the same algorithm (DCTDecode) as jpg and the image is then drawn in the PDF contents stream. The difference is that a jpg compresses pixel, whereas pdf compresses binary data?? ... That is how I understood the articles.

[v_kyr]

Quote

...
The actual pixel data can be compressed and one of the compression formats (DCTDecode) ...
...

Well, can and one of, so it might depend. - You have to look over the JPG format too, in order to determine here any possible handling differences.

However, since you initially said IOS app and JPG or PDF images, I assume you might mean probably then reusable in this context here...

• Xcode 9 Vector Images

• Creating scaled images with PDF Vectors

[YvLy]

Well, yes ... You hit exactly the nail: It is indeed essentially about a "convenient way to build the image assets at 1x, 2x and 3x resolution without the pain of manually creating each file".

But  in my case I don't have pdfs containing vector images but pdfs containing high quality fullscreen photographs.

I am still not quite sure which approach delivers the best results. Apple still recommend jpgs, even in XCode 10.

But then there is of course the other issue: Even IF I go with jpgs, there are only 3 wells (1x,2x,3x) for all different screen resolutions of iPhones and iPads.

What would you do to get the absolute best results, v_kyr?

Thanks again!!!

 

[v_kyr]

Well personally I mostly used PNG/JPGs so far here for app icons etc., but maybe it's a matter of taste and PDFs would do equally nice or even better here, especially with vector contents then. - Related to building the 1x, 2x, 3x, sizes there are tools (Icon Set Creator) which do this for you, in a similar manner as the Affinity export persona does offer to do generate those 1x, 2x, 3x sizes for Xcode then for you. - See also:

• Xcode: What’s up with App Icons?

• 4 Xcode Asset Catalog Secrets You Need to Know

• Adding Image Assets

[YvLy]

Same here, so far I always used jpg's. My problem is not the WORK in creating the 1x, 2x, 3x jpg's. Yes, I would use batch processing. My problem is rather that there are only THREE separate wells in XCode (1x, 2x, 3x) to cater for ALL 6 different screen sizes. So that means that some jpg's will be either rendered up or down. If I would use pdf, that problem would not occur ... 

[v_kyr]

3 hours ago, YvLy said:

My problem is rather that there are only THREE separate wells in XCode (1x, 2x, 3x) to cater for ALL 6 different screen sizes.

According to Apple's "Human Interface Guidelines" you actually need the 2x and 3x scale factors for iOS devices ...

Quote

Device	Scale Factor
12.9" iPad Pro	@2x
11" iPad Pro	@2x
10.5" iPad Pro	@2x
9.7" iPad	@2x
7.9" iPad mini 4	@2x
iPhone XS Max	@3x
iPhone XS	@3x
iPhone XR	@2x
iPhone X	@3x
iPhone 8 Plus	@3x
iPhone 8	@2x
iPhone 7 Plus	@3x
iPhone 7	@2x
iPhone 6s Plus	@3x
iPhone 6s	@2x
iPhone SE	@2x

 

2 hours ago, YvLy said:

If I would use pdf, that problem would not occur

You can give it a try with PDFs, though if the PDF contains bitmap/raster graphics, instead of vector graphics, it then might be too rendered up or down in some visable manner.

[YvLy]

v_kyr, again many thanks for your kind help!

The way I understand it:  XCode uses "Points" rather than "Pixel". When you design a vector-based fixed sized image, say 100x100, this approach is handy.

Your image is always 100x100, on a retina screen it simply multiplied by 2x to 200x200  ...  or 3x to 300x300. So far so good.

But when I deal with photographic images, my starting point are REAL pixels.

So if I want my photograph fullscreen on all devises, I have to deal with the actual pixel dimensions of all the IOS devices.

At the moment they range from 640x1136 to 2048x2732 covering 16 IOS devices in seven groups, each group having different pixel-dimensions.

So it seems to me that there is nearly always some rendering-up or rendering-down going on.

So I guess my question is twofold:

1)  What format should I use for the photographs in my assets well? Jpg's and accepting re-rendering of actual pixels or PDF and knowing that binary data is scaled?

2)  What pixel dimension should I import into in my assets well? The highest (2048x2732) which then will be scaled down on all devices other than iPad Pro? 

[YvLy]

... or do I get this whole thing entirely wrong? ... am I missing something? ...

[v_kyr]

Related to PDF see also this older Q/A posting here, though I don't know if that has changed for Xcode over time or not. Related to that it's rasterized either way. - On Ray Wenderlich's site there are some usage hints too (Making It Beautiful) inside iOS related articles.

You can use either PNG or PDF here and if you apply all 3 resolutions your app later picks the right one for the device it is running on.

[YvLy]

????? 

46 minutes ago, v_kyr said:

You can use either PNG or PDF here and if you apply all 3 resolutions your app later picks the right one for the device it is running on.

... that only applies to png, right?? With a pdf I only supply one ... or am I wrong?

[v_kyr]

Yes and no, for bitmap aka PNG ...

Quote

Apple uses a special file naming convention where you just add “@2x” to the end of your file name before the extension. For example, if you have a file named image.png, the retina version would be named image@2x.png, as below: ... Then when you’re writing code or using storyboards, just refer to the image name without the @2x added onto it. The app will figure out what kind of device it’s running on and automatically pick the retina version if it’s available!

... and for PDF ...

Quote

Vector support is confusing in Xcode, because when most people think of vectors, they think of images that can scale up and down and still look good. However, Xcode 6 and 7 don't have full vector support for iOS, so things work a little differently.

The vector system is really simple. It takes your .pdf image, and creates @1x.png, @2x.png, and @3x.png assets at build time. (You can use a tool to examine the contents of Assets.car to verify this.)

For example, assume you are given foo.pdf which is a 44x44 vector asset. At build time it will generate the following files:

• foo@1x.png at 44x44
• foo@2x.png at 88x88
• foo@3x.png at 132x132

... it will according to that source generate PNGs too out of the PDF. One can probably test the generation then with a tool like cartool.

Quote

https://github.com/steventroughtonsmith/cartool

Steps to extract archive:

Once you've downloaded the zip from github, compile it in Xcode to generate the command line tool. Then expand the Products group and right click on the cartool file and locate it in finder. You can then run the tool like so:

• open terminal
• cd /path/to/cartool
• ./cartool /path/to/Assets.car /path/to/outputDirectory

 

 

[YvLy]

Thanks again for all your help, v_kyr!!! . I need to go on vacation now. At least for a month. My head is spinning ....

[v_kyr]

Nothing to worry about, just make yourself two little Xcode demo projects then, use a storyboard with some UIImageView etc. where you place your images in. In one sample project you use PNGs as assets in the other then instead PDF. - Just test with those projects how things behave and turn out then, so you get an idea what is finally better for you to use!