website performance tips

Website Performance Tips: Top Online Tools To Optimize Images

Posted on August 15, 2014. Filed under: website performance tips | Tags: , , , |

One of the best practices in improving page speed is to optimize individual webpages. After all, the faster the page loads, the higher the chance of conversion, which can later be maximized to leads and sales.

A webpage generally covers multiple elements that can range from texts to pictures and videos. We’ll focus more on pictures for this post.


How To Optimize Images Online

All 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 considering the file format to use, specifying the width and height during the course of coding, applying CSS sprites in the web design. And then, of course, there’s the most commonly used of them all – resizing and compression.


Reduce the size of your images without compromising quality. Check out these five (5) tools on the web.




Page Rank: 6

Alexa: 13990

Description: by Yahoo Developer Network uses techniques specific to remove unnecessary bytes from the files. It is a “lossless” tool which means the visual look and quality are not comprised during the process. The site reports the number of bytes saved and provides downloadable zip file containing the image files.

  1. TinyPNG


Page Rank: 5

Alexa: 13657

Description: TinyPNG is a free service specific to PNG formats. Shared by Voormedia, a web agency in Amstermdam, the site utilizes smart lossy compression technique that preserves full alpha transparency. It selectively decreases the number of colors in a picture by combining similar hues (called “quantisation”). This later on creates a large difference in size. Major browsers including mobile devices are supported.

  1. ImageOptimizer


Page Rank: 5

Alexa: 30117

Description: ImageOptimizer is another tool to compress photos. A great thing about this is that aside from the web version, you have an option to download the software straight to your desktop. There’s the free edition where you can compress in bulk and there’s the professional one for only 29 pounds.


  1. JPEG-Optimizer


Page Rank: 4

Alexa: 39325

Description: JPEG-optimizer functions similarly like the tools above. Simply upload a digital photo and select the compression level between 0-99 (default is 65). You can choose to resize the dimensions if you want to.


  1. ShrinkPictures


Page Rank: 2

Alexa: 44028

Description: What makes ShinkPictures different is that you can add an effect either in grayscale or sepia to your uploaded picture. It has a batch photo feature that is available in free trial.

Read Full Post | Make a Comment ( None so far )

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.
Read Full Post | Make a Comment ( 1 so far )

Website Performance Tips: Top Three (3) Tips To Optimize Your Mobile Site Speed

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

Page Speed is critical not just to desktop-based websites but to mobile sites as well. According to an article posted by Econsultancy:

  • 74% of users will abandon after waiting five seconds for a mobile site to load.
  • 57% have experienced problems when accessing a mobile site.
  • 46% would not return to a poor performing site.

Needless to say, every business owner must also ensure that their mobile-based website is fully optimized and performing good if not better than its desktop counterpart. Remember that “Conversion rate increases 74% when page load time improves from 8 to 2 seconds.

Here are some quick tips to help improve the response time of your website on mobile devices.

1. Clean up your codes. Remember that the smaller amount of data transferred, the faster your pages will load.


  • Minify Javascript, CSS and HTML. Remove Javascript libraries that you don’t really need. If you have several installed, see which one you use the most and check if you could apply one of its functions in multiple ways so you could get rid of the other ones. Compact your codes and remove extra white spaces, unnecessary characters, line breaks and comments to save bytes of data. Reduce the amount of HTML needed to render the above-the-fold content.
  • Avoid landing page redirects. Per Google PageSpeed Insights, redirects trigger an additional HTTP request-response and it is for this reason that you have to keep them in bare minimum. If it can not be helped, have the redirection done on the server-side rather than the client-side.
  • Reduce HTTP requests. Combine stylesheets and Javascripts into a single file.
  • Leverage browser caching. Set an expiry or a maximum age in the HTTP headers. In this way, the browser would be instructed to pull up previously downloaded resources locally rather than over the network.
  • Enable compression. Compress resources using gzip if possible.

2. Maintain minimal images. Apply proper format for your images. Compress their sizes too. Utilize sprites to group multiple pictures into a single file. Eliminate the ones that function for visual display purposes only.  Employ CSS3 for box shadows, border radius, gradients, skews and other effects.


3. Replace Click Events with Touch Events. There exists a 300ms (+/-) delay between these two events therefore talk to your PH iOS  developer or PH Android developer to program the codes in such a way that users could access information through touch instead of click.

Read Full Post | Make a Comment ( None so far )

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