Picture Reduction

[jaydeeare]

I've noticed on a few sites that some displayed photos look good quality when viewed on the monitor, but when looking at the size, they are listed as 1px x 1px.

How is this done, please?

[Cathus]

it's a transparent gif overlay, makes it harder to save an image off the site or see the code for the image & hides the actual image underneath, I think that's what you're referring to.

[jaydeeare]

Thanks Cathus. I know the technique you are referring to, but I've seen pictures on websites that are say 800px x 550px, others that look the same physical size on the screen are shown as 1px x 1px. When downloaded (naughty of me, I know but I had to see for myself) the actual downloaded size IS 1px x 1px.

I'm just wondering how this is done.

The method you are mentioning just shows a blank image when downloaded.

Thanks for taking the trouble to comment

[Cathus]

can you show an example, a picture can't be 1px by 1px, that is just a dot

[MattUK]

It's done using CSS. You set the photo as a background image, then lay a 1px transparent gif over the top. This allows you to add a hyperlink to the GIF. To be honest, it's easy to get the background picture anyway from most modern browsers, so it's a styling technique rather than a preventative measure

[Cathus]

I've done this a few times for members of this site who can't post their photo because they link to the gif, basically I've just gone into the HTML source view & extracted the URL to the image from that & then posted their image up in their thread.

[jaydeeare]

Thanks!

Maybe I'm a bit lost in this, but if I'm reading this right....... say I have a picture of size 1500px by 1200px. I have this as a background and lay a 1 px transparent gif over it. Place this on a website then link to this from another site to the 1px gif, and the picture will show up as the original picture, but if downloaded only the 1px gif will be downloaded.

OK, I'll try this and see if I can get it to work.

Thanks for your time

[MattUK]

Just a quick point to note: you put the 1px gif on top and set its width and height to be the same as the picture underneath.