- View Offline
- Adding alternate text for screen readers
- Mapping styles to export tags for HTML exports
- Adding multimedia for iBook output
- Dragging and dropping anchored objects
- Working with linked stories
- Using the Overlay Creator
- Creating a panorama for an iPad publication
Skill Level Intermediate
In previous versions of InDesign, when you exported your content to HTML or EPUB you had little control over your images that basically, all export the same. If you wanted some of them treated differently, you had to use Photoshop to manually save each of the photos and then relink it back to the exported code. Or if you wanted to control the alignment or spacing of the images, you had to jump headfirst into CSS editing. Thankfully, there is a new feature called Object Export Options that lets you fine-tune your export of each object in the layout before you export.
To apply custom Object Export Options, I'm just going to select this object or image inside my layout and go to Object > Object Export Options. Inside my Export Options, I can set my alternate text, which we talked about in a previous video. I can also apply a specific PDF tag. Now in this case, I don't need to apply anything to this image. But if this was a color bar or a rule or some element that didn't really have a text-based description, I could set it as an artifact. That way, a screen reader inside Acrobat would ignore it. But we're going to deal with HTML and EPUB options.
And what I want to do is set a Custom Rasterization; that means this specific image will have a custom setting upon export. My first option is for Size. I can choose either a Fixed or Relative to Page Width size. If I choose a Fixed Size, it will never change. If my browser window changes its width, up or down or side to side, it will always stay the same size no matter what. As opposed to Relative to Page Width, that means if a web browser changes its width, the image will scale up or down. For my image Formats, I've got JPEG or GIF and a new format PNG , which is finally supported by InDesign CS5.5.
JPEG is best suited for images, GIF is good for areas of flat color and PNG is used for images with transparency. For now, I'm going to leave it at JPEG. For my Resolution, I've got a variety of resolutions. In previous versions, you could only choose 72. 72 is the default for Web. I can also choose 96, which is a good Windows screen resolution, 150 is an e-book standard, and 300 is print quality, or if you have an iPhone 4, retina display. For this image, I'm going to leave it at 300. My quality lets me choose anywhere from Low to Maximum, and as you know Low will be a smaller file size but the quality will suffer, and Maximum will look great but you can't have a pretty large file.
For this case, I'm going to choose Medium. The difference between Medium and High can be as much as 200K at times. For my Method, I've got the choice between Progressive and Baseline. Progressive lets me see the image as it downloads. With Baseline, you don't see anything at all until the image is done downloading. So if you're going to be using the image online, Progressive is a good choice. Underneath, I can set Custom Image Alignment and Spacing. I can set Left, Center, or Right. For this image, I'll choose Center. I can set the spacing a little bit before and a little bit after, and I can choose if I want an Ems or Pixels.
I can also set Page Breaks Before or After an image or even both. In this case, I'm not going to use that. If I'm going to set some more settings and images, I don't have to close this dialog. I'm just going to move it over here like a big panel and select this image. For this image, I'm also going to keep it as a JPEG, but we'll leave it Fixed, and its Resolution to be 72. The rest of the options will be fine. Moving down to the next page we have this image, which we're going to set as a JPEG, and we'll put it at 150. And this image, because it has a transparency effect, it's going to be best suited to be a PNG.
It's very high quality and it's great for transparency and effects. We'll set its Resolution to 150. And our final image, this one makes sense to be a GIF, because it has a lot of areas of flat color and it's kind of like a logo. We'll set its Resolution to 96. For the GIF options, I can choose Adaptive as well as these other legacy formats, but I don't recommend using these anymore. Adaptive is the most modern way to deal with it, and we'll leave it at Interlace so we can see the image as it downloads. In addition to images, we can also set Custom Rasterization setting to any object.
For example, this caption; if I zoom into this caption, I'm first going to select this text to copy it to the clipboard. With this frame selected, I'm going to go to Object > Object Export Options. If I decide I like the way this looks and I want to look exactly like this upon export, I can rasterize it. So I'm going to Rasterize it as a GIF at 150. Unfortunately, if you rasterize it, a screen reader device wouldn't be able to understand the content of that image, and Google wouldn't be able to index the content either. So we're going to go over to Alt Text and I'm going to choose the Alt Source as Custom, and I can paste in the contents of that frame.
Now that I've got this finished, let's export this to HTML and take a look at it. We'll go to File > Export. We'll throw this on our Desktop and we'll call this object-export. We'll choose the Format HTML and click Save. In Export, we want make sure that we'll have the same ordering as the Article panel. We want to view it After Exporting. Under Image, we want to check Preserve Appearance from Layout. This applies any effects that you've done inside the layout to the image.
For example, drop shadows or rounded corners. In previous versions of InDesign, this used to be called formatted. The rest of these controls I'm going to leave alone. We'll talk about these in the next movie. Under Advanced, we'll leave it set as No CSS and we'll click OK. Now in Export, we're going to see this gigantic image. But remember, this top image was set to Relative to Page Width. That means, if I change the width of the browser, the image will scale up and down. This could be useful if you're dealing with an e-book, where you might be looking at the book landscape and you could turn it to portrait.
That way, the image will scale accordingly with the layout. As I scroll down to the bottom, we'll see here is the image with the formatted appearance from the layout. The drop shadow and the rounded corners came in. That's because I've selected option Preserve from Layout. Taking the time to customize each objects export will create a better experience for everyone that interacts with your document. By choosing the proper options for each image, you'll be able to strike the correct balance between quality and file size.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.