I reblogged this tips from howtogeek.com

The other day we wrote up how to compress a folder of images using a single line from the bash shell prompt, which is native to Linux but works on Windows if you install Cygwin. Naturally there’s a simpler solution for Windows users, and reader Lee Thompson wrote in to share it with you all.

First, you’ll need to install ImageMagick for Windows and make sure that it is in your system path.

Then, create a new batch file in Notepad with a clever name like compressall.bat, and paste in the following lines of code. Note that you can adjust the *.jpg to something else if you want to include PNG files as well.

@echo off
for %%f IN (*.jpg) DO convert -quality 70 "%%f" "%%f"

Save that batch file somewhere in your system path (you could stick it into C:\Windows if you really wanted to, but it would be better to create a scripts folder and add that to your system path). Then all you have to do is navigate to a folder in your command prompt, and run the batch file by typing compressall at the prompt.

But we can make this even better.

We also recently showed you a stupid geek trick where you can run commands in the Windows Explorer address bar, or open a command prompt already keyed to that folder. And now, finally, we have a great use case for that trick.

Once you’ve saved the compressall batch file into the system path, you can use it wherever you want. Just open up any folder of images in Windows Explorer, and then type compressall into the address bar.

You’ll see a command prompt window flash up and quickly disappear once it is finished. And all your images will be a smaller file size.

If you wanted to get really fancy, you could modify the batch file to create a backup directory, copy all of the images in there, and then proceed with the compression.  That way you’d have an automatic backup before compressing images.

Again, thanks to reader Lee Thompson for this great tip!

Javascript to handle error / broken images

Big thanks to Prestaul and Ryan O’Hara for the anwers.

This solution to handle error / broken images is working like a charm 🙂

Handle the onError event for the image to reassign its source using JavaScript:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Or without a JavaScript function:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

The following compatibility table lists the browsers that support the error facility:

http://www.quirksmode.org/dom/events/error.html

I use the direct solution without using javascript, it works well especially on lazy load image