Pinterest Stumbleupon Whatsapp

web imagesOne way to spice up your words is by adding related images to the text. The more and better images that you use, the spicier your stories will be. But in terms of webpages and blogs, more images also equal bigger page sizes and longer loading times – something that every web owner should avoid. If eliminating the images is not an option, the only thing left to do is optimize them for the web.

Unfortunately, optimizing images for web use is not always a walk in the park, especially if you have to deal with lots of them regularly. If you are a Mac user, there are several free tools that can help you minimize the trouble of preparing web images.

Acquiring The Images

I won’t go too far here since the topic has been discussed several times already. There are many ways you can acquire images for the web, from taking your own pictures using a digital camera A Beginner's Guide To Digital Photography A Beginner's Guide To Digital Photography You may think that picking up a digital camera, turning it on, and taking the photo is all that you need to know about digital photography. Think again. Read More , using Creative Commons licensed images, to screen capturing images on your desktop.

Talking about screen capture, there are several free Mac tools 5 Alternative Screen Capture Tools For Your Mac 5 Alternative Screen Capture Tools For Your Mac Read More that you can use for this purpose. I personally use either Jing How To Take A Better Screenshot Image With Jing (Mac) How To Take A Better Screenshot Image With Jing (Mac) Read More or Skitch Capture Edit & Share Your Screenshots With Skitch [Mac Only] Capture Edit & Share Your Screenshots With Skitch [Mac Only] Read More .

web images


Resize & Rename Using ResizeMe

Most of the time, you won’t get the size of the images right the first time – either the image size (pixels) or the file size (bytes).

The limitation for the image size usually comes from the design point of view. You shouldn’t put a 600 pixel-wide image on a 500 pixel-wide blog column. It will go out of the border and make the appearance ugly.

To solve the pixel problem, you can either crop or resize the oversized images. I found a great tool called ResizeMe that can help you do those tasks – and a lot more – in bulk.

Using ResizeMe is as easy as dragging and dropping images that you want to modify into the file list.

how to resize images

Pick the action(s) that you want to apply to those images. In the image below I set the action to scale down any image wider than 580 pixels without modifying the height. I also set the action not to modify any image with a width smaller than the maximum width.

how to resize images

The app also allows users to crop images to their desired size. Cropping very large images into several smaller ones is favorable than resizing, because most of the times resizing will degrade the quality of the image and make the picture unclear.

If you use several images for every blog article that you write, it would be better if you organize the set by adding similar key words to their names. For example, images for an article about screenshot tools could be renamed into “scrnsht – image1“, “scrnsht – image2“, and so on.

You could use the help of Automator to batch rename images How To Use Automator To Batch Rename Images on Mac How To Use Automator To Batch Rename Images on Mac Read More on your Mac, or for a more flexible renaming system you could try a utility like NameChanger Batch Rename Your Files Easily - Mac Style (Mac Only) Batch Rename Your Files Easily - Mac Style (Mac Only) Read More . If you don’t want to use other applications, ResizeMe also comes with a file renaming ability. Just choose a function from the list, check the “Rename” button, and write down the instances that you want to be renamed.

how to resize images

Another Resize Using ImageOptim

Another size factor that we have to deal with is the file size. We need smaller image sizes while maintaining the picture quality. Most giant image manipulators come with the ability to make images web ready. But if all you need is to compress the size, you could use ImageOptim.

Similar to ResizeMe, using ImageOptim is also drag and drop simple. All the images that you drop into the app will automatically be optimized to the smallest size possible without sacrificing the quality. It does the magic by finding the best compression parameters and by removing unnecessary comments and color profiles.

resize images

The percent column will tell you how much bloat the app can eliminate from the images. The perfectionist can use the “Again” button to help them squeeze a few more percent out of the image size. You can push the button several times until the percentage column shows 0%.

By comparing the results, we can see that ImageOptim does its job well. Sometimes it can eliminate more than 50% of the image weight.

This is before using ImageOptim.

resize images

And this is after.

resize images

Although the figure equals to only a few kilobytes loss of image size each, when you add everything up, those tiny kilobytes could mean something to the overall site size and bandwidth.

What I like about this app is that it comes with a workflow. If you open the workflow with Automator and save it, it will be transformed into a Mac service. Since you can assign shortcuts to services How To Be More Productive on Mac with The Help Of Services How To Be More Productive on Mac with The Help Of Services Read More , you can use the app faster simply by selecting images to optimize and hit the shortcut combination.

web images

From my own personal experience, I can say that the combination of ResizeMe and ImageOptim has helped me save much of my time in preparing images for web use. But don’t take my word for it, try them yourself and share what you think in the comments below. And if you have your own favorites, fell free to share them also.

Leave a Reply

Your email address will not be published. Required fields are marked *