Best Free Tools To Compress And Optimize Images On Your Blog

Guest Post - Our host is Salman Farooqui, who takes a look at image compression and the best tools to help.See How To Become a guest author on Blogging Section.

Image files today are the most used media type to share. However, they are often too large in size to easily share or store. This is where image compression comes to play. Image compression is technique which reduces the image size without significant reduction in image quality. Many people fear image compression because they have a misunderstanding that it is a threat to image quality. Actually, image compression is of two type - Lossless and Lossy.

Lossless image compression

 Lossless image compression involves removal of some of the image data to reduce the size but the image quality remains the same and all the image details are preserved. You won't notice any change in image but the images through this method can only be compressed to around half in size.

Lossy image compression

Lossy image compression can reduce the image size to more than one tenth of it's size but the quality, though not very significant, is reduced. Lossy method will reduce some shades of color that are very similar thus reducing the overall size of the image.

So what are the benefits of image compression in blogging? Well, image compression technique is best suited for blogging. Compressed images not only reduces page's loading time it also takes less space on your hosting space and bandwidth. This is one of the best and most promising method to reduce page response time by optimizing images of your blog. It proves a boon for users who have slow Internet connectivity. They don't have to wait for long for viewing your blog.

Importance Of Page Load Time

Your blog loading time is now part of google algorithm which how decides how to rank a site in google search results. You don't want your blog to be devoid of many benefit,  Do you?

Faster page loading impacts your blog's visitor bounce rate. No one wants to wait for site to load up. If it takes a lot of time people will close your site and probably won't come back. This happens with many new bloggers, they add high quality large size images as their background and on their blog. If you can easily reduce the size of the image then why load those big ones.

Optimizing your images is a must thing to do for better site speed so that users have a better experience on your site. There are many free and useful tools for optimizing images without losing any visible image quality. We will go through some of the best tools to optimize and compress your images before adding it your blog.


Original Image :

 

Compressed Image :

First image is 70kb and second is an optimized image with size of just 9kb. However, different image formats have different potential for reduction in size.

Offline Tools

  
 Photoshop

Photoshop is the first name that comes to our mind when we want some image editing or optimization. When you save an image, use 'save for web' option rather than 'save as' option in photoshop. You will see a significant change in image size without compromising with your image quality. There is another cool photoshop plugin called SuperPNG. It's a free Photoshop plugin for optimizing small PNG images.

Irfan View

 Irfan View is another very popular image viewing and editing tool. Apart from a lot of great inbuilt features, you can use plugins to enhance the features. One such plugin is RIOT (Radical Image Optimization Tool). This plugin creates a save for web option in irfan view menu. You can simply scroll the slider for optimized image size and you will preview the image quality for that size. It is a great tool if you want your image corresponding to a fixed image size.

PNGOUT :

It is useful to optimize pictures created by other tools. The new image is lossless meaning that the new image will be of same quality but with lower image size. It can operate from Windows run dialog box and also command prompt.

OPTIPNG :

It can convert different image to png and can easily optimize png images losslessly. An open source advanced png optimization tool recompresses optimized images further to even more smaller size without any loss in image quality.

PNGCRUSH :

Another great tool for lossless png compression. It tries different methods of compression according to your image attributes and gives you best result. Changes color type, like truecolor to indexed color if the colors are very few which reduces the image size but not the quality.

JPEGTRAN :

A nice tool for optimizing jpeg files. It supports lossless compression between different jpeg files. Another great feature of this tool is that it supports lossless rotation and cropping of images.

GIFSICLE :

Program for optimizing and manipulation, editing and deconstruction gif animation image files. Creating gif animations with GIFSICLE is very easy. It runs on command-line to create and edit gif images.

Online Tools

SmushIT :

One of the most reliable and popular online tool by Yahoo Network for lossless compression of images. It shows you the new optimized image size before compressing.

JPEG Optimizer :

Useful for optimizing digital pictures. Select a compression value from 0 to 99 and click optimize photo to get your result. You can also resize your picture by selecting the appropriate size.
  

