Website Performance Tips: Five (5) Ways To Optimize Images

Posted on October 28, 2013. Filed under: website performance tips | Tags: , , |

If you are familiar with online tools that assess the performance of a website, you’ll notice that image is one of the determining factors that create a huge impact to its loading time. Google PageSpeed Insights for one, includes Image Optimization as one of its major requirements among other rules such as removing landing page redirects, leveraging on browser’s caching and minifying CSS/HTML/Javascript deliveries just to name a few.

ways ways waysHow To Optimize Images To Improve Load Speed

Give your visitors an excellent user experience (UX) by resolving delay issues on your pages. Here are five (5) ways to optimize your pictures.

  1. Apply the correct format. You have at least four popular formats to choose from during the web design stage. Stir away from BMPs and TIFFs. Use PNGs for transparency purposes and if you do not intend them to be displayed on mobile devices. Save as JPGs if your photos have millions of colors and if you need photographic images. If your graphic is less than 10×10 pixels or your palette is composed of less than 3 colors, opt for GIFs instead. You can also go for the latter if your photo is animated.
  1. Resize. Learn to scale them down based on their usage on your site. Crop the excess corners and extraneous background as necessary. Ensure that all pictures are resized to the exact dimension to save digital resources. If it is essential to have both big and small versions of them, do not shrink the large ones through your source codes. Create a second copy for smaller graphics, e.g. thumbnails, and provide an option to view the larger ones in a pop up format or a separate tab or window.
  1. Compress. If you’re using Photoshop on your web design tasks, select the option “Save for web” with 70% as standard quality. Otherwise, there are some online compressors that you can check out to help you with the compression.
  1. Specify the width and length during coding. Similar to how alt tags are applied to improve global and Philippine SEO rankings, putting in the dimensions in the properties can enhance the speed of your page as well. Example:

<img src = “my-picture.jpg” height=”200” width=”350” />

  1. Use CSS Sprites. Combine multiple icons into one graphic – i.e. backgrounds, corners and menu items. Define each picture based on their exact pixel position through CSS and reference them correctly on the body.

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

One Response to “Website Performance Tips: Five (5) Ways To Optimize Images”

RSS Feed for Meet a LinkBuilder and Learn Everything about SEO! Comments RSS Feed

[…] global and SEO communities know that image optimization is critical to website performance. In fact, there are several ways to work around it. There’s […]

Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: