How to Optimize Images for the Web

May, 2018

Optimizing images by "Saving for Web" can enhance the appearance of your website and improve page loading times. Learn how to improve the quality of your web images.

How to Optimize Images for the Web

A picture says a thousand words, and hopefully, none of those words are: "Why is this so pixelated?"

This handy guide to saving images for the web will ensure that you can give your online presence a bold pictorial pop without negatively affecting your website.

Which Images Need to Be Optimized?

ALL OF THEM! Blog images, home or secondary page images, landing page banners, and all other images must be optimized.

Why Is It Important?

People often feel forced into a compromise when placing pictures on their websites. The balance of image display quality versus file size has to be carefully navigated. You want every asset associated with your brand or product to look professional, but how can that be accomplished without creating a giant file that slows down your site? If you are using image editing software similar to Photoshop, just follow the simple steps below.

Step-by-Step Instructions

  • When your file is ready to be saved, navigate to File > Export > Save for Web.
  • Choose a format: 
    JPG: This format is best for an image composed of a variety of colors and detail. The file will be saved with a ".jpg" extension.
    PNG: This format is ideal when you are dealing with a logo or image that is composed of a limited number of colors and details. The file will be saved with a ".png" extension.
  • Now for the balancing act: 
    Adjust the quality of your image until your file size is under 70kb
    If you have a hero image or banner image the maximum size can be increased to 150kb. These items sometimes demand a higher quality.
  • Hit "Save," and you’re good to go!

If you're looking for a little extra help, a professional touch to give your web projects a competitive edge, reach out to Informatics. We are here to help!

comments powered by Disqus