Image Optimizer :

Another great tool for image optimizaion. Just visit the site, browse your file, set the quality and get the new optimized image file. A piece of cake.

Picresize :

This is basically a picture resizer tool but you can use it's picture size reduction option. Enter the desired size of the image and press OK.Let's say you have an image of 200KB and you want to change it to 50KB, picresize will do it for you in just a click of button.

TinyPNG :

Lossless png image optimization with full support for transparency. You can drag and drop up to 20 images on tinypng site to get your compressed images. 

Drop your comments and questions below.

Salman Farooqui

About the Guest Author:
Salman Farooqui designs blogger templates and writes articles related to blogger, design hacks and SEO. His blog Kick Blogger publishes free blogger templates.

Read More...

Add a Pinterest Mouseover Button to Your Blog Images

Follow Blogging Section on Pinterest Here

Have you noticed this trend on blogs lately? This is a new feature I’ve seen popping up everywhere. When you put your mouse over an image on the blog, a Pinterest logo pops up prompting you to “Pin” the image. At first I wasn’t sure if I loved this feature or hated it. But after giving it a chance, I’ve decided I love it. :) I don’t know about you guys, but most of the blogs I visit have SO many gorgeous photos to pin. It seems like every photo is “pin-worthy!” Sometimes I have a hard time choosing which image from a post I want for my Pin board, and by the time I finally make the decision, hit the “Pin it” bookmarklet in my toolbar at the top of the screen, and the Pinterest pop-up screen appears with all the tiny square thumbnails, I’ve forgotten which image it was that I wanted to pin — or worse, I can’t tell which image I wanted to pin because the thumbnails are too small! So this is a feature I’ve grown to immensely appreciate, since now I am able to simply pin the image I want right there from the blog post while I’m reading.

If you’ve got a blog and want to add this feature to your photos, here’s how you do it.

FOR WORDPRESS

If you’ve got a self-hosted WordPress blog, you can use the Pinterest Pin It Button For Images plugin.

1. Simply download the zip file from the above link, go to your WordPress Dashboard, click Plugins > Add New > Upload and upload the zip file.
2. Activate the plugin, then from your WordPress Dashboard, go to Settings > Pinterest Pin It.
3. Under the heading Show “Pin It” button on following pages, click All Pages. Click Save.

This plugin comes with the default “Pin It” button as seen in the image above. If you like it, that’s it!

You’re done! :)

You now have a Pin-It button that will appear when a reader puts their mouse over any image on your blog.

If consider yourself tech-savvy and you’re up for a little bit more of a challenge, you can also choose to use your own button style in just a few easy steps.

Customizing Your Button

You can make your own personalized button, or here is a link with some gorgeous, free Pinterest buttons. You’ll probably want to make sure that the button you choose has a transparent background and is saved as a PNG file, otherwise, if it has a background, it will be white on your image. Once you’ve chosen your image, here’s what you do:

• Open the pinterest-pin-it-button-for-images.zip file you downloaded.
• Drag and drop the new Pin It button into the pinterest-pin-it-button-for-images folder.
• Open the ppibfi_pinterest.css file in Notepad or Text Edit and find the following code (it’s right there at the top, very easy to find! :))

.pibfi_pinterest .xc_pin {

width: 80px; height: 50px; /* Please note that the button is 80px x 50px. If you use a different size button, change this */

background-image: url('ppibfi_button.png'); background-repeat: none; /* This is the buttons image. Image can be found in the plugin folder */

It’s easy going from here. As the instructions say, if your button is a different size, change the code to your button’s width and height. Then change where it says ppibfi_button.png to the name and filetype of your image. Save the file.

If you’d like your button to be in a different position, look just underneath the previously mentioned code and find where it says

top: 5px;
margin-left: -1px;

Change these numbers to shift your button to a different position. I changed mine to top: 15px; margin-left: -15px;. You can also change top to bottom to have the button appear in the bottom corner.

Once you’re done editing, save the ppibfi_pinterest.css file, then zip up the pinterest-pin-it-button-for-images folder.

• On a Mac, you can just right-click on the folder and choose Compress.
• On Windows, I believe you can right-click on the folder and select Add to Zip, although I haven’t used a Windows computer in a good seven years, so my information might be a bit outdated. :)

