There are several ways you can optimize the images without compromising on its quality. One is to compress the image by using a good software such as Adobe Photoshop. Alternatively, there are also various free tools to help you do this without affecting the quality of your images. Best Free Online Image Optimizer Tools for Image Compression 1. Tiny PNG – image optimizer for web. Tiny PNG is the best image optimizer online tool and it will support compression of both.jpeg and.png image files. You can use for bulk image compression. Designed to prepare the best possible JPEG, GIF and PNG image files for the web. File size reductions of up to 50% or often much more are possible, which can File size reductions of up to 50%. May 06, 2012 Compress & Optimize Images Easily with ImageOptim for Mac OS X May 6, 2012 - 7 Comments If you’re at all concerned about the file size of images you should grab ImageOptim, a free image compression tool that is so ridiculously simple it’s.
- Best Mac Image Optimize Tool For Website Images
- Optimize Images For Website
- Best Mac Image Optimizer Tool For Website Images
Whether you’re designing a website, writing a blog post, or sharing your latest photography shotsOnline Photo Albums: Where to Host Them for FreeOnline Photo Albums: Where to Host Them for FreeWhich online photo storage service is the best? Between free price tags, unlimited storage space, and photo security, which service is best for you?Read More, sometimes you’ll find yourself with a handful of images that need to be processed en masse — and doing them one by one can end up being a huge waste of time.
There are plenty of batch image tools out there, but many of them require installation and most are limited to one particular operating system. In a lot of cases, it’s just faster and more convenient to use free online tools instead because they’re accessible from anywhere at any time.
So we’ve compiled a list of the best online tools for batch image processing and categorized them in three ways: resizing, optimizing, and converting. Bookmark the ones you find useful and start using them now!
Image Resizer Tools
Image resizers can be tricky, not only because of file size considerations, but also because resizing can affect the quality and clarity of images. In this sense, some resizers are objectively better than others, and that’s why the best ones are those that give you fine control over quality.
Bulk Resize Photos
Bulk Resize Photos has the easiest interface. Just drag your images onto the site — as many as you want — and you can scale in five ways: percentage, longest side, width, height, or exact size. Everything is client-side so it’s really fast and there’s no uploading necessary.
Or use the advanced settings to change formats between JPG and PNG, adjust image quality, set a background color, and even add padding to prevent stretching.
BIRME
BIRME, which stands for Batch Image Resizing Made Easy, is simple but flexible. Drag your images onto the page and set the new width and height. Depending on which resize option you select, it will scale or crop to fit your dimensions.
It can also add some border padding and alter quality settings (for JPGs). Resized imaged are downloaded as a single ZIP file.
Resize Pic Online
Here’s another drag-and-drop site that’s on par with the two above, only a little more restrictive. Upload your images, select a width between 30px and 1500px, a quality between Low, Medium, High, and Best, and then choose whether you want to convert to JPG, PNG, or keep the original format.
The restrictions: You can bulk resize up to 10 images at once, size should not be more than 15 MB per image, and neither width nor height can exceed 6000px on any image. The site is available in Russian and English too, in case that matters to you.
PicGhost [No Longer Available]
The nice thing about PicGhost is that you can upload your own files or import them directly from Facebook, Flickr, or Picasa.
The restrictions: Upload up to 40 images at once and size should not be more than 10 MB per image.
Not only can you resize in a variety of ways, but you can also add watermarks and edit each image using an online editor called Aviary [No Longer Available]. I’d personally only use this tool for resizing though.
PicResize
PicResize is a batch resizing tool that we’ve mentioned beforeSpeed Through Your Image Editing Tasks With These 3 Great Batch Editing ToolsSpeed Through Your Image Editing Tasks With These 3 Great Batch Editing ToolsWhen it comes to resizing or converting images, it can often be a tedious task of doing one after the other. Luckily there are a lot of great tools out there that make it easy...Read More. It’s still useful and it gets the job done, but it’s a little behind when compared to the aforementioned resizers. Use it if the above tools aren’t available to you or you don’t like them for some reasons.
If you switch to the non-batch version of PicResize, you can also crop and add special effects to your images.
Image Optimizer Tools
Image optimizers have one primary focus: to reduce the file size of an image as much as possible while impacting the quality of that image as little as possible — all without resizing or cropping the image.
TinyPNG
TinyPNG is arguably the best image optimization tool on the web. Despite the name, it can compress both PNGs and JPGs, and there’s absolutely nothing you have to do other than upload the images (which uses a lovely drag-and-drop interface).
Once uploaded, TinyPNG automatically compresses using a lossy methodHow Does File Compression Work?How Does File Compression Work?How does file compression work? Learn the basics of file compression and the difference between lossy versus lossless compression.Read More that maintains the perfect balance between quality and file size reduction. Files can be downloaded individually, as a single ZIP file, or moved to your Dropbox account.
Optimizilla
Optimizilla is very similar to TinyPNG in that you just drag-and-drop PNGs and JPGs and it does most of the work for you. However, with this one, you can control the final quality of the images (between 1% and 100%) on a per-image basis.
The downside is that you can only process 20 images at a time. Files can be downloaded individually or as a single ZIP file.
Kraken.io
Kraken is another drag-and-drop tool that’s a bit more restrictive than the above tools, but has one big advantage: you can choose whether to compress using a lossy or lossless method. Download resulting images individually or as a single ZIP file.
The restrictions: Up to 1 MB per image and a total of 50 MB per month. Or you can get a premium subscription to increase the file size limit to 32 MB, the monthly upload limit to gigabytes, and unlock extra features like resizing and Dropbox synchronization.
We’ve lauded the benefits of Kraken before3 Fast, Clean, & Efficient Online Image Optimizers To Shrink Your Images3 Fast, Clean, & Efficient Online Image Optimizers To Shrink Your ImagesAs a blogger and a normal guy who is running out of space on his hard drive, I am always on the lookout for a good image compression program. Thanks to the plethora of image...Read More, but unless you need the lossless compression, TinyPNG or Optimizilla may fare better for you.
Image Converter Tools
Different image formats have different pros and cons — check out our comparison of JPG, PNG, and GIFJPEG, GIF, or PNG? Image Filetypes Explained and TestedJPEG, GIF, or PNG? Image Filetypes Explained and TestedDo you know the differences between JPEGs, GIFs, PNGs, and other image filetypes? Do you know when you should use one instead of the other? Fear not, MakeUseOf explains everything!Read More — and often it makes more sense to prioritize one format over others. These tools come in handy when you want to switch a lot of images to a particular format.
Raw.Pics.io
Raw.Pics.io isn’t just a handy tool, but it’s beautifully designed too. It makes you want to use it, and that’s rare among online tools (which tend to be hastily thrown together).
As a photography-centric tool, Raw.Pics.io mainly supports RAW source files in the following formats: DNG, CR2, NEF, ARW, ORF, PEF, RAF, PDF, or JPG. Images can be exported as JPG, PNG, or WEBP. Only JPG source images can be resized.
CloudConvert
CloudConvert is an incredible tool for any kind of file conversion. You have to connect your cloud account (either Dropbox, Google Drive, OneDrive, or Box) and pick files that way. No uploads allowed. But it supports dozens of image inputs and outputs so it’s well worth it.
For free, you get 25 conversion minutes per day, which actually isn’t that bad. You also get 5 concurrent conversions, 1 GB max file size, and bumped down to low priority if there are lots of others using CloudConvert at the same time. For more freedom, you can upgrade to a premium subscription starting at $8 per month.
Did We Miss Any Tools?
Even though image size and quality are important for websites and blogs, remember that image SEO is just as importantRank With Your Images: 4 Ways To Make Your Images SEO FriendlyRank With Your Images: 4 Ways To Make Your Images SEO FriendlyImage searches drive traffic to your website if you know what you're doing. The trick is to understand how SEO works and format your images accordingly. Here are a few basic tips.Read More for maximizing the amount of search engine traffic you capture. Don’t neglect that aspect.
Note that if you’re using one of these tools as a photographer and you have aspirations to be professional or semi-professional, we recommend learning to use something like Photoshop or Lightroom15 Free Alternatives to Adobe Lightroom, Illustrator, and Photoshop15 Free Alternatives to Adobe Lightroom, Illustrator, and PhotoshopWould you like to get Adobe Photoshop, Lightroom, or Illustrator for free? Here are some of the best Creative Cloud alternatives.Read More instead.
And don’t forget these photography practice exercises7 Skill-Building Photography Exercises That Really Work7 Skill-Building Photography Exercises That Really WorkThere are lots of exercises that can help 'develop your photographic eye'. Here are the most effective ones that we've found.Read More!
If we missed any other batch resizers, optimizers, or converters, please let us know in the comments below! Otherwise, tell us which ones are your favorite and what you used these tools for. We’d love to hear from you!
Explore more about: Image Editor, Photography.
You can also check this very useful and easy to use Multi Tasking tool. You can Compress, Resize your images, http://www.ipiploo.com
You missed Sumo Paint: https://www.sumopaint.com/home/
That's a great one as well.
If you run an online store, image optimization is an art that you want to master. From attracting shoppers perusing Google images to reducing site load time, image optimization is an important part of building a successful ecommerce website, since your product photography is a cornerstone of your online store.
What is image optimization?
Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines.
Have the following questions ever left you scratching your head?
- Why is it that when I do a Google image search, my product photos never show up?
- Do I need to add alt attributes to my images?
- What's the difference between JPEG, GIF and PNG? When should I use one over another?
Today you’ll finally have answers because we’re diving deep into these questions and more.
Here’s how to optimize images for the web:
1. Name your images descriptively and in plain language
It's really easy to blow through hundreds of product shots and keep the default file names your camera assigns.
When it comes to image SEO, it's important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.
Take this image, for example.
You could use the generic name your camera assigned to the image (e.g. DCMIMAGE10.jpg). However, it would be much better to name the file 2012-Ford-Mustang-LX-Red.jpg.
Think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search terms like:
- 2012 Red Ford Mustang LX
- Ford Mustang LX Red 2012
- Red Ford Mustang LX 2012
Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.
If you’re not going to get that).
Finally, always do a sanity check from time to time. View the source of your webpages and check to see if your alt attributes are filled out properly. You’ll be surprised by what you miss when you’re moving at the speed of entrepreneurship.
3. Choose your image dimensions and product angles wisely
It’s common practice to show multiple angles of your product. Going back to the Ford Mustang example, you wouldn't want to show just one shot of the car, especially if you're trying to sell it. It would be in your best interest to show shots of:
- The interior.
- The rear, especially that air spoiler.
- The rims.
- The engine... it is a Mustang after all.
The best way to capitalize on these extra photos is to fill out your alt attributes. And the way you would do that is by creating unique alt attributes for each product shot.
- 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> using the alt attribute of: alt='2012 Ford Mustang LX Red Leather Interior Trim'
- 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> using the alt attribute of: alt='2012 Ford Mustang LX Red Rear View Air Spoiler'
The key here is to add descriptions to your base alt attribute so that potential searchers land on your website. If you do the extra work, Google will reward you with searchers.
A word of caution on providing larger images
Now you might want to provide larger views for your visitors, which can make for a great user experience, but be careful.
Whatever you do, don't place the largest image on your webpage and simply shrink the dimensions via the source code. This will increase your page load time because of the larger file size associated with the image.
Instead, make it a smaller image and provide the option to view a larger image in a pop-up or on a separate webpage.
4. Reduce the file size of your images
Consider this:
- Nearly 50% of consumers won’t even wait 3 seconds for an ecommerce site to load.
- ...and, globally, the average page load time is actually increasing.
- Amazon found that if their pages were to slow down by just one second, they would lose $1.6 billion a year.
- Google uses page load time as a ranking factor in their algorithm.
So, if you have images that slowly 'drool' down the screen and take over 15 seconds to load? Well, you can kiss that prospective customer goodbye!
So, what can you do?
When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load. (Note: If you’re a Shopify merchant, we automatically compress images, so this shouldn't be an issue for you.)
If you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away.
One way you can reduce image file size is by using the 'Save for Web' command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size possible while keeping an eye out for image quality.
- Quality: Find this in the top, right-hand corner (i.e. 70).
- File format: Find this in the top, right-hand corner (i.e. JPEG).
- Optimization: Find this checkbox in the top, right-hand corner (i.e. Optimized).
Best Mac Image Optimize Tool For Website Images
- Color: Find this checkbox in the top, right-hand corner (i.e. Convert to sRBG).
- Downsizing and sharpening: Find this in the bottom, right-hand corner (i.e. W: and H:).
- Expected file size: Find this in the bottom, left-hand corner (i.e. 136.7K).
You can also opt to use 'Export As'.
How to optimize images without Photoshop
If you don't have Adobe Photoshop, there are numerous online tools you can use for image editing. Adobe even has a free image editing application for smartphones and tablets, Photoshop Express. This tool doesn't have all of the capabilities of the desktop version of Adobe Photoshop, but it covers all the basics of image editing and doesn't cost an arm and a leg.
Other impressive online image editing tools are:
- PicMonkey has been described by experts as a 'staggeringly great photo editing tool'.
- PIXLR is super user-friendly and comes with a 100% free app for your smartphone, so you can edit on the go.
- Canva is another fairly advanced online image editor.
Finally, there is always GIMP. GIMP is an open-source, free image editing software application that can be run on Windows, Mac or Linux. It can do everything Photoshop can do, but tends to be a bit clunkier. But for a free image editing application, you can't beat it.
How large should image files be?
For ecommerce images, a good rule of thumb is to try to keep your image file size below 70 kb. That can be difficult at times, especially for larger images.
5. Choose the right file type
There are three common file types that are used to post images to the web: JPEG, GIF, and PNG.
Let's look at the three file types and how they affect the same image:
JPEG (or .jpg) images are somewhat of an old file type. JPEG has become the de facto standard image of the Internet. JPEG images can be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format allows decent quality at a low file size.
GIF (.gif) images are lower quality than JPEG images and are used for more simplistic images, such as icons and decorative images. GIFs also support animation, as I'm sure you know.
Regarding image optimization, GIFs are great for those plain, simple images on a webpage (which include just a few colors). But for complex images and photos, GIFs are not always as attractive. This is especially true for large images.
We can get away with using GIF in the MacBook image above because the photo is small enough that a GIF works well.
PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs and they don't degrade over time with re-saves, like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images.
Notice how the PNG-24 image is over three times larger in file size than the PNG-8. This is why you need to be very careful with PNGs.
Here's an extreme example, where the image file size has been held constant at 24 kb for all three file types:
As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to remain at the same low file size.
Here are some tips to remember when choosing file types:
- In most cases in ecommerce, JPEGs will be your best bet. They provide the best quality for the smallest file size.
- Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it. Use GIFs for thumbnails and decorative images only.
- PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel as simple decorative images because of their extremely small file size.
Most image editing software can save images to any of the file formats discussed above.
6. Optimize your thumbnails
Many ecommerce sites will use thumbnail images, especially on category pages. They quickly showcase products without taking up too much real estate.
Thumbnails are great, but be careful; they can be a silent killer. The victim? Your page load speeds. Thumbnails are usually presented at critical points during the shopping process. If they are preventing your category pages from loading quickly, you could lose a potential customer. (Note: Shopify merchants don't have to worry about thumbnail optimization as we take care of that for you.)
So, what can you do?
- Make your thumbnail file sizes as small as possible. It may be worth letting quality slide in favor of a lower file size here. Remember, the cumulative impact of your thumbnails will have a huge impact on your page load time.
- Vary your alt attribute text as to not duplicate text that you would use for the bigger versions of the same image. As a matter of fact, make your alt text wildly different. The last thing you want is the thumbnail being indexed instead of the larger image. A case could be made to leave out the alt text entirely.
7. Use image sitemaps
If your site uses Javascript galleries, image pop-ups or other 'flashy' ways to improve the overall shopping experience, image sitemaps will help get your images noticed by Google.
Web crawlers can't crawl images that are not called out specifically in the webpage source code. So, in order to let crawlers know about unidentified images, you must list their location in an image sitemap.
You can insert the following line in your robots.txt file, showing the path to your sitemap:
Sitemap: http://example.com/sitemap_location.xml
Or you can submit the sitemap to Google using the Search Console.
Google has many guidelines for image publishing, which may help your website rank higher on SERPs. In addition, you can use Google sitemaps to give Google more information about the images on your website, which can help Google find more of your images than it would on its own.
Using sitemaps doesn't guarantee that your images will get indexed by Google, but it’s certainly a positive step towards image SEO. Google Webmaster Tools has many suggestions for correctly formatting your sitemap.
It is important for you to add specific tags for all of your images. You can also create a separate sitemap to list images exclusively. What’s important is to add all the necessary information, while using specific tags, to any sitemaps you have or will create. Follow these guidelines that Google suggests when creating a sitemap with image information.
8. Beware of decorative images
Websites often have an assortment of decorative images, such as background images, buttons and borders. Anything non-product related can likely be considered a decorative image.
Although decorative images can add a lot of aesthetic appeal to a webpage, they can result in a large combined file size and slow load times. Therefore, you might want to consider taking a closer look at your decorative images so they won't impair your website's ability to convert visitors into customers.
You want to check the file sizes of all the decorative images on your site and use a template that minimizes file sizes.
Here are some tips for reducing the file sizes of your decorative images:
- For images that make up borders or simple patterns, make them PNG-8 or GIFs. You can create good looking images that are only a few hundred bytes in size.
- If possible, use CSS to create colored areas instead of using images. Use CSS styling as much as possible to replace any decorative images.
- Take a close look at that large wallpaper-style background image. Those can be huge files. Shrink them down as much as possible without ruining the image quality.
One trick you can use to eat away at your background image size is to cut out the middle of the background image, and make it a flat color or even transparent. This can decrease the file size substantially.
9. Use caution when using content delivery networks (CDNs)
Shopify merchants don't really have to worry about this since we're a hosted solution, but others should pay close attention. Content delivery networks (CDNs) are a go-to place to host images and other media files. They can increase your page load speeds and help solve bandwidth issues.
The one drawback is when it comes to backlinks. As you may know, backlinks are critical for SEO and the more backlinks you have, the better your site does in the search engines.
By placing your images on a CDN, you are most likely removing the image from your domain and placing it on the domain of the CDN. So when someone links to your image, they are actually linking to the CDN domain.
Optimize Images For Website
Therefore, the best practices are:
- Just because something is 'trendy' doesn’t mean you should follow it like a sheep. Determine if it is really the best move for your business first.
- If your website is doing tons of business every month, then a CDN is most likely a good idea since it can help solve bandwidth issues.
- If your site only gets thousands of visitors a day right now, chances are your current hosting situation can handle the load.
There are ways around the image SEO issues associated with CDNs, but be sure to have a professional help you strategize your move first.
10. Test your images
The entire point of optimizing your images is to help increase your bottom-line. We've talked about reducing file sizes and getting the search engines to index your images, but what about testing images to see what converts to more customers?
- Test the number of product images per page: Since load times are an issue for some non-hosted ecommerce sites, you may find that reducing the number of images on a page will increase click through rates and sales. It's also possible that providing a lot of images per page will improve the user experience and lead to more sales. The only way to find this out is to test it.
- Test what angles your customers prefer: You may see an increase in customer loyalty by providing the views your customers want to see. A great way to figure this out is to survey your customers about what they liked the most when viewing your product shots. Surveying and talking to your customers is a great habit to get into, in general. Still, verify by testing.
- Test how many product listings you should have on category pages: 10, 20, 100 products? Test the number of products you list on category pages to see what works best for your customers.
Keeping beautiful photos functional
Now questions about your ecommerce images won’t leave you tossing and turning for hours.
You know some image SEO strategies to get your product photos into Google image search results. You know how to fully leverage alt attributes. You know the difference between file types and when to choose each option.
Still, image optimization is complex and we’ve just scratched the surface, so feel free to leave any questions you might have in the comments below.