Optimizing Images For web
In present days where speed is all that matters having a slow website is not an option at all in terms of user friendliness or Search Engine Optimization, as search engines give more preference to websites with short load times. In most cases the images are responsible for increasing the load times thus effecting your websites overall performance which is not a good News at all. But by sacrificing just your image quality you can have it done.
With many new methods and advanced tools, you are still able to retain image quality while losing some of those unwanted bytes.
In this article we will mention a few tools and methods both online tools and offline programs, still there are a lot of other methods as well, if you have any feel free to contact our team to including that here.
Offline optimization
With Offline optimization all we meant was using tools that run on a computer or a tablet.
Blurring the Image
Blurring is used to reduce higher frequency details which reduce the weight of the image. Blurring backgrounds of the object in your image is better option as your image as a whole is not affected, but will reduce the size by removing the weight on background details.
As a common effect it’s available in on image editors even in office programs like open office, Microsoft office etc even in CSS has Image Filters. Check our article on Image Filters, but these may not give you option to select a particular area to apply blur effect.
If you are new to Photoshop Check the tutorial below
Blur effect in Photoshop
The Original Image is shot with Cannon EOS 7D from South Lake Road Childrens Park Ooty,on my tour to Ooty,A place in Tamil Nadu India. You are free to use that image.Original Image in JPEG format Thread Garden Ooty, Though i did crop the image when using it in the experiment it to reduce the size.
First, open your image in Photoshop. Then, make a duplicate copy by from Layer ->Duplicate Layer.
In the Demo image the object is a Honey bee on the flower.
On your new layer (Layer copy) apply Blur effect. You will find that in Filter -> Blur and select from the different blur options available. Here we have used Gaussian Blur, you can use any one of your choice. A dialogue box will then appear where you can choose the extent of your blurring effect. This will blur the whole image.
Don’t worry this won’t affect you original image or the other layer.
Now to bring back the Object in the image to focus in this case the Honey bee on the flower, use erasure settings and remove the object of concern from the blurred layer this will bring the original unburned layer visible in the removed region.
You’ll then need to select both of your layers and right click to select Merge Layers. This will compress into a single file.
This is the image after editing, the size is reduced to 192KB where as the original image was 272KB, it around 90KB saved.
When saving the image from photoshop we used normal saving method to save as JPEG. In JPEG Options Image quality was set to maximim. The size of original image used for editing and the produced image may change according to your settings in Photoshop.
Save for Web & Devices
Photoshop comes with an option to produce web-ready images effectively. The Save for Web option in it allows you to optimize your images easily for the web. This is much easy option for New users.
You can find Save for Web & Devices under File > Save for Web & Devices.A box comes up presenting you with a variety of options. To make it easier to compare the original and optimized images.
It also has the ability to adjust the quality along with it you can monitor the quality of your optimised image while the application tracking system sises the size. If you’re happy with the level of quality and the size, you can hit Save.
JEPGmini
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’s currentely avalible for MAC users, it’s free app.
Among the reviewed tools and applications JPEGmini stunts them all mainly for following reasons
- It’s free(For MAC users only).
- Easy to use that other free tools.
With ablity to reduce 30 images , having resolution of 8 Megapixels (3264 x 2448) and saving upto 67% in 32 seconds (in server edition)it stays the fastest and most reliable program to Optimise images.The limiting factors is lack of support for windows and Linux.
RIOT
Riot is an image optimising tool for windows users, it’s also avalible as a plug-in for other applications for GIMP, IrfanView, XnView and other supporting applications .It allows you 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.
It also have function to convert image to GIF, PNG and JPEG after compressing it.
Shrink O’Matic
Shrink O’Matic is an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs.
Simply drag and drop images and they’ll be resized as you wish! Options allow you to choose the output sizes, rotation (supports EXIF data), names and location, formats and watermarks.
Spaces
Spaces offers a free tool that makes optimizing images for either a website, social profile or newsletter a cinch.
Online Tools
You can use these tools from any os with a browser that web application supports. You can either upload the image or provide the URL to that image.
Yahoo Smush.It
This is really quick and easy to use tool and will compress your images even further without ANY loss of quality. Just visit www.smushit.com and either upload an image or enter your image URL and go on. You can then press Smush and your image will be compressed even further. Select Download Smushed Images to save onto your computer.
Yahoo Smush.It can be used additionally after putting your image through Photoshop. This is also available as a Firefox extension.
8bitalpha
8bitalpha is an online application which converts 24-bit PNG to 8-bit PNG in moments. With a clean and neat user interface it comes in handy for a newbie to use it.
