Tag Archives: optimise images

Why you MUST optimise your images for the web

When you upload image to be viewed over the internet through a web browser then you have to make sure that they are “optimised” correctly for the best user experience.

For example, most digital cameras these days will take a high resolution image which is nice to look at locally on your pc screen, but these usually come at hefty file sizes and dimensions and is impractical for viewing on a web site due to the various speeds of users connections and screen resolutions.

The result of uploading high resolution images to a web page will result in the following problems and knock on effects:

  • depending on the users internet connection speed, the user will need to wait whilst each image downloads before they can view them
  • depending on the users screen size, a high resolution image may not render correctly in the  browser and may overcrowd the users screen space
  • if your page takes long to load due to downloading many large files, google will consider this to be a slow site and will not rank you.
  • if your page takes long to load, ie more than a few seconds, then the user may decide to look at another site which loads faster.

The first two items result in poor user experience and the third and fourth are knock on effects because it will result in bad rankings for your site and loss of visitors.

The goal is to make sure that your images download fast and are a decent enough quality for the end user to view. As long as you optimise your images for that in mind, then the end user experience is higher than that of a site where it takes a long time for pages to load and for images to appear slowly.

So, What is  a Good Size for Images?
If the images are photos, then the most flexible format is .jpeg (or .jpg). If you resize jpeg images to 550 pixels wide, disregard the height (although I dont recommend uploading images that have a height higher than 450 pixels high), usually 72 dpi images will result in app. 100kb in size. It is possible to optimise 550 pixel wide and 450 pixel height images to between 50kb – 75kb with the right software, but most resizing software can optimise images to a suitable level.

Perfect formula is: 550 pixel wide jpg in 72 dpi with max file size of between 50kb to 100kb.

This will provide a decent quality of photo viewing and optimal download of images.

What Software can i use to resize my images?
The options are vast so I am going to give you a couple of examples.

For PC – Light Image Resizer 
For Mac – Pixillion Image Converter

Always keep in mind that even though you might have access to the fastest broadband internet with lightening download speeds, there are still many people that dont, there are many people still on dialup or slow 3g connections not to mention you can get penalised by search engines for having a  slow web site.

Try and optimise images when and where you can.

Optimizing Images to Reduce Page Loading Time

Optimizing your website images makes it easier for Internet users to view and navigate your site.

You only have seconds to make an impression. Regardless of their Internet connection speeds, most netizens lead a fast-paced lifestyle.

Everybody is busy with everything else aside from their computers. The last thing you want to do is to make them wait.

You only have seconds to convince your market that it would be worth their while to look through your website.

A slow-loading site immediately kills any interest they have for you.

Making fast-loading pages
Text normally does not give problems with regard to a web page’s loading time. It is the images and the animations that delay displaying your website. While keeping images and animations to a bare minimum are helpful, there are times when the image files are still big.

Even if you have just 1 image file, it could still prolong loading time.

Regardless of how many images your site has or how many animation files you want to put, image optimization is always helpful.

Below are 3 image formats you can use for your images. Selecting which one is best for an image can cut down your site’s overall size to significantly hasten your website’s loading time.

1. Save image files as JPEG
JPEG files are compressed images. If you have an image-editing program like Adobe Photoshop, you can crop out unnecessary elements of a picture and save what you need as a JPEG file. JPEG is best suited for images that have gradients and soft edges.

You can adjust the degree of compression when saving. The more you compress the image, the smaller the file size becomes. However, smaller image sizes require minimal sacrifices on overall image quality.

2. Use GIF
GIF stands for Graphics Interchange Format. This is a type of bitmap image format that supports up to 8 bits per pixel. GIF images have a reference palette of 256 unique colors. GIF supports both still images and simple animations that only have looped movements.

GIF is best suited for logos that normally have less than 5 colors. GIF is favorable for flat images with defined edges.
3. Opt to use PNG images
PNG or Portable Network Graphics also belongs to the family of bitmap image formats. PNG was developed to eventually replace GIF.

The 2 bitmap image formats closely resemble each other with some differences:

• You can compress PNG files more than GIF files.
• PNG allows you to control image transparency better than GIF can.
• With a wider range of color depth, PNG allows for better color precision and smoother edges.
• GIF images receive more browser and software support than PNG.
• PNG cannot support animations. GIF can.

No language barriers
HTML, XHTML, and CSS all support the 3 image formats featured in this article.

You can stick to one format, or use all 3 formats depending on what type of images or animations you need to help your market understand your brand better.