Optimize images on export but NOT create 2x retina assets

Traditional taxi:

  • You need to call and sometimes to wait cause you're in a cue.
  • “It will arrive between 5 and 10/15 minutes”. In fact you don't know why.
  • You don't know how much will it cost.
  • You need to pay cash.

Uber:

  • There is a map where you see all the taxis' position in realtime.
  • You know when it will arrive and when you'll reach your destination.
  • You know the price in advance.
  • You don't need cash, you just get out and it's paid.

It's a question if UX/UI guys. One click. We love the one-click solutions, not the “do it our way but then you need to apply post-process scripts etc”.

Designers don't want to do that. They want a solution that works under the click of a mouse.

– Developers are excited by the fact that they write code and a rectangle is magically drawn on the screen. Then they write some additional code to make the rectangle red.
– A designer selects the Rectangle tool and draws it. Want to make it red? Click on the red swatch.

If now, in Hype, designers need to run scripts written by developers to run a post-task process each time they send a proof or an update to the client, they will just not understand why there is no feature to meet their need.

Welll. I supposed this would do the replace bit in the export script.
Cannot remember if png's are sometimes converted to jpgs as x2 ?.
My tests worked though.. you probably have a more refined way of doing it..

insert_at_head_end = """
	
	
     <script>
     
     
     function resourceLoad(hypeDocument, element, event) {
     
     if (event.url.includes('2x.')){
     
     var name = event.url.replace('_2x.','.');
     
     return   name
     }
     
     
     }
     
     if("HYPE_eventListeners" in window === false) window.HYPE_eventListeners = Array();
     
     window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback": resourceLoad});
     </script>
"""
3 Likes

I'm a bit more confused now - these parse identically to me?

Based on what you've been saying, I'm a little curious if you have tried an Export Script? The entire point is to automate workflows that required a lot of steps to a single click. It adds new UI to make options for special use cases available.

I do not see any extra difficulty in choosing File > Export as HTML5 > Folder… versus the essentially same File > Export as HTML5 > AdWords….

It is true they need to be installed — but the Uber app needs to be installed on your iPhone first too :). We provide installers that even automate the installation process.

Regardless, I have no qualms about an option to have a non-retina export in Hype. However, it would not be exposed via normal UI (maybe in Advanced Export), as this is not appropriate for the vast majority of documents created with Hype. Balancing clean usable tools against a bevy of niche cases is difficult - Export Scripts were created to specifically add targeted functionality for those who need it and not show unnecessary UI for those who don't.

2 Likes

I'm not a developer.
My clients are not developers, they are designers.
We don't know how to write scripts.

But if the AdWords script includes an @2x version of the images used in the ad, then it's a mistake because of the 150 Kb limit. There should be no @2x version in the exported folder/zip.

Again, people creating ads with Hype understand my request.

so this is the next request and it makes more sense to me:
you (the designer) like to have an Hype-exportscript that handles AdWords-Exports in a way that the @2x-files would not appear

Why not but ads could not be the only case where we would like to have assets being the smallest possible.

just to mention: tools like imageOptim have a much better compression for images than Hype does

It's amazing that I need to make a video to explain why it's an issue and why designers waste time optimising manually in Photoshop a source image and creating a version for each size of an ad.
They could just
– use one source, crop/resize all instances of the image at will on all the sizes,
– enable the optimisation,
– and disable an option generating @2x versions of the images so only the standard version is exported.

everybody got your point (even before the video :wink: )

possible solutions:

  • Hype creates an extra option in its UI
  • an exportscript is used that handles it
  • just add @MarkHuntes script to the ads an delete the @2x-file in the export

//////
if it comes to a condition for best optimized images i'd never rely on photoshop (you did not even use the special webexport for PS-Optimization) or hype alone.
as mentioned imageOptim will reduce the size much better and in very good quality.

////
cropping in Hype does not exist. so it'll never export a cropped image

2 Likes

Thank you but I didn't use it because he didn't explain what to do.

I think I understood I needed to put the code in the Head of the document but he didn't explain that we can then freely remove the @2x versions in the exported folder.

Problem with that technique:

  1. We need to unzip the folder.
  2. Reach the @2x file and delete it.
  3. Rezip the folder.
    Doing that for all sizes? Not efficient.

That's it.

As @h_classen says,
Pretty sure we understood what you wanted way back in the thread.

You did NOT need to make a video!. to be honest you are inmo bordering on insulting.

And you dont need to keep explaining... and maybe try to understand that it has been taken on board.

This community does not always leave it at ' ok understood', we often try and give work arounds in the mean time

The code I actually posted would work in a Hype function. But was actually intended to go in the export script it was written as as a proof of concept while I had a spare minute and is half the code possibly needed.
The second half would be for the export script to auto remove the 2x files. This may come if I or someone else chips in.
Which would give you a workaround which would not have you manually doing the full workflow.

1 Like

The whole point of export script is to put the individual pipeline and workflow requirements into external places. I have seen Hype in very custom setups and workflows at this point, so people are using Hype as a drop in IDE for individual production chains. Hence, every idea and change surely needs to be considered carefully as not everyone is using Hype the same way. Not judging or referencing this feature request in particular. In general with an upcoming package :package: approach this will become much more modular, but it still will require installing stuff. But as a designer one doesn’t need to understand what is installed as most anyway don’t understand the code that is behind their daily apps. Installing stuff is only necessary on the machine building the animation and clients don’t have to install anything apart from a browser :stuck_out_tongue_winking_eye:

2 Likes

Topic open in January 2017, 4 years ago.

Yes it was and in 2017 is was made clear that it was understood.

I am specifically talking about your attempts to explain again and again..

There is nothing wrong with refreshing a request for a feature if it appears there is no movement.
It often does illicite a response from the Hype team to responed one way or another.

And from my perspective you have had that in buckets.

Please lets take a step back and see if someone picks up on the coding for the export script.
If not from the community then at some point and in some form possibly from the Hype Team.
And note I do not speak for them but I have read the response you have had.

1 Like

added @MarkHuntes snippet to the adWords and excluded placing the '2x'-file to the zip.
may work, not well tested ... (just in Desktopsafari responsive tests ...)
AdWords_nonRetina.hype-export.py.zip (3.9 KB)

please avoid having the '2x.' within a filename you'll like ti include though :wink:

2 Likes

Thank you!

On my side, it works and it's a major step forward in making Hype a great tool to produce Google Ads.

Can this be shared?

1 Like

oh no, please not those heavily tears of joy :wink:

at own risk ... i'd say

2 Likes