Then follow the previously mentioned steps to install the plugin to WordPress, starting with Step 1.

That’s it! You should now have your own customized Pin It button that will appear whenever anyone puts their mouse over an image on your blog. :)

NOTE: If that all sounded like Greek, you can always just use the button that comes with the plugin. It looks great! :)

My Thoughts On This Plugin

What I really like about this plugin is that if the image is a link to another page, you can still click on the image to get to the link. For example, you can click on any photo on my blog to see the camera, lens, and settings used to take that photo. Also, when I share links or lists and use an image, I will link the image as well so all you have to do is click on the image to get to the page. This plugin does not interfere with that. It will only Pin the image if you click on the actual Pinterest button in the corner of the image. Click anywhere else on the image to be taken to the link.

When someone pins an image from your blog using this plugin, it will automatically fill in the description box with the title of your post. This can be a good and bad thing. Some bloggers (myself included) prefer to write their own description for each image, which may include hashtags or a link back to their blog. This plugin overwrites any custom description you may give your images and replaces it with simply the title of the blog post. So that may not be ideal. However, for older blog posts where you may not have set up a custom description (which is probably the majority of your blog posts, if you’ve been blogging for any length of time) this can be a great thing. It will now automatically fill in the description box with your post title. So as long as you have descriptive post titles, you’re golden!

FOR BLOGSPOT / BLOGGER

If you’ve got a Blogspot blog, there’s a super-easy tutorial to get this working for you as well.

1. Follow this tutorial at BloggerSentral.com: Pinterest Pin It Button On Image Hover.

So what do you do if you’re not a blogger and a blog you love doesn’t have this feature?

Great news! If you love this feature but visit a blog that doesn’t have it, there’s an easy solution. If you use Firefox or Chrome, you can install a plugin where all you have to do is Right-Click on any image to Pin it.

• Pinterest Right-Click Add-On for Firefox
• QuickPin for Chrome

As you can see in the image above, the Chrome plugin automatically fills in the description box with the post title and the name of the blog. I love this! With the Firefox plugin, the description box is blank. Boo!

If you use Safari or Internet Explorer, I’m afraid I couldn’t find a plugin for this trick. If you know of one, please feel free to leave it in the comments! However, you can always install the Pin It toolbar button at the top of your screen.

So What Do You Think...

 I’ve installed this plugin so you guys can see it working on my site. Feel free to pin any image from this post! I haven’t decided if I’m going to keep it yet though. What do you guys think of Pin It buttons that pop-up when you put your mouse over an image? Is it annoying and “in your face” by saying “Pin me! Pin me!”? Or is it a helpful tool that makes pinning quick and easy? What are your thoughts?

Follow Blogging Section on Pinterest Here

NOTE: This Article is been Republished by me. from the website Name Kevin And Amada. To Go to the Original Article Please Click Here. 

Read More...

Make A Rollover Image Effect - Image Changes On Hover

A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites.When you use this effect with an image or Picture you add to your blog the image will change to differant image once you hover your cursor over it.It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image, Place your cursor over the image to see it change:

The image is also a clickable link so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos.In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera). "You can check out how the results here - Kates Mouseover Images

Making Rollover Effect Image

This is the code we use to make the image.

<a href="TARGET URL GOES HERE"><img onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" src="URL OF FIRST IMAGE GOES HERE" />

You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked.

In the above code change the following:

1.TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.
Example : http://www.spiceyupourblog.com

2.URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here this is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3.URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there, this is the image that appears when your cursor hovers over it.
Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

Once the changes are made your done you can place the image in your blog posts/sidebar or anywhere html can be used.

Drop Your Comments And Questions Below.

Read More...