Tricky maths problem when resizing images

Question

I have an image that I want to be watermarked to the bottom right section of other images. The dimensions of the watermark image are 179 width, 39 height.

Now what if I have another image whose dimensions are 150 width, 20 height? If we tried to watermark it using the original image, it would obviously be too large and the image itself would be masked completely by the watermark image, right?

So how can I determine a smaller width and height to which I will resize the watermark image, something much less than 150 width, 20 height, so that it will appear still as a watermark and wont mask the image completely?

Answer 1

I would probably scale the watermark to 20% of the image being watermarked, or 179x39, whichever is smallest.

Answer 2

You need to pick a maximum percentage of height and width of the smaller image that you can allow the watermark to be, then scale watermark image to the smaller of these two maximum values. Your results will vary based on whether the target image is taller than it is wide, or vice versa.

For example, if you want the watermark to be no more than 25% of the height and no more than 50% of the width of the target image, you can see how big the watermark should be if you scaled it to either dimension.

Scaling to 50% of the width would mean the watermark would be 75 x 16 pixels, which is too tall (based on the percentages I selected arbitrarily).

(75 / 179) * 39 = 16

Scaling to 25% of the height would mean a watermark of 22 x 5.

(5 / 39) * 150 = 19

If the dimensions end up being larger than the original watermark, it's up to you whether or not to scale the watermark up. Image quality degrades much faster when increasing the size of an image, compared to decreasing its size by the same factor.

Answer 3

First out, I recommend you to generate a set of watermark images of different sizes instead of resizing 'on the fly'.

Below I have outlined a workflow of how to watermark images dynamically on a website:

Design a good watermark

First of all, try to design the watermark with a transparent background. This will greatly reduce the risk of cover up essential parts of the target image. This can be done by using the gif or (preferably) the png imagefile format. Just make sure that the transparent watermark works well both on light and dark backgrounds.

Also take into account how to best design the watermark that works both for portrait and landscape style images and images with awkward aspect ratios. You should consider to make two versions -- one for wide images and one for tall images. For the latter type, you could rotate the watermark 90 degrees or, if the watermark consists of text, you might want to split the text into two or more lines.

Pre-render the watermark in several different sizes

So, don't dynamically resize the watermark, instead I recommend you to render a set of watermark images with different sizes. This only has to be done once and it will greatly enhance the clarity and/or legibility of the watermark (especially for smaller target images).

Depending of how different the images will be on the web page, you might need a larger or smaller number of sizes. This is a design choice that you will have to make, but I think you could get away with only two or three different sizes.

Apply the watermark

This will happen dynamically on the server side (in your php-file). First find out the dimensions of the target image by using the function getimagesize. With this information at hand, you'll have to decide which version of the watermark to use based on the size, aspect ratio and orientation. E.g.

if ( $width > $height ) {$useLandscapeWatermark=true;}
if ( $width > 100 && $width < 400 ) {$watermarkSize=2;}

etc.

Finally, to apply the watermark I recommend you to look at the gd library. This is a powerful library that can do many neat trix, among others merging two images. An alternative is ImageMagic.

Good luck!