Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to Optimize your background image for fast loading website

How to Optimize your background image for fast loading website

It is very important to optimize your website speed by compressing your background images and size your image accordingly.

The best way to create optimized images is to control the image resolution and image file size.

1) Controlling Image Resolution:

  • HD IMAGES – for larger monitor or retina monitor, the image size you should be using is 1920px by 1080px. Make sure your image size DO NOT exceed 600KB
  • MINIMUM IMAGES – for normal desktop/laptop resolution, the image size you should using is 1366px by 768px. This is the minium image size you should be using to get the best image resolution in most computers. Make sure your image size DO NOT exceed 400KB.
  • MOBILE IMAGES – for background images that ONLY display in mobile devices. The maximum image size you should be using is 1024px by 768px. For retina devices, you may want to use images up to 1920px by 1080px. Make sure your image size DO NOT exceed 200KB.

2) Controlling Image File Size:

Once you have the resolution that best fit your need, you MUST always compress your image file size. Here are some tools that we use daily:

  1. http://www.smushit.com/ysmush.it/
  2. https://kraken.io/web-interface

Tags: , , , , , , , , ,