Tag Archives: optimization

Image Processing

Leave a reply

Optimize ImagesImages are a critical element in your website, yet they can also slow down your website if your images and not optimized and properly sized. Image processing is critical – we have three recommendations for image sizing and optimization:

  1. Size your images to the exact size they will be displayed on your website. If your image size is going to be 300 pixels wide and 500 pixels high, make it exactly that size before you upload it. If you want the image to open up a larger image when it is clicked, we recommend that you make two images of the sizes you will use – the displayed size and the larger size that will load when the image is clicked. Yes, html can resize images for us, but it slows down the page and loading an image larger than necessary also slows down the page – especially if the images are very large. We use PhotoFiltre for resizing. It’s a free utility that is very powerful and easy to use. You can not only resize but also crop and edit your images. You will notice that clicking on the word Photofiltre will take you to a Snapfiles.com page. I recommend that you use Snapfiles.com and only Snapfiles.com to download freeware and shareware. All the downloads are certified virus-free, it warns you if the download is going to try to load extra programs as well, and the reviews are great.
  2. Optimize your images. Images contain a lot of extra stuff that just takes up space. Use RIOT (Radical Image Optimization Tool) to remove the junk. It will dramatically reduce the file sizes, especially with jpg files. RIOT is also a free program. Fantastic program.
  3. If you want your pages to load quickly, all your images and files such as pdf files should be stored on a Content Delivery Network (CDN). Using a CDN can be quite expensive, but Amazon provides an excellent CDN free, provided you don’t use more than 5GB of storage. The free guarantee is only for a year, but I have been using mine for over a year and haven’t had to pay anything yet. If they do start charging, the rates are exteremely low. The biggest challenge with using Cloudfront is that it is a bit tedious. First you create an Amazon Web Services account, then you create an Amazon S3 ‘bucket’ where you store your files. Your bucket should have sub-directories. You then establish an Amazon Cloudfront distribution from your files in Amazon S3. The Cloudfront distribution will have its own url which you use on your webpage. With WordPress, you use that full url including the file name instead of uploading the files to the WordPress account. But the pages load much faster – it’s definitely worth the tedium involved.

The image in this post was resized by PhotoFiltre – if you click on the image you will see the original size image. RIOT reduced the size of the larger image from nearly 60kb to 18kb. The smaller image was reduced by similar proportions. I uploaded them to my S3 bucket and then used them in the post. The link to the larger image had to be hand-coded.

Utilize these three recommendations and your web pages will load very quickly, as far as your image management is concerned. There are several other issues to address to optimize your web page loading speed, but those will be topics for other posts.

Optimizing Web Pages

Leave a reply

This article discusses some of the basic concepts of optimizing a web page to make the web page load quickly – or at least, more quickly. It is for the benefit of those who are not technically oriented, but need to have a means of discussing these concepts with their web developer.

Reduce the amount of data required to display the page

A web page consists of html, scripts, style documents, and media such as images and videos. These components should be reduced in size as much as possible to shorten the time required to download them. Images typically represent the greatest opportunity for optimization. Browsers cannot display image resolutions higher than 72 dpi, so there is no point in loading anything of higher resolution. Additionally, the images should be sized to the size being displayed rather than having html resize them. The html code itself should be concise and correct. The code should be validated to ensure that it meets the requirements of the document type. All presentation elements should be moved to an external css style sheet. On a website with many pages, there should be a fundamental style sheet and then a separate style sheet for each page. Smaller websites should have only one stylesheet. Finally, css and javascript files should be ‘gzipped’ (compressed) and/or ‘minified’ which removes non-essential characters without changing the functionality. If you have a WordPress site, the W3 Total Cache plugin will do that for you.

Reduce HTTP Calls

The next important key step to increasing web page loading speed is to reduce the calls to the internet within your web page (reducing HTTP calls). There are several aspects to this issue: combining scripts and style sheets, using image sprites, and avoiding redirects or frames. These are critical areas in which your website performance can be improved.

Content Distribution

If your audience is widely distributed geographically and you make extensive use of graphics and/or video files, you should be using a Content Delivery Network (CDN). These are systems with widely distributed servers that are optimized for content delivery. Also, loading your videos and images on a different domain (such as a CDN) allows browsers to load your content more quickly. Amazon S3 is the most widely used CDN and certainly the most cost-effective. You might also use a second domain on your webhost to store the style sheets and javascript elements to allow them to load faster, especially if you use cookies. Content should always be delivered from a domain that does not use cookies.

In violation of concepts above, the home page will benefit from having style and javascript elements within the page. This works because it reduces the http calls, but it should only be used on the home page. In this case, a gzipped version of the style elements must be placed at the top of the html page within the head section and the javascript elements – just those required for the home page – placed just above the closing body tag.

Network Issues

If your optimized website still loads slowly, you will need to evaluate your webhost and your ISP. If your webhost is slow, your website will load slowly. You will need to upgrade your webhost. Or it may be just that your ISP speed is slow in which case other people will see your website load quickly, but you will always see it load slowly. Time to shop around for a new ISP.

These are just a quick general discussion of the aspects of website optimization. Please contact us if you have further questions.