In this golden age of microwaves where you can eat your food after just a few minutes, it is unacceptable for web pages to load longer than you can heat up your food.
We live in a world of technology where every nanosecond counts. Visitors would immediately close the tab they opened for your website if it takes longer than five seconds to load. Here are some tips to make large graphics on your website load faster, a trick used by PaperMart, a packaging website.
Use the proper height and weight attribute of the image in your HTML code. The first thing the browser looks for when loading the page are the attributes. After locating it, it will display the text followed by the image.
Without attributes, there is a delay because the browser will load the images first before the texts.
Remember to use attributes on all your images, even the teeny-tiny ones.
If you have a large image size, use editors to edit your image thus reducing the file size. Reducing the attributes directly on the HTML code will not change the file size so you have to edit the image first. Then you can use the right attributes on HTML. This way, the image will be smaller and will load faster.
Animations are great eye-catchers but it also slows down the loading of the page. Use minimal animations and limit the cycle rather than setting it on an endless loop.
Use the correct format for your images. GIF are only suitable for simple images with little colour like a clipart.
JPG is for complex images with high definition edge on them. While the PNG format is good for both kinds of images, you may want to skip using this since it creates large image files and will not help in loading your page faster.
The technique for large image to load faster is to slice them into smaller pieces. This process is called image slicing. Search online for free image splitter software.
Thumbnails are smaller versions of the original image. The actual image size only shows when you drag the mouse over a thumbnail.