Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a way to generate only two (portrait and landscape) apple splash screen images? #614

Closed
justingolden21 opened this issue Jun 27, 2021 · 13 comments
Labels
feature request New feature or request

Comments

@justingolden21
Copy link

Is your feature request related to a problem? Please describe.
Too many files are generated. They are huge, clutter, and require more network requests for the user, more time to build, etc, and seem generally unnecessary when you could have one high res image per screen orientation.

Describe the solution you'd like
A CLI flag to only generate one specific portrait/landscape resolution for apple

Describe alternatives you've considered
Doing this manually

Additional context
I have no idea why apples requires a 2048x2732 image, when all other companies and devices (google, microsoft) are good with a 512 image and a color... But regardless of the reason, having this one image should suffice. The generator makes 2 manifest icons and 25 (!) apple startup images... I mean the HTML alone is over 5kb... It's just too much for a lightweight PWA; I'd rather at least have the option (default to how it currently works) to only generate a few splash files. Currently, it runs forever, then generates a bunch of files I don't need, I have to delete them all, and remove the links from my html page(s). Or, the user is stuck with a dozen more files than they need, a bunch more network requests, and my app takes longer to load and to install, more data is used hosting, etc.

<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
@justingolden21 justingolden21 added the feature request New feature or request label Jun 27, 2021
@justingolden21
Copy link
Author

Also, have you considered https://realfavicongenerator.net/ for favicon sizes and guidelines?

@justingolden21
Copy link
Author

Can I link to multiple html files?

When running npx, will it remove chromium once it's done? If I'm only running it once, I wouldn't want all of chromium sitting on my hard drive for each project I run this on...

@atjn
Copy link
Collaborator

atjn commented Jul 1, 2021

You are absolutely correct when you say that Apple's requirements are ridiculous, but I wouldn't recommend just delivering one startup image. Apple/Safari has a long history of botching webapps, especially the ones that don't conform to all of Apple's demands. As an example, I believe there currently is an issue where Safari will simply stretch the startup image out of proportions if it doesn't perfectly fit the aspect-ratio of the device.

the user is stuck with a dozen more files than they need, a bunch more network requests

Non-Safari browsers will not download the images generated for Apple devices, and Safari will only download the appropriate image for the device it runs on, so this is not a huge issue.

If you really want to get rid of these extra images, I think you should ask for an option to completely disable generation of Apple startup images. That will make the experience worse for your Apple users, but not as much as if you only generate some of the images.

@justingolden21
Copy link
Author

Also, is there a way to generate transparent icons but opaque splash screen images?

Thanks in advance for listening to my input : )

@justingolden21
Copy link
Author

One more thing (although I don't want to flood your repo with issues so I'll comment here for rn)

Is there a way to use multiple manfiests? I'm planning on localizing my app, which means a manifest for each supported language. As is right now, I'd have to copy and paste the same pwa asset generator line with links to different manifests each time, have a command to run all of those commands at once, which would also then go through the entire image creation process multiple times

@onderceylan
Copy link
Collaborator

One more thing (although I don't want to flood your repo with issues so I'll comment here for rn)

Is there a way to use multiple manfiests? I'm planning on localizing my app, which means a manifest for each supported language. As is right now, I'd have to copy and paste the same pwa asset generator line with links to different manifests each time, have a command to run all of those commands at once, which would also then go through the entire image creation process multiple times

Hi @justingolden21, thanks for your feedback. I will quote reply your questions, starting with this one.

pwa-asset-generator doesn't support changing multiple manifest files at once. You need to run your command multiple times. I'm curious about your use case as I haven't seen such a scenario where multiple manifest files are provided, per locale. Do you expect your users to add your app to their home screens per locale?

@onderceylan
Copy link
Collaborator

Also, is there a way to generate transparent icons but opaque splash screen images?

Thanks in advance for listening to my input : )

You need to execute two commands, one for splash images another for icons only. Please see the relevant section on FAQ in docs - https://github.com/onderceylan/pwa-asset-generator#how-can-i-generate-a-transparent-favicon-and-app-icons-with-opaque-background.

@onderceylan
Copy link
Collaborator

Can I link to multiple html files?

When running npx, will it remove chromium once it's done? If I'm only running it once, I wouldn't want all of chromium sitting on my hard drive for each project I run this on...

No, you can't link to multiple HTML files. You need to run the command multiple times or manually duplicate.

npx commands cache the dependencies under your configured npm cache folder, see https://docs.npmjs.com/cli/v7/configuring-npm/folders#cache. npm clears the cache with it's internal logic.

If you worry about your disk storage, you can download pwa-asset-generator globally, with npm i -g pwa-asset-generator command and you'll still be able to execute it on any project you might have.

If you have any chromium based browser installed on your system, pwa-asset-generator won't install the browser anyway, but will use your system browser instead.

@onderceylan
Copy link
Collaborator

Also, have you considered https://realfavicongenerator.net/ for favicon sizes and guidelines?

Yes, we did. Please see the discussion here - #606

@onderceylan
Copy link
Collaborator

Is your feature request related to a problem? Please describe.
Too many files are generated. They are huge, clutter, and require more network requests for the user, more time to build, etc, and seem generally unnecessary when you could have one high res image per screen orientation.

Describe the solution you'd like
A CLI flag to only generate one specific portrait/landscape resolution for apple

Describe alternatives you've considered
Doing this manually

Additional context
I have no idea why apples requires a 2048x2732 image, when all other companies and devices (google, microsoft) are good with a 512 image and a color... But regardless of the reason, having this one image should suffice. The generator makes 2 manifest icons and 25 (!) apple startup images... I mean the HTML alone is over 5kb... It's just too much for a lightweight PWA; I'd rather at least have the option (default to how it currently works) to only generate a few splash files. Currently, it runs forever, then generates a bunch of files I don't need, I have to delete them all, and remove the links from my html page(s). Or, the user is stuck with a dozen more files than they need, a bunch more network requests, and my app takes longer to load and to install, more data is used hosting, etc.

<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

This is a duplicate of #446.

@justingolden21
Copy link
Author

Hi @justingolden21, thanks for your feedback. I will quote reply your questions, starting with this one.

pwa-asset-generator doesn't support changing multiple manifest files at once. You need to run your command multiple times. I'm curious about your use case as I haven't seen such a scenario where multiple manifest files are provided, per locale. Do you expect your users to add your app to their home screens per locale?

Yeah, I will be serving my app in different languages, so the manifest for the correct locale is dynamically linked and automatically used

@onderceylan
Copy link
Collaborator

Hi @justingolden21, thanks for your feedback. I will quote reply your questions, starting with this one.

pwa-asset-generator doesn't support changing multiple manifest files at once. You need to run your command multiple times. I'm curious about your use case as I haven't seen such a scenario where multiple manifest files are provided, per locale. Do you expect your users to add your app to their home screens per locale?

Yeah, I will be serving my app in different languages, so the manifest for the correct locale is dynamically linked and automatically used

Have you had a chance to visit this issue and read the discussion over suggestions and possible roadblocks?

@justingolden21
Copy link
Author

Thank you so much : )

Checking that out rn

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants