Web Hosting Forum | Lunarpages

Author Topic: eCommerce site  (Read 5171 times)

Offline tcl

  • Spacescooter Operator
  • *****
  • Posts: 30
eCommerce site
« on: May 18, 2013, 09:55:49 AM »
hi,

I have developed a eCommerce site which is image based. I am wandering if index page load is high then may problem load my site. Is there any compress tools that compress the image when request the site or any other tolls that may help ?

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6187
Re: eCommerce site
« Reply #1 on: May 18, 2013, 12:11:33 PM »
Most sites, including most ecommerce sites, are image-intensive, so it is always necessary to be careful with the number of images and their sizes. Almost all image formats are compressed to some degree (including GIF, JPEG, and PNG), so the actual image expands in the browser to something actually larger (in bytes) than the file you see on your server. One common mistake with images is to serve up full sized images (straight from the camera) and let the browser scale them down to some smaller size. This wastes bandwidth and slows the transmission and processing of the images. Scale down your images to the proper display size before you upload them to your server. Strongly consider providing separate "thumbnail" images for indexes, rather than scaling down the full size images in the browser to get the thumbnails. If you have many small images to use on a page, consider using "sprites", where the images are all glued together into one medium-sized file, and CSS is used to display just a selected fragment as a background image. This helps by reducing the overhead of many separate image files.

You can control the amount of compression in JPEG images by setting them to "low quality" when saving the images in a photo editor such as Photoshop or GIMP. They won't be as sharp as a "high quality" image, but the files will be a lot smaller. Be sure to keep the originals around, in a safe place, so you can always go back to a higher quality image. You can't get the quality (sharpness) back from a low quality (highly compressed) image by resaving it as "high quality". I don't think you have any options for GIF and PNG files -- they have one compression method and that's it.
Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-

Offline Lalithya

  • Pong! (the videogame) Master
  • *****
  • Posts: 24
    • Web Design Company
Re: eCommerce site
« Reply #2 on: August 06, 2013, 03:39:03 AM »
I use a combination of ImageAlpha and ImageOptim along with the built-in sips command to resize the images.

Offline Nepster Martin

  • Website Clone | Website Clone Script
  • Intergalactic Cowboy
  • *****
  • Posts: 68
    • NCrypted Technologies
Re: eCommerce site
« Reply #3 on: August 08, 2013, 02:54:19 AM »
One of my client have same issue before years at that time we have crop images and use perfect images on each page like on home page image size is small and on product page image size is medium and when customer click on image it show large image in zoom. So it will surely helpful to decrease home page loading time to your website.

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6187
Re: eCommerce site
« Reply #4 on: August 08, 2013, 05:30:31 AM »
If you need to display an image in a wide range of sizes, or if the user will zoom in on them, that can be a problem. If you start out with a small (scaled down) image, information has been permanently lost. If you magnify it (zoom in), it will be fuzzy or blocky because there simply isn't the information there to fill in the new pixels. For responsive design, it may be better to offer a variety of sizes for an image and select which one based on the screen resolution (and thus, the probable final image size when zoomed in or out a small amount). If you have something like a parts diagram, where a customer may greatly magnify it to look at details, you should start with a large (detailed) picture and accept the extra bandwidth it will take to load. You also might consider an SVG format diagram, where you're sending over the same amount of data no matter the scale (not usable for images, just line drawings).

Keep in mind that a browser's image zoom capabilities are not going to produce quite as good quality of an image as would a good photo editor like Photoshop or GIMP. Substantially decreasing the size from the transmitted original (on a browser) won't look all that good, and increasing the size, as I said earlier, will result in a bad image no matter where you do it, because the necessary data just isn't there.
Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-

Offline davidfrost

  • Space Explorer
  • ***
  • Posts: 8
Re: eCommerce site
« Reply #5 on: August 09, 2014, 07:35:12 AM »
Hi Wes, can you also post a link to a tutorial that you used to set this up if there's any?

 

Share |