Retina @3x - how to do it?

Exporting & Previewing Mobile Apps
1

I'm probably a silly girl because I don't understand how to add a Retina @3x PNG file?
Is it even possible?

2

It doesn't look like Hype supports @3x images. You could manually add the HTML code to manually place the images. That's bit complicated though, so I usually don't bother.

I'm not sure if it's the srcset attribute in the img tag or something else. I think the sizes attribute is involved too, but again, I usually skip this.

Here's why…

That's a rather long article. @3x images could be rather large too. So, I've been avoiding the problem by using SVG when appropriate.

2 Likes
3

This is correct, unfortunately. If you want to use @3x images, you would need to bring them into the resources library (the @3x will get its own group), uncheck "Automatically optimize when exporting" from all entries, and then craft your own HTML to use them by referencing the image as "${resourcesFolderName}/imageName@3x.png".

We've had the todo item on our list to support @3x images ever since the iPhone Plus came out in 2014, but we've seen such little demand for it that we haven't implemented it. It seems @2x or SVGs are usually sufficient. Do you mind sharing more of your use case for @3x as this might help determine our priority for it? Thanks!

1 Like
4

Thanks!

Can you describe it in more detail? please.
I created 3 files imageName.png, imageName@2x.png, imageName@3x.png
Do i need to add "${resourcesFolderName}/imageName@3x.png" to the html head in the Hype, or after export to html file? How to do it right?

This is the client's requirement. He needs this for approval in the app store.
I think html5 banners will be embedded in the app.

1 Like
5

${resourcesFolderName}/imageName@3x.png is how you would reference an image. Generally the flow would be to create an unstyled retangle element, and then choose 'Edit > Edit Element's Inner HTML' and use the picture/srcset code that @photics referred to:

That said, if the images are loading locally, and performance isn't too big of a problem, it might be easier to just include a single @3x image and use Hype normally. This way you will not need to worry about including @1x and @2x variants. The browser will automatically scale the image to the correct resolution. Hype has slots for @1x and @2x variants so that it can load whichever one is optimal. If you only include a single image, it will always load that. You'll just need to scale it in Hype to the correct 1/3 size, and also uncheck "Automatically optimize when exporting" in the resources library so it doesn't automatically scale things down.

Gotchya. While app icons definitely need @3x variants, we have not heard of any apps being rejected for not otherwise having @3x assets.

1 Like
6

I thought about suggesting that, as I do that with @2x, but @3x is just too much. That starts to mess with the web.dev score, especially if there are a lot of images. But if this is an app, eh, it could work.

That was surprising to me too. Heh, and I have plenty of experience with app rejections. :smile:

1 Like
7

Thank you all

I thought so too. But the technical task that was sent to me says - @1x @2x @3x

I can't argue with the person who pays me. Maybe he sends the same technical requirements to everyone. :wink: I will ask tomorrow.

8

I do it all the time. :laughing:

It's not that I like to argue, but facts are facts. If the reason is to provide the sharpest graphics ever, that's cool. If the reason is Apple will reject the app, eh. If that's the logic, then I should stop making apps immediately. Every time I send an app for review, I have no idea if it's going to be rejected. :man_facepalming:t2:

1 Like
9

isn't it as easy as using Hypes resourceLoad-Event. Say you enabled Hypes imageoptimisation and have a '@2x'-file in the assets. just add a further '@3x'-file after export and run those lines from the headsection:

	<script>
	
	function HypeResourceLoad(hypeDocument, element, event) {

	let cssPixelRatio = window.devicePixelRatio;
	//change the url by replacing the @2x-string
	if(cssPixelRatio >= 3){
	let newUrl = event.url.replace(/@2x/, '@3x');
	return newUrl;
	}
	
	return false
	}

if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback":HypeResourceLoad});

	</script>
3 Likes
10

:rofl:

In this project, I am just a designer, the project manager sets tasks for me. I have never made applications myself, so I do not know how applications are accepted into the store. If I start arguing it will take a very long time.

wow
:star_struck:
Thank you very much. I myself would never have figured it out.

11

Whoa, excellent idea!