How can I double the size of every image on a web page?

Question

There's a web page that I would like to double the size of all images on. I don't know any JavaScript or CSS. Can someone write me some code please? I tried this:

Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){
    i.width = i.width * 2;i.height = i.height * 2
});

But I don't know what I'm doing, and it's not working. Please help.

This is what the elements that I'm trying to double look like, if it's any help at all:

Answer 1

Reference: http://boards.4chan.org/g/

I've discovered an excellent feature that this website has for it's users, including built in customized viewing of their Thumbnail Images!

The 4Chan Homepage Settings Menu

That menu provides a whole lot of options to configure the webpage on how you see fit. I was astounded to see a Custom CSS feature that shows a CSS Box which will accept your own custom markup to tailor the site down to markup level! More on that in a bit.

First, I want to mention that they do provide TWO ready to use options that should satisfy your Thumbnail viewing requirements.

Bounty EDIT: Users of the 4chan-x Greasemonkey script already have these 2 options in 4chan Qt ≪Quality thumbnails≫ Settings menu. Skip to the next EDIT below if your using this script.

Take a look at this screenshot that show 3 steps to perform, with step 2 being one or the other.

Right-click the image below and view in full size if that helps:

Open Image in New Tab / View Image

In Step 1 above, notice that the Settings reflect the 4chan Homepage and not the script.

In Step 2a above, this will closely reproduce the double image size for average images, but if those images are super large, they will use the available browsers width.

In Step 2b above, this choice instead will show a super large image if it exists up to the browsers width size.

If neither of these two ready-to-use thumbnail options suits your taste, keep reading.

Since your original goal is to see the thumbnails at twice the size, or 200% , I analyzed the webpage to determine the most minimal settings required to show these Thumbnail Images at that size, but note many will be blurry at twice the size since the quality isn't increased. See Bounty EDIT below for solution for images that are not blurry at ANY size.

Having said that, you can choose 150% to minimize the blur while still enlarging it, or choose the value that is acceptable to you if you did not want to use Greasemonkey.

---

Bounty EDIT:

The blurry images are no longer an issue when using these CSS Settings with 4chan-x Greasemonkey Script to have thumbnails twice the size .

Note you will need to remove a default checkmark that is automatically applied for Disable 4chan's extension in the Greasemonkey Script, accessible by clicking the 4chan Qt ≪Quality thumbnails≫ Settings link at the top-right corner of the webpage.

Once you exit that settings menu, enter the 4chan Homepage Settings Menu . Remove all checkmarks, except for Custom CSS. To be sure, the image above did not remove all the checkmarks for which 4chan-x recommends.

---

Caution: Using the Custom CSS Settings option can make the Settings Menu inaccessible! You'll need to use the browsers built in inspect element to make live changes on-the-fly to regain control.

The box below is not an image. Select, copy, and then paste this CSS into the Settings Menu CSS Box:

div.file, a.fileThumb img {
  width: 200% !important;
  height: 200% !important;
  float: left; 
}

.fileInfo {
  margin: 10px;
}

To be clear, here's a screenshot of that box:

After you paste the above code into the CSS Box , press the Save CSS Button and ensure you have a Checkmark for Custom CSS and then press the SAVE Button to exit.

The page will then refresh itself with these new settings. Enjoy your 2x Thumbnails.

Bounty EDIT: Reminder that above image shows checkmarks in Essential section that should be removed. To be sure, the homepage top-right will have 4Chan's Original Settings Menu in middle:

[4chan Qt ≪Quality thumbnails≫ Settings] [Settings] [Home]

Answer 2

As I mentioned in a comment previously, your code won't touch the images which are background images to non <img> html elements because of CSS property background-image .

So you need to run both your code to double <img> tags.

Also you need to set CSS property background-size to 200% Auto .

Now ofcourse the question, is to what you want to add the css property. Chances are that all those images on 4chan are also links. So they must be anchor <a> tags with background-image .

Sorry I am in office, so I won't open up 4chan to confirm that.

But you can try this code in this same website:

$('a').css('background-size', '200% Auto');

My quick solution uses jQuery, but you get the idea.

Update:

Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){i.width = i.width * 2;i.height = i.height * 2});

Array.prototype.forEach.call(document.getElementsByTagName('a'),function(i){i.style['background-size'] = '200% Auto'; });

Answer 3

I assume that even a CSS solution would work for you (from your question). If there is no restriction on having real DOM width and height, you can also go for CSS transforms.

img {
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -ms-transform: scale(2,2);
    /* etc. */
    transform: scale(2,2);
}

Answer 4

In JavaScript try:

for (i=0; i < document.images.length; i++) {
    document.images[i].height *= 2;
    document.images[i].width *= 2; 
}