Compressing and protecting Web images

[rt7snap]

1) Anyone knows how to compress the high res 6MB beautiful images into really small file size of 10kb?

As you know, web user hate to go to a web page and take 3 min for a page to upload.
To improve user experience, i notice those good web site post images in really small file size.

I tried using photoshop to do it, save file in Quality 0 format, but the file size is at a range of 100kb to 150 kb at the lowest. But i ve seen some web site, with images that is big in web presentation, about A5 or A6 size, but the computer file size is just 8kb - 20kb at max.

Any idea how is it done? what tools is needed?


2) Security and protection
Oso, do you know how do they prevent user from right clicking (prevent user trying to save the author's images without permission)
How does the anti right click works? or is there any other solution to prevent unauthorised download?

 

[catchlights]

For Q1, first, downsize the image size, second, save it as web, try a few setting, eg. 50%

For Q2.

It is uesless, when you upload to the web, and people able to view it, the images are already inside the views' computer. just need to find a way how to take out and to use it.

 

[yyD70S]

Don't know how to prevent people from right-clicking and saving your images if you post on a public forum but if it's on your own (self-designed) webpage, you could write a javascript action to prevent a right-click (you have to ask some nerds for direction though).

The other alternative is to have some sort of primitive (first-level) transparent / translucent watermark on your images... this you could, using photoshop.

In any case, if you have uploaded a low-res image, I don't think you need to worry much.

 

[skinnylatte]

will not recommend the javascript way to prevent right click. it just annoys people especially those who depend on right clicks to do legitimate things like open links in new tab. besides its so easy to circumvent.. turning off javascript, or viewing source, will do the trick.

watermark might be more useful but i have no experience with that.

you may also like to look into the problem of people hotlinking images off your server.. that can be solved by some .htaccess.

image quality.. sometimes the compression is done server side. i know my host (who also hosts high traffic sites like wordpress.com and alistapart.com) compresses all my files before serving them out, so i save a lot of bandwidth.

 

[raptor84]

In genral if you post low res images i dont think people will steal and use for prints. watermarking is a good way though

 

[Prismatic]

Q1.
The definition of A5 and A6 size on a monitor is quite subjective, a size of the picture in no. of pixels will be easier to define for web display. Anyway, for a picture of around 600x400pixel, the size usually about 100-120kb in Jpeg quality 10. It's possible to reduce this to around 60-80kb with Jpeg quality 7 or 8. Depending also on the type of web presentation and the nature of the picture, you can reduce the size of a picture with simple shapes and lines on a Flash presentation to even smaller size. Another alternative is the use of .gif formats. However do remember that there's always a tradeoff between file size and quality. At 10-20kb, there's actually quite a lot of loss in data.


Q2.
There's no practical way of stopping people from copying. A lot of photosites simply just disable right click as a deterrent.

 

[ortega]

don't forget the screen capture
just as long as the image can be seen on screen, it can be made into a file

 

[willyfoo]

Q1.
The definition of A5 and A6 size on a monitor is quite subjective, a size of the picture in no. of pixels will be easier to define for web display. Anyway, for a picture of around 600x400pixel, the size usually about 100-120kb in Jpeg quality 10. It's possible to reduce this to around 60-80kb with Jpeg quality 7 or 8. Depending also on the type of web presentation and the nature of the picture, you can reduce the size of a picture with simple shapes and lines on a Flash presentation to even smaller size. Another alternative is the use of .gif formats. However do remember that there's always a tradeoff between file size and quality. At 10-20kb, there's actually quite a lot of loss in data.


Q2.
There's no practical way of stopping people from copying. A lot of photosites simply just disable right click as a deterrent.

Little bit of misinformation here... don't save your photos in gif format.. gif is not optimised for photos and will end up with a potentially larger file or colours are thrown away...

As a general rule of thumb..
JPG would be the way for photos and GIF for flat colour graphics

 

[Garcia Lorca]

You could give Xat's Image Optimizer a try. You can compress images much better than Photoshop's Save For Web function and you can add your own watermarks as well.

Don't bother disabling right-click. More trouble than its worth.

 

[Prismatic]

Little bit of misinformation here... don't save your photos in gif format.. gif is not optimised for photos and will end up with a potentially larger file or colours are thrown away...

As a general rule of thumb..
JPG would be the way for photos and GIF for flat colour graphics

My bad,maybe I didn't put it clearly enough. So here's my correction:
For simple images with simple shapes and lines, you almost certainly will get a smaller file with gif. However gif will suffer if you have various shades of colours or gradient (since gif files only have 256 colours). And yes, gif is not optimised for photos. I was thinking along the lines of web graphics when I saw the title. 10-20kb for photos might be a bit overkill, personally, something about 50-60kb will do for me. Given the speed of internet access these days, the loading lag is small.