It is my understanding that Hype loads everything for all breakpoints. This being the case, is it best to go with larger images and have them raster on the fly or to have duplicate images that are optimized for various breakpoints?
I’ve been using SVG images to get around all of the crazy image sizes… 1x, 2x, iPad, iPhone… one vector graphic can be resized to match all screen resolutions.
1 Like
If you’re concerned about the amount of image data needed to download for a document with responsive layouts, then you should use separate images for separate layouts, and uncheck ‘preload’ for images.
1 Like
Apparently embedded bitmaps are not supported in SVGs in Hype.
I am seeing issues with scaling - trying to stick to the dimensions of the SVG file.
Do you have any issues with older versions of iOS or with IE?
My major problem is with download times for relative sites. A tall, scrolling page can take a long time to load.
When all images are on one tall page, they all must download before you can see anything. Is there any way to use JS or some other means to add a timer to images so that you can have the images at the top load immediately so that you don’t have to wait to see something?
Yes, I have seen cross-browser issues with SVG. When I use SVG as a background image in an element, the image doesn't always scale proportionally. It depends on the browser. On the projects that I've been working on, this isn't a major issue.
SVG is a bit bleeding edge. For web projects, it's tough to fix the problems. For the app projects, focusing on just iOS is easier.
But as mentioned in another thread, I think the right way to fix this problem is to leverage the matter.js "view" option. Unfortunately, Tumult currently has the API on lockdown.
I created the SVG (trying alternate approaches) using Illustrator and then output multiple versions. I had no problem with embedded fonts or vector art, but Hype ignored any embedded bitmaps that I placed in the Illustrator file.
We’ve been using SVGs for quite a few years in an interactive design feature on our website, but I’ve never used it within Hype.
There was a ton of things to loathe about Flash (I could list quite a few) but the ability to use scalable vectors along with bitmaps was nice (even if Flash turned the vectors into weird critters on output).
I imagine Hype 8 or 9 being a highly vector-friendly app, with preloaders and all sorts of stuff. Software development takes patience.
@TYancy, Very valid point when when rechecking the finished hype document for optimization when dealing with loading times/speed for the different layouts wether it would be for Desktop/ Mobile Phone and/ or tablet. @Daniel, when rechecking the finished Hype document, with multiple layouts I would like to know what is are best practices in regards to optimization/ loading times?
I looked at your Tips and Tricks section, here in the forum, and I didn’t really find anything.
Tools used for checking for optimization:
Google Chrome>View>Developer>Developer Tools/ Options, eg… No Throttling/ 3G/ etc…
Apple Safari>Develop>Show Web Inspector> Timelines/ etc…
Thx,
techgiant2000, Hype Professional 3.0 User
This topic is our guide to optimizing projects: Decreasing load times and optimizing performance: Preparing a Large project in Hype.
By default, Hype will preload all images and only begin displaying your document after all images have been loaded. You can control this behavior on a per-image basis by disabling the Preload option that's presented in your document's Resource Library when an image is selected.
1 Like
Thanks. When using Hype to create a responsive website, my solution is to create a stack of inline iFrames with zero margins, using a standard page design app. The top two items are single-scene and with minimal complexity, with the more elaborate multi-scene “modules” being below the bottom edge of the browser window. This allows the top couple of modules to load quickly while the lower modules load as they will.
I’m curious about this also. I’m also interested in whether there is some sort of progressive download functionality (or whether it can be added). Is it possible to have two or three different versions of the same graphic, at different resolutions, and have the smallest one load first to avoid the user seeing any blank pages?
With unchecking the preload button on the items on my resources panel I saw a significant difference on loading times (much faster). Thanks @Daniel!
1 Like
My understanding is that that only applies to scenes other than the first scene. In any case, I’ve got a column of seven inline iFrames with Hype animations, some have multiple scenes and some do not. By making the top few load quickly and by making them interesting enough to delay scrolling for a few seconds, this solves some problems.
A frequently requested feature is the ability to directly control loads and preloads totally a la carte (e.g., preload specific images, trigger other loads by action keyframes, etc.). The latter would be great for single-scene image galleries, e.g., load the first image along with the next two and the last two, the click on a forward or backward button to trigger the loading of nearby offscreen images. The same thing could work with audio files, etc. This is a longstanding Director / Flash capability that, no doubt, will one day make it into Hype. I’m not expecting this to happen soon, but I will certainly welcome it when it arrives.
1 Like
If you can come up with something lightweight but interesting for the first scene that will keep the viewer interested (such as overlapping animations of text at varying sizes), then figure out the load time for the second scene (having preloads turned off for scene two objects), then you can transition to scene two via an action keyframe at that point in time.
Another trick: If you uncheck ‘preload’ for all images, you can still preload images for the next scene by simply adding them outside the scene area of the currently-visible scene.
5 Likes