Optimize images on export but NOT create 2x retina assets


(Nathan) #1

We rely on the ability to have smaller images automatically generated on export, but right now that feature seems bound together with exporting the 2x assets for retina displays. Due to folder size limitations, we don’t want to provide these additional files. However, there doesn’t seem to be a way to get optimized assets without also exporting larger graphics too. Am I missing something? I was just deleting the 2x files by hand, but discovered Windows doesn’t fall back to the normal sized images properly so they weren’t showing up at all.


#2

Can you explain why you don’t want to generate 2x images? (Trying to understand your use case)


(Nathan) #3

I thought I already did. We make digital ads. Many ad servers have very restrictive file size limitations. Painfully so. Including twice as many images, at twice the size, is simply not an option.

Currently, I have to export twice. The first time is to get the optimized assets, which I temporarily move to a safe location. Then I have to do it again with that option turned off so that the javascript is generated without references to them. After that, I delete the 2x images and replace the images with the first batch. This is tedious when you have half a dozen different ad sizes with multiple variations. Those numbers multiply very quickly.


(Jonathan Deutsch) #4

Thanks - right now the automatic optimization is a blunt tool for reducing size that makes tradeoffs for common cases vs. complexity of use. I’m definitely interested in supporting more ad-tech workflows and can see how optimizing but only exporting one variant would be useful. I’ve added this feedback to our feature tracker.

The real shame is that most ad networks count the file size based on the zip vs. realistic download scenarios.


(Nathan) #5

Thanks, can’t wait! It would be totally awesome for you guys to also look into integrating some kind of processor like TinyPNG or ImageOptim for reducing image file size. Maybe something like Photoshop’s “Save for Web” panel but even those results are still more bloated than necessary.


(Ken Heins) #6

I have always understood that Hype used ImageOptim as a default. ??? In any case i have copies of it on both my computers.


#7

We don’t do any image ‘smushing’ after export, but we’ve recommended Imageoptim as a pre-production step for a while.


(Nathan) #8

I come from an After Effects background, so the idea of having to prep a dozen different versions of every asset to create banner ads of different sizes is a major speedbump to our workflow. I’ll usually run it on the final exported assets folder before uploading to the ad network. TinyPNG seems to reduce the file size even better, but they don’t have a desktop application. They do, however, have a plugins for Photoshop and Wordpress. AND a developer API… :wink: Hint hint.


While we’re at it, am I missing the panel where you can set the master preference for optimizing, preload, etc for all assets in one place? Then setting those flags manually for individual images can override the global setting.


(Ken Heins) #9

Must have misinterpreted something I read.
In any case, ImageOptim typically, not always, cuts files sizes by 10-15% in my experience, with no bad effects.


(Nathan) #10

Yeah, depending on the image I’ve gotten up to 60% with TinyPNG.

What Hype does is make a version of the element at the largest size it appears in your document. So if you have a 1,000 pixel image and you never have it scaled more than 10%, Hype will export an asset at 100pixels.


(Jonathan Deutsch) #11

We’d definitely like to make use of tools to reduce png sizes on export. ImageOptim along with some of its components use a GPL license incompatible with Hype, but there are other options available.


#12

Lately, I haven’t been creating two different files. Instead, I just create a larger image and have it scale to a smaller box. I do this with the thumbnails on Photics.com. It’s a 300x176 in a 150x88. This works with Hype too. In Annoyed Tomatoes, I let the browser scale down the image for non-retina displays.


(Nathan) #13

Sure, but that still leaves you with an image that’s larger. When you’re trying to make the output as skinny as possible, you don’t want to be saving those extra pixels, just the actual size you need.


#14

Well, that’s just the state of the Internet. It’s high-definition graphics. If you don’t need “retina” quality graphics, you just use 1x. If you want to support retina screens, a 2x image can be put inside the element at 1x size. The browser then does the scaling. So, a retina display will see crisp graphics, while 1x will be tolerable… perhaps a bit jaggy.

The point is it’s a space savings. Instead of including a 1x image and a 2x image, you’re only including a 2x image.


#15

I’m using Hype to create banner ads and the ability to turn off the automatic 2x image creation would be HUGELY helpful. Here’s why: As pixeldrift points out, ad servers require very small maximum file sizes. That said, we still want our banner ads to look as good as possible, so I like to use images that are double-sized in order to look good on retina. I’m constantly aware of what file sizes I’m adding images at so that I don’t go over on the required maximums.

Then, I export my Hype project and my banner ad is suddenly waaay too large. Worse yet, we can’t simply delete one of the image versions. Because of this, Hype is actually forcing me to use lower resolution images (so that I know a second version is NOT created) when I could be using the single higher res version I originally created.

All us ad-tech people need is a toggle within Hype to allow us to turn off automatic variant image creation. Please add this feature soon!


(Jonathan Deutsch) #16

I didn’t see this specifically called out in the thread - note that you can turn this off by unchecking “Automatically optimize when exporting” in the Resource Library. This will let any images that you add pass through to the export without Hype doing anything.

(The tradeoff is that if you add a larger image than necessary, Hype won’t scale the image down to the maximum size used in the animation.)


#17

Ohh, that’s excellent! Exactly what we needed, I wasn’t aware of that ability. Thanks so much @jonathan


(Jon EJ) #18

I am deleting the @2x files all the time…

The can not be included in my .zip because of kB-restrictions.

I create banner ads.


(Nathan) #19

Just be careful, there’s a caveat I discovered doing that is in some browsers it won’t fall back to your standard size asset properly if you just simply delete the 2X. The code referencing them is still there and I think on Windows/IE specifically, you’ll just see an animation that has missing images. If you PM me I have notes and instructions on the process I found that worked for me.

One big thing that avoided the issue entirely was dropping my whole folder into Image Optim. For most ads that was enough to get the size down even with the 2X sizes still in there.


(Jon EJ) #20

How do I send PM? :stuck_out_tongue:
I am interested in your notes and instructions :slight_smile:
Maybe you could post them here? I am sure others would like to know as well :slight_smile: