0

I am new to web development.I am working on an e-commerce website. I want my web pages to load faster. Since images contribute a lot in the performance of web pages, i would like to strictly work on the image sizes,resolutions for different size of screens of media. Please help me with this. Do i get any tool or any plugin for this? Or any source about this topic which covers most of the things?

Varuni N R
  • 802
  • 3
  • 11
  • 31

2 Answers2

2

You can resize the images for different screen sizes. When you upload images to the website, resize the images by writing a server side script. And restrict the images to the larger size you need.

For example. By assuming your website needs 1024 * 740 resolution images, you can restrict the users to upload only the 1024 * 740 images. After upload happens you can resize the uploaded image in to few smaller resolution image files by server side script. Then you can load the resized images using JavaScript according to the screen resolution.

Hope this link helps you. http://www.w3schools.com/css/css_rwd_images.asp

Since you are working on a e-commerce website, I hope you have to use bitmap images. If you can try to use vector images for banners and sliders. It is faster than bitmap. https://en.wikipedia.org/wiki/Vector_graphics

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
NiroshanJ
  • 558
  • 1
  • 5
  • 20
  • Instead of resizing images on server side,is there any way to resize images using js? any plugin? – Varuni N R Jan 09 '16 at 06:25
  • Hope this will helpful. [link](http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload) [link](https://davidwalsh.name/resize-image-canvas) – NiroshanJ Jan 10 '16 at 04:49
1

  1. Use different resolutions of images for Desktop and Mobile using responsive Image srcset property

  2. Then use lazy loading images for better speed using this plugin LazySize

Read this article for better understanding Immaculate Imagery with Lazy Pictures & BPG

Sivadass N
  • 917
  • 4
  • 12
  • 23