MobileRead Forums - View Single Post - Calculating and inserting image width. A plugin?

slowsmile · 07-27-2017, 08:52 AM

At roger64's invitation I hope nobody minds if I chip in on this discussion.

In my CustomCleanerPLus plugin I also have an option to convert ebook images in pixels to percentage width format(vs screen width) to help normalize ebook images that are smaller than 100% screen width. In case people are wondering why you need to use use percentage format like this -- for example in Kindle conversions, the Kindle overrides tend to decimate or ruin screen sizes smaller than 100% screen width when they are defined in pixels. If you don't believe me then go over to the KDP forum -- we still get several complaints per week on average from people complaining about incorrect ebook image size when they convert their ebook to Kindle mobi. To avoid this problem you have to avoid the Kindle overrides by declaring your height and width values as an inline style within the <img> tag. Furthermore, you should also declare your screen width as a percentage of screen size to help maintain appropriate image dimensions across all the many ereader screen widths.

The code in my CustomCleanerPlugin is quite simple. When it finds a line with an <img> tag I use PIL to discover the image height and width in pixels. Then I convert just the width value to a percentage using this simple ballpark calculation:

image width/650 x 100

Then I extract the existing height and width in pixels from the existing code using bs4 and just insert an inline style declaration something like this:

<p class=imagestyle><img alt="" src="..Images/yadayada.jpg" style="width: 27%;height: auto; ">

I must also emphasize that my choice of 650 pixels in the above calculation is just a ballpark figure. That's because you will never be able to achieve the perfect image percentage width for every ereader out there because their screen widths will all be different. My own expectations of a person using my image conversion is that if they don't like the size of the ebook image after using my plugin then they should go into the image code in Sigil and increase or decrease the percentage width to their hearts content until they are satisfied. In other words, using a fixed screen width in your percentage width calculation will never give you the perfect screen width for your ebook image because the final image height and width will always vary according to the differences between my fixed ballpark figure(or any ballpark figure) and all the different ereader screen widths out there.

07-27-2017, 08:52 AM	#15
slowsmile Witchman Posts: 628 Karma: 788808 Join Date: May 2013 Location: Philippines Device: Android S5	At roger64's invitation I hope nobody minds if I chip in on this discussion. In my CustomCleanerPLus plugin I also have an option to convert ebook images in pixels to percentage width format(vs screen width) to help normalize ebook images that are smaller than 100% screen width. In case people are wondering why you need to use use percentage format like this -- for example in Kindle conversions, the Kindle overrides tend to decimate or ruin screen sizes smaller than 100% screen width when they are defined in pixels. If you don't believe me then go over to the KDP forum -- we still get several complaints per week on average from people complaining about incorrect ebook image size when they convert their ebook to Kindle mobi. To avoid this problem you have to avoid the Kindle overrides by declaring your height and width values as an inline style within the <img> tag. Furthermore, you should also declare your screen width as a percentage of screen size to help maintain appropriate image dimensions across all the many ereader screen widths. The code in my CustomCleanerPlugin is quite simple. When it finds a line with an <img> tag I use PIL to discover the image height and width in pixels. Then I convert just the width value to a percentage using this simple ballpark calculation: image width/650 x 100 Then I extract the existing height and width in pixels from the existing code using bs4 and just insert an inline style declaration something like this: <p class=imagestyle><img alt="" src="..Images/yadayada.jpg" style="width: 27%;height: auto; "> I must also emphasize that my choice of 650 pixels in the above calculation is just a ballpark figure. That's because you will never be able to achieve the perfect image percentage width for every ereader out there because their screen widths will all be different. My own expectations of a person using my image conversion is that if they don't like the size of the ebook image after using my plugin then they should go into the image code in Sigil and increase or decrease the percentage width to their hearts content until they are satisfied. In other words, using a fixed screen width in your percentage width calculation will never give you the perfect screen width for your ebook image because the final image height and width will always vary according to the differences between my fixed ballpark figure(or any ballpark figure) and all the different ereader screen widths out there. Last edited by slowsmile; 07-27-2017 at 09:19 AM.