Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

How to optimize a JPEG image for the web

Comments and suggestions in here

Nowadays, having a slow website is simply not an option. In most cases, you can point the finger of blame at your images. Your images can be held responsible for sluggish loading times and will therefore affect your website’s overall performance.This is not good news at all. Thankfully, there are a number of ways in which you can optimise your JPEG images for your website. But the last thing you want is to have to sacrifice any of your image quality.

The whole point of your images is that they look impressive, sharp and clear. Luckily, with many methods and advanced tools, you are still able to retain image quality while losing some of those unwanted bytes.

Adobe Photoshop

The Save for Web option in Photoshop means you can optimize your images easily for the web. This method is popular amongst users and means you’re able to produce web-ready images effectively.

Open your image in Photoshop and then go to File > Save for Web & Devices.

A box will then appear presenting you with a variety of options. To make it easier to compare the original and optimised image, it’s a good idea to select the 2-Up or 4-Up option so that you are able to see both images on a split screen.

Under the Preset tab, select the JPEG option and choose High underneath. Under the Quality tab there is a slider which can be used to adjust the quality. In your viewer, you can monitor the quality of your edited optimised image while tracking the size.

Once you’re happy with the level of quality and it’s at a reduced size, you can hit Save.

 

Blurring in Photoshop CS5

Blurring is used to reduce higher frequency details which will reduce the weight of your image. Opting to blur backgrounds is great as it means your image as a whole is not affected. First, open your image in Photoshop. Next, make a duplicate copy by going to Layer and clicking on Duplicate Layer.


On your new layer (Layer copy) go to Filter, select Blur and select from the different blur options available. A dialogue box will then appear where you can choose the extent of your blurring effect.  This will blur the whole image.

You’ll then need to bring back the main elements in your image back into focus.
To do this, select the erasure setting. Choose a soft brush and decide on an appropriate size. Start brushing the areas you want to bring into focus. Your blurred background will remain.

You’ll then need to select both of your layers and right click to select Merge Layers. This will compress into a single file.

Adobe Fireworks CS5

Optimizing your images in Adobe Fireworks CS5 is also a great way to monitor quality vs. size. Open your image in the program to start with. Then go to the Optimize panel on the right hand side of the screen. Select the JPEG option in Better Quality in the drop down menu. Like Adobe Photoshop, you can either select a 2-up or 4-up option to view your image.

From here, you can try out the different options in the Quality settings. The file size and download time will be displayed below your image so you can play around until you get it right. Note: You can increase the Smoothing to make the file even smaller.
To export the image, simply select your edited image and select File > Export. You will then be able to name your image accordingly.

Using a JPEG Mask

This is much like blurring backgrounds on Adobe Photoshop. Start by opening your image in Adobe Fireworks CS5. Next, use the Marquee tool to highlight the area which you want to keep in focus. Once this is selected go to Select > Select Inverse. This will select the background.
To blur the background, select Modify > Selective JPEG > Save Selection As JPEG Mask. The background will then be highlighted and ready to be blurred. In the Optimize panel you can now blur the background using Selective Quantity. You can click Preview to see how it looks.

Online Tools

Yahoo Smush.It

Yahoo Smush.It can be used additionally after putting your image through Photoshop. This is also available as a Firefox extension.

The tool is really quick and easy to use and will compress your images even further without ANY loss of quality. Simply visit www.smushit.com and either upload an image or enter your image URL. You can then press Smush and your image will be compressed even further. Select Download Smushed Images to save onto your computer.

RIOT

Riot is an image optimising tool for windows users. Like Photoshop you are able to view your original image and edited image in a split screen for easy comparison. It will remove any unnecessary meta data from the image and includes features such as pan and zoom, rotate and flip.

Shrink O’Matic

Shrink O’Matic allows you to compress JPG images in batches if needed. You can then choose the output size, output name and output format of the images. Once these factors are determined you can drag and drop a single or multiple images over the application. The resizing process can now begin. From here, you can access the resized images easily from the output folder.

JPEG mini

JPEG mini is another tool which could be considered as an effective quick fix. Simply upload your image and wait a few seconds while JPEG mini compresses it for you. It’ll then tell you how much it has reduced in size. There is also a cool slider you can use over the image to test the difference in quality.



