How can you optimize your image's file size?

Source: http://blog.hubspot.com/marketing/how-to-get-more-leads-by-optimizing-your-website-images

The best way to decrease your image's file size while maintaining the image's visual aesthetics (e.g. not make it look like a pixelated mess) is to use Photoshop


1) Crop out all white space around your image.

You don't need all that extra space. You can use HTML/CSS to add extra padding around the image on your landing page. In Photoshop, use the crop tool to eliminate extra white space.
optimize-image-1

2) Make the image as small as it needs to appear on the screen. 

By default, your high-def image may be 2,000 pixels wide. That's way too big. On most landing pages, your ebook image will appear as no more than 300 pixels wide. In Photoshop, clickImage > Image Size > edit the width. Input a smaller width, such as 300. Make sure "Constrain Proportions" is checked before editing the width.
optimize-image-2

3) Make the image transparent.

Delete the white background behind your image. Sometimes it's as simple as deleting the white background layer.
optimize-image-3
Other times it's more complicated. If your image has only a single layer, right click on that layer and click Layer from Background.
optimize-image-4
Then use the magic wand, polygonal lasso, or quick selection tool to select the white background. Once the white background is selected, delete it. You'll then have a transparent image.
optimize-image-5-1

4) Save the image as a PNG-8 file. 

Now save the image in the smallest file size possible without compromising the visual quality of the image. In Photoshop, click File > Save for Web. Then select PNG-8  and click Save. Here are my settings:
optimize-image-6

Alternate Methods of Optimizing Image Size

If you don't have Photoshop, there are other ways to reduce your image size, but you may lose control over the quality of the image. Here are some resources you can use:
  • Compressor.io is capable of working with 4 different file types: JPEG, PNG, GIF and SVG and provides an option to perform both lossy or lossless compression.
  • TinyPNG uses lossy  compression techniques to reduce the file size of PNG files. It allows uploading multiple images (up to 20) with maximum file size of 5MB.
  • Optimizilla uses a smart combination of the best optimization and  lossy compression algorithms to shrink an image file to the minimum possible size while keeping the required level of quality. It supports upload of up to 20 files in JPEG and PNG formats.
  • Image Optimizer - another free online image optimizer
  • PowerPoint - You can also use PPT to compress images. Here is the official documentation.
  • WebPa new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. Check  https://developers.google.com/speed/webp/gallery.

Popular posts from this blog

3-Day Preparation for CAPM Exam 2018

Share your posts to Google+