Auto resize Huge images for [IMG] bbcode

[007pig]

I find lots of people are looking for [IMG] hack. So i share mine now.

The hack modifies only a few lines and the images are resized automaticly by javascript.

Open functions_bbcodeparse.php

Search:
function handle_bbcode_img_match($link)
{
$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

return '<img src="' . $link . '" border="0" alt="" />';
}

Replace with:
function handle_bbcode_img_match($link)
{
global $vboptions;

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

if ($vboptions['legacypostbit'])
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(this.width>screen.width-255) {this.width=screen.width-255;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
else
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(this.width>screen.width-80) {this.width=screen.width-80;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
}

All done. Enjoy!

[???`S?LV?R???`]

nice.

[Symbian.info]

Would be a great hack if it works.. pics are gone on he front of vBadvanced CMPS.. Small pics are still there.. In the message it self it is still there, but still big size..

But how can I adjust the limits? Wat is a big picture??

It would be great if it works! To often members post to big pics of other webistes...

[007pig]

the key is
onload="if(this.width>screen.width-255) {this.width=screen.width-255;this.alt='Full View';}"

you can adjust the number 255 to what you like.
increasing it makes your pics smaller.

[duncan99]

Installed, thanks for the hack.

[SVTBlackLight01]

Has anyone tried this with the WYSIYG editor. It doesn't seem to be compatible as it posts part of the javascript.

[007pig]

Has anyone tried this with the WYSIYG editor. It doesn't seem to be compatible as it posts part of the javascript.
i have tested in WYSIWYG without problem.

note:
onload="if(this.width>screen.width-255)

you shouldn't put
javascript:
before "if"

[SVTBlackLight01]

Here is an example:

https://vborg.vbsupport.ru/

[007pig]

Here is an example:

https://vborg.vbsupport.ru/
how do you post images?
select - copy - paste?

if you paste a image with javascript code, it will appear like that. for example, you paste an image which is already autoresized.

Use [img] code instead.

[HiDeo]

Thanks for the hack

[SVTBlackLight01]

Actually in this case, all I did was resaved an existing post that already had images using the [img] tags.

[YLP1]

I installed this mod but pics in the forums didn't resize. I read in one of the posts to increase the 255 to force the graphic added to be smaller but that didn't work....

Does this mod only work for new posts after the mod was installed?

[007pig]

I installed this mod but pics in the forums didn't resize. I read in one of the posts to increase the 255 to force the graphic added to be smaller but that didn't work....

Does this mod only work for new posts after the mod was installed?
yes. or you can clear post cache.

[PIF]

I can't get this working, does this hack not work on version 3.0 ?

[y2krazy]

I was going to install this, but because you cannot specify a specific width to limit the re-sized images to(as in, what width the re-sizing should begin at), I choose to edit this hack out and not use it any longer. If you can get it to be able to specify a given width, and not just "255" and such, that would be a lot easier, and a lot more understandable. Thanks.

[Tradjick]

Yes, you can specify a width. For my needs i chose "500px"

Here?s the function:

function handle_bbcode_img_match($link)
{
global $vboptions;
$link = strip_smilies(str_replace('\\"', '"', $link));
// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);
if ($vboptions['legacypostbit'])
{
return '<a href=' . $link . ' target="_self"><img src="' . $link . '" onload="if(this.width>500) {this.width=500;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="2" border-style="risen"></a>';
}
else
{
return '<a href=' . $link . ' target="_self"><img src="' . $link . '" onload="if(this.width>650) {this.width=650;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
}


Many thanks to the author! I love it!

PS: Isn?t there a way of copying code from UEdit to vB so that one hasn?t got to edit every line break?

[Tradjick]

Is there a way that images that haven´t been resized don´t appear as a link?

[Niak]

hi all
very nice hack thx a lot

[Skyline_GT]

how do you fix this?
http://www.gamerzplanet.net/forums/showthread.php?p=272295#post272295

[ShaanuJaanu]

nope..it doesnt resize anything.. :(

[Tradjick]

nope..it doesnt resize anything.. :(
Sometimes yes, sometimes not. This sucks indeed :(

[mtha]

Sometimes yes, sometimes not. This sucks indeed :( yeah, in IE, it sometimes works,sometime not.

For the same image, same page, if you refresh, its on and off :D


.... seems like when you click on the image (to see full size), the image's displayed as fullsize.

[mtha]

Here is an example:

http://www.modernengineuity.com/gallery/data/3025/1img.jpg
hey, try to use
if(screen.width-255 < this.width)

instead of
if(this.width>screen.width-255)
in the condition, that would work:

function handle_bbcode_img_match($link)
{
global $vboptions;

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

if ($vboptions['legacypostbit'])
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(screen.width-255 < this.width) {this.width=screen.width-255;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
else
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(screen.width-80 < this.width) {this.width=screen.width-80;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
}

[Tradjick]

Does it work then, mtha? Btw, in Opera it?s the same.

I once tried to make a condition that, if the picture is in a size that fits the forum, it doesn?t display like a link. But i suck at coding :(

[mtha]

Does it work then, mtha? Btw, in Opera it?s the same.
why dont you try it and see if it works? It works for me, but I didnt do a full test for it.

It does work for Opera too.

[Skyline_GT]

function handle_bbcode_img_match($link)
{
global $vboptions;

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

if ($vboptions['legacypostbit'])
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(screen.width-255 < this.width) {this.width=screen.width-255;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
else
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(screen.width-80 < this.width) {this.width=screen.width-80;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';" border="0"></a>';
}
}

Great, this work

[Bison]

I adjusted the size number to 1,000 and the images still don't decrease. The only good thing about this hack is that you can view the images in another window. I'd like for these off-site images to show up as resizeable thumbnails, and open up to show the original size.

That's what I thought this hack would do ...

[Tradjick]

This is the best hack i found so far: http://www.vbulletin-germany.com/forum/showthread.php?t=13527

[Bison]

This is the best hack i found so far: http://www.vbulletin-germany.com/forum/showthread.php?t=13527

You have to register the forum before you can download the hack, and I cannot speak one good line of German! :o

I wish someone could fix this one, I really need something that works!

[SVTBlackLight01]

I adjusted the size number to 1,000 and the images still don't decrease. The only good thing about this hack is that you can view the images in another window. I'd like for these off-site images to show up as resizeable thumbnails, and open up to show the original size.

That's what I thought this hack would do ...

It's not doing anything for me either. :ermm:

[Bison]

This one works great!!!

https://vborg.vbsupport.ru/showthread.php?t=67743

[msimplay]

I like this hack a lot but it causes funny things when used with

https://vborg.vbsupport.ru/showthread.php?t=73040 the geek gallery popup hack

any chance to make it work with it ?

[hollyboy]

what's the difference with this hack?
https://vborg.vbsupport.ru/showthread.php?t=67743&highlight=image+resize

[Howdy]

Awesome hack, thanks!

[Onkel_Tom]

clicked install !
works fine, thanks ;)

[buro9]

what's the difference with this hack?
https://vborg.vbsupport.ru/showthread.php?t=67743&highlight=image+resize

This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.

This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.

That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.

May I make a suggestion about this hack though? Perhaps another method?

Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?

Example... Put this in your headinclude... and don't bother hacking any vBulletin files:

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>

mw = maximum width in pixels.
mh = maximum height in pixels.

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.

[Onkel_Tom]

This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.

This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.

That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.

May I make a suggestion about this hack though? Perhaps another method?

Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?

Example... Put this in your headinclude... and don't bother hacking any vBulletin files:

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>

mw = maximum width in pixels.
mh = maximum height in pixels.

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.
This version works better for me and doesn't have problem with the WYSIWYG Editor.
Is there a chance to add a link in the resized picture to open the original version and size in a new window?

[ChrisLM2001]

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.

Just tried it out and it works as intended in the WYSIWYG text editor (edited a post and pasted the image code in, and it works on those as well). Fast too.

Ahhhhhh, finally no more table breaks. :)

Chris

[buro9]

This version works better for me and doesn't have problem with the WYSIWYG Editor.
Is there a chance to add a link in the resized picture to open the original version and size in a new window?

Yup, that's not too hard... but you know what would happen ;)

You either:
1) Add javascript onclick to each image... which breaks the WYSIWYG again.
or
2) You wrap an A element around the image, but it's messy and might not work cross browser.

I can look into it though, I have some old DOM tree javascript lying around and I might already have a method to convert a child element to a grandchild by creating a new parent.

If I do have that and it doesn't affect image placement in the post I'll show an example of that too.

[artonex]

hey i had cinq install this hack on http://www.talkweed.com/forums/ but its not working, do you know why ?

[SVTBlackLight01]

This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.

This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.

That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.

May I make a suggestion about this hack though? Perhaps another method?

Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?

Example... Put this in your headinclude... and don't bother hacking any vBulletin files:

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>

mw = maximum width in pixels.
mh = maximum height in pixels.

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.

I tried this method, and it works great. :D A great example can be found on this page (http://www.modernengineuity.com/forums/showthread.php?t=1155). Using the server-side resizing hack. This page would just lock up.

Also, I didn't want it to affect other parts of the site, so I used this conditional:<if condition="THIS_SCRIPT == 'showthread'">
</if>

Thanks, buro9!

[lefthome]

Works great in 3.07 but I installed the headinclude...

[mustang_lex]

function handle_bbcode_img_match($link)
{
global $vboptions;

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

if ($vboptions['legacypostbit'])
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(this.width>screen.width-900)

{this.width=screen.width-900;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';"

border="0"></a>';
}
else
{
return '<a href=' . $link . ' target="_blank"><img src="' . $link . '" onload="if(this.width>screen.width-400)

{this.width=screen.width-400;this.alt=\'Full View\';}" onmouseover="if(this.alt) this.style.cursor=\'hand\';"

border="0"></a>';
}
}



I had to make my figures much higher to work, but it does work. Is there a way to add text to the bottom of the pic if its too big saying "Picture has been resized, click for full size pic" . just so some will know its been resized?

Thank you and cool hack btw :squareeyed:

[Allan]

Thanks, click install ;)

[mustang_lex]

The only option I have is uninstall???

[MrD]

Hi,
This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.

This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.

That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.

May I make a suggestion about this hack though? Perhaps another method?

Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?

Example... Put this in your headinclude... and don't bother hacking any vBulletin files:

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>

mw = maximum width in pixels.
mh = maximum height in pixels.

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.


i put it on my headinclude, but the script resized my logo too :(

[buro9]

Hi,



i put it on my headinclude, but the script resized my logo too :(
Well it's just JavaScript :)

Within the for () {} loop, just add an exclusion... figure out what identifies your logo and if that is matched, skip the resize.

[LuBi]

SVTBlackLight01

Which image rezie script did you use? I saw you linked to one in the OTHER thread and it reseized then onclick made a popup with original image. Did you modify this buro9's code further or switch to the other mod?

http://www.modernengineuity.com/forums/showthread.php?t=31

buro9

would it be possible to have this code generate the resized image as a link trageted to _blank in a new window with the original image in full size?

i install buro9's scrip with SVTBlackLight01 conditional and it works fine, but i'd like the option to click the image for the original.

[buro9]

buro9

would it be possible to have this code generate the resized image as a link trageted to _blank in a new window with the original image in full size?

i install buro9's scrip with SVTBlackLight01 conditional and it works fine, but i'd like the option to click the image for the original.

It would be possible to add that link, but it would have an undesired effect.

What would happen is that when someone quoted or edited a post that had a large image, the additional code that I would have added via JavaScript would dribble through to the editor window or be stripped... this is according to vBulletin's internal stuff that basically reduces to URL tags (no knowledge of target), etc.

What I think I'm going to aim for after 3.5 is released is something far more nefarious.

If an image is detected, I'll resize it on the screen, but I'll also fire off an AJAX request to a custom web service that will edit the post and convert the offending IMG tag to a URL tag ;) The image gets stripped and the link will appear instead.

Far more evil, far more effective... people WILL learn to reduce the image and attach if they want it to be visible ;)

[SVTBlackLight01]

SVTBlackLight01

Which image rezie script did you use? I saw you linked to one in the OTHER thread and it reseized then onclick made a popup with original image. Did you modify this buro9's code further or switch to the other mod?

http://www.modernengineuity.com/forums/showthread.php?t=31

In that thread, what is posted there now is just smaller pics linked to the full size pics (from the gallery). I'm not using the other hack any more. It was causing pages with lots of pictures to completely lock up.

[m0nde]

nope..it doesnt resize anything.. :(It didn't do anything for me either. But Tradjick's modification (https://vborg.vbsupport.ru/showpost.php?p=578551&postcount=16) which specifies an absolute size worked for me.

- Sid

[m0nde]

I had this installed and I thought the problems were hammered out, but my users pointed out that certain pictures smaller than a certain size caused text to show up after the image.

Unfortunately I have to click uninstall until these problems are resolved.

Good idea, though. And this is a needed hack that should be in the base code for vBulletin.

- Sid

[LuBi]

In that thread, what is posted there now is just smaller pics linked to the full size pics (from the gallery). I'm not using the other hack any more. It was causing pages with lots of pictures to completely lock up.

Thanks for gettin back to me, I'll try and replicate similar results and see if what I've got locks up.

I had this installed and I thought the problems were hammered out, but my users pointed out that certain pictures smaller than a certain size caused text to show up after the image.

Unfortunately I have to click uninstall until these problems are resolved.

Good idea, though. And this is a needed hack that should be in the base code for vBulletin.

- Sid

I wouldn't give up bro I'd look over the install again, double check.. I got things running smoothly with no complaints but I haven't gone live yet I'm still messing with things. Keep trying. *Forgot to SO Click Install* :tired:

[TwinsForMe]

This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.

This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.

That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.

May I make a suggestion about this hack though? Perhaps another method?

Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?

Example... Put this in your headinclude... and don't bother hacking any vBulletin files:

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>

mw = maximum width in pixels.
mh = maximum height in pixels.

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.


I don't know coding that well. I tried to add the above to my POSTBIT LEGACY template to have it applied only on the signature part but it resizes all pictures. Here is where I applied the script:
<!-- sig -->
<div>
__________________<br />
$post[signature]

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 300;
var mh = 300;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>


</div>
<!-- / sig -->

How do I make it only apply to the signature?

[buro9]

I don't know coding that well. I tried to add the above to my POSTBIT LEGACY template to have it applied only on the signature part but it resizes all pictures. Here is where I applied the script:
<!-- sig -->
<div>
__________________<br />
$post[signature]

<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 300;
var mh = 300;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>


</div>
<!-- / sig -->

How do I make it only apply to the signature?

Start by taking it out of the postbit... it would be inserting that over and over on showthread.php, so it's bloating your code.

And I haven't written a method for only reducing images in certain areas of the page, but you could conceivably add span tags around the signature area, and look for all images in all signature spans and then just reduce those.