The average web user will only wait up to 8 seconds for a page to display. With the optimum webpage size being less than 100k, if you're in an industry where images are your business, optimising those images for your website can be crucial.
Optimising web graphics correctly involves finding the right balance between image quality and image size. As each image should certainly be no more than 30k in size, following these three steps will optimise your images and make your page load faster.
Resize the Image.
Using a photo or image editing software package, you can re-size or crop your image or photograph to the correct dimensions that it will need to be for the website space. This is a better method than resizing the image within your html WYSIWYG editor, as despite the change in appearance, the image file size will remain unchanged.
Decrease the number of colours.
Reducing the amount of colours used in an image file will also reduce the file size. Again, within your image editing software, you can reduce the amount of colours that an image is using, ensuring that little necessary detail or quality is lost. For example if you have a black and red logo saved as a .gif file, there should be no significant loss of quality to limit the colours from 256 colours to 4-8 colours which will notably reduce the file size. If your image uses gradients and you are finding that you are getting colour blocks across the gradient areas, simply add some dithering to your optimised file. Dithering will increase the file size so you may have to get the balance between colours and dithering right for optimum size. You should however still find the image size significantly reduced despite the use of dithering web design connecticut.
State the height and width of your image
Whenever you use an image on your website, you should always try to include both the image height and width attributes in your html. This will allow the browser to quickly identify the size of the image, and move on to loading the rest of the page without having to wait for the image to load, thus increasing your load speed.
Choosing the correct file format
An important way to reduce image sizes is to use the appropriate file type suitable for an image. There are two common file types used for websites graphics, Gif and JPEG.
Most of your web images should really be saved as a gif file. A general rule of which file type to use, would be that most images except photographs should be a .gif file. This includes, simple line drawings, shapes, small icons, anything that isn't too complex web design connecticut.