Alex Woods is an online writer and blogger at BaseKit – an online website builder. She enjoys finding interesting topics to write about and sharing them with others.

Facebook Twitter Google+ 

35 Responses to “How to optimize a JPEG image for the web”

  1. Adam
    April 23rd

    No link to RIOT?

  2. I use different services for different situation. Fireworks is pretty handy for PNG-32 images. Then there’s PNG Quant that reduces the file size marginally but alpha quality may suffer in some cases. Smush.it compression is ok so now I use JPEG Mini. It’s best for JPGs unless you have text graphics. Kraken.io is pretty good for all image types give it a shot.

    So, I try various methods on my images and pick out the best ones.

    • Hi nomt49, Using Fireworks is also right, this post is to help you find the right way to optimize a JPEG image for the web so your comment added useful info. Best whishes!

  3. Some very useful tips on image compression. I mainly use Photoshop’s save for web function for my jpeg compression, but have always kept the quality above 51 as the drop in quality seems to be quite noticeable if I go any lower. Thanks for listing a few alternative methods, I will definitely have a go with jpeg mini.

  4. ainos
    April 24th

    Irfan View can do it as well :)

  5. Lisa
    May 2nd

    Thanks for sharing this step by step information I can now do this on my own.

  6. Pon
    May 2nd

    You should add Kraken.io to this review. It recompresses images much faster and more efficient than ancient smush.io. Besides, it has a very nice UI :)

  7. I just want to say thank you for this very wonderful post. I was having a lot of time figuring out why my web images seemed to look awful compared to the images saved on my computer. Now I know why!

    • Hey Annie it’s nice that now you know hot to save your images the best way for web. Take care!

  8. John
    May 7th

    Been looking at speeding up my websites load times, and came across this article for reducing my jpeg sizes!  Just wanted to say thanks as its MUCH more information then I’ve been able to find anywhere else.

    Cheers,

  9. RT @WebDesignShock: How to optimise a JPEG image for the web http://t.co/Q2jRVOS1 Pls RT #showcase

  10. RT @WebDesignShock: How to optimise a JPEG image for the web http://t.co/96iBAPBx Pls RT #showcase

  11. How to optimise a JPEG image for the web http://t.co/k2kvTTHy #adobe

  12. How to optimise a JPEG image for the web http://t.co/2OSLzIc3 via @webdesignshock

  13. JPEG画像を最適化させる(軽くする)手段のまとめ。 / “How to optimise a JPEG image for the web – WebDesignShock” http://t.co/cqhgdVoM

  14. How to optimise a JPEG image for the web – WebDesignShock http://t.co/P11i23ci

  15. How to optimize a JPEG image for the web – WebDesignShock http://t.co/FW5MpDGp

  16. How to optimize a JPEG image for the web http://t.co/gldoZujd via @webdesignshock

  17. @gasmarktasty please try this mate. “via” got attached to link. http://t.co/XKQfIN5B

  18. .. prevent sluggish loading times ~ How to optimise a JPEG image for the web – via @WebDesignShock http://t.co/bsSGWAcr

  19. How to optimize a JPEG image for the web – WebDesignShock – http://t.co/r7FEPfyB

  20. RT @themeshock: How to optimise a JPEG image for the web – WebDesignShock http://t.co/goKQD4yt

  21. How to optimize a JPEG image for the web – @WebDesignShock http://t.co/lRbzHhu3

  22. How to optimise a JPEG image for the web http://t.co/peu3MmSr via @zite

  23. How to optimize a JPEG image for the web – WebDesignShock http://t.co/4FhwBovv

  24. Cómo optimizar imágenes JPG para la web http://t.co/QH8iwXzB vía @Diigo

  25. [...] How to optimise a JPEG image for the web - Nowadays, having a slow website is simply not an option. In most cases, you can point the finger of blame at your images. Your images can be held responsible for sluggish loading times and will therefore affect your website’s overall performance. [...]

  26. [...] une copie d’écran en JPEG, c’est crade ? « Bibliothèque How to optimize a JPEG image for the web Nowadays, having a slow website is simply not an option. 100 Best tooltip scripts & plugins, [...]

  27. Cómo optimizar una imagen JPEG para la web http://t.co/s5QkiVJ8 vía @webdesignshock

Leave a Reply

Comments

*