In the previous posts we looked at programs used in the ePub conversion adjusting colors, headings and page breaks, dealing with the Table of Contents, and creating links.




The next major hurdle was dealing with the images. The export to ePub, for whatever reason, degraded the image quality. Many of the larger images, especially, became very blurry and nearly unusable.

Creating Flow with OmniFocus has about 550 images, with well over 1000 used in the process. I had these saved in a master folder further broken down in a semi-organized fashion by other folders in the Finder. The realization that each one that made it into the text would need finding and replacing was not fun.

The following was my process; there may well be a better way to do it, and if you have one to suggest, please do let me know.


The Image Replacement Process


In order to make the replacements, I needed to have access to the original images.

Images were created along several paths. The most direct was a simple screenshot using Shift-Command-4. If they required modification of any sort though, they would go through ImageWell, OmniGraffle, or LineForm.

Taking screenshots in Snow Leapord provides the date and time of the shot in the title making each image title unique. This proved invaluable.
In addition, Pages retains the title of the original image. The title is presented in the Pages inspector (Option-Command-i) under the Metrics tab:



The title could then be selected, copied, and pasted into Spotlight which could then call the original image from the Finder.



I now had a means of sifting all images to finding the original.

When viewed in Sigil, the code for an image might be something like:


<img src=”../Images/image-323.png” />


The corresponding image is saved in the Images folder on the left hand column. Sigil does not allow a direct replacement of an image. Instead, the original needs to be deleted and a new one set in its place.

To replace the image, I would open it in the process outlined above, then select Save as … and name it the same as what its translation in the ePub document adding the letter b. I.e. In this case, I named it image-323b.png.

Each file would then be added to the folder:



and the line of code would be changed correspondingly:


<img src=“../Images/image-323b.png” />


This would let me compare the original and new one easily. When I was satisfied with the results, I could then delete the original image. One could, I suppose, leave the original file in the folder, but over the course of 500+ images, this would significantly and needlessly increase the resulting ePub file size.




There was definitely more to this process and adjusting of CSS to making the format look appropriate, but I think these major bits highlight some of the hurdles found in the process.  Hopefully this helps some of you enterprising independent authors out there.