CLOSE
    A growing repository with 720 bundles & 9410 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE

How to optimize a JPEG image for the web

Created by Admin on Mar 17 2015

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.


This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle