I'm developing a site which has a slider on home page.I'm using nivo slider.
The images in the slider are of sizes 1600*1200.Due to this the home page is taking too much time to load.
Is there a way so that the images sizes are reduced on the fly or I've to first compress each image and then upload it to the server.
Is there any other alternative method, please suggest one if any.
You can load the images asynchronously with help of jQuery. Here is the tutorial for loading images in nivoslider asynchronised. This will reduce the page load time tremendously.
You can load the 1st image before the others, which is enough to show the slider. Afterward, you can asynchronously load the other images.
Related
I am developing a website with a main page where a lot of products are displayed each with his own image. I would like to ask is there a better way to implement image loading to improve user experience ? I am not talking about optimization but purley about user experience. What I mean is should I let the image load slowly and the user has to wait on a blank screen for it or should I replace the image with a loading animation until it loads. Sure I have a loading screen for loading new products but I am talking about the whole product card is there all the data is there it just waits for the image and on it's place is a loading animation, I think this way the user will know that there will be something there and will wait to see it. If I should do that what is the correct way to implement it? Do I use promises to wait for the image to load or some other way ?
Currently I am using this way to load images <img src="url"></img>.
I'm creating a website that loads some images on first load, then if a user clicks on one of the images the same image opens in a popup but bigger (Lightbox).
My question is, is it better to just use the same large image and resize the dimensions for caching (So the user already has loaded the image) or is it better to first load a smaller thumbnail then the bigger image once the pop-up opens?
I'm trying to reduce site speed as much as possible as there are a lot of images.
I'm using Masonry for the site and Magnific Popup for the image expand if that helps.
the thumbnail image size is around 100kb whereas the larger image is between 200-300kb.
The main idea of any lightbox-type script is that they allow you to display preview images (thumbnails) on your page and load larger versions only when needed (e.g, when user clicks on the thumbnail). This greatly helps to reduce page weight and load time. Modern scripts (like fancybox) can display preview image while larger version is gradually appearing over it thus relieving users from staring at blank screen.
image = "Your image link / location here"/ZoomService
image.Zoom(100)
--if you use MilkWar web coding use that
recently I made a website for my photography. htttp://www.simotamas.com
I am a newbie, so its not the best site but it works fine for me, I got only one problem, when a site is loaded on a device for the first time, the gallery loading time takes up to 1-2 seconds.
Could you guys please check if I mess up something with the code?
Or should I made the pictures even smaller?
Any way I could increase the loading performance.
I would be really thankful for any advice.
Some points you can consider
Use thumbnails for preview (low resolution) , while clicking load actual image.
Load images of only visible part first then load the images in bottom. (May affect user experience)
if you have cpu power , use any libraries like cache tools or compression tools like
https://nielse63.github.io/php-image-cache/ . benchmark it carefully.
use gzip if you are not using gzip compression for your server.
The fact your website doesn't wait for the image to load is considered a plus (look into asynchronous web page content loading for a good read) that said you should compress your images before uploading them.. tinypng.com is a nice tool for it... But if it's a photography website doing so would reduce picture quality... Try to play with Photoshop save settings to find your ideal compromise between quality and size with respect to "memory" size... Pictures are heavy.. high definition and resolution will obviously result in heavier files to download
Update: another thing you could do is actually display (smaller) thumbnail and only load the full picture on request. I.e: user clicks and image opens in new tab
It would help if you create smaller thumb versions of your images so the browser can initially load these ones for the overview and no need for scaling way to big images down while rendering the page. An image should always be downloaded in the dimension it's going to be presented.
I have a web application running on local host. The requirement is to load multiple rectangular jpg images (96 images, average 7k in size each) and show on home page when it runs. Images are showed in a grid of 8x12 rows/columns. I am loading image by setting the 'src' attribute of the 'img' in javascript. The url assigned to the 'src' attribute is same for all images but the image id is different. Images are loading but the main issue is that they are not loading very quickly and they are some what loading in a sequence means 1,2,3,4... and so on but some images are not loaded in sequence. I want to improve the performance of this page. I have tried the figure out the timings at different points like:
When call is originated form client (image src attribute is set)
When server is receiving call. (the page on server which serve individual image)
When server is about to return the image.
When on client side image is received/showed (image loaded event called in javascript)
It turned out after looking at the collected data that main time is lost between 1 and 2 above that is between the client side call is originated and server is receiving call for a particular image.
I have also tried setting parameters like maxWorkerThreads, minWorkerThreads, requestQueueLimit and maxconnection in machine.config but no significant improvement yet.
Can someone please help me in this situation as i am stuck here since many days and i am really short of time now. Desperately needs to improve the performance of these images loads.
Thanks in advance.
Since you stress the lack of time, I would advise you to try a jQuery plugin that loads images on demand. The gallery in which you load the pictures, does the user scroll in it? Or is it 1 big field?
If it's a gallery the user can scroll in, I'd strongly suggest you take a look at lazyload. What this plugin does, is it fetches the image only when it is needed. As long as it's not on the screen, it will not be loaded. For a brief example, have a look at this demo.
I hope this can help you out.
I'm trying many problems with the time loading of my web page:
www.alvaromillan.es.
I've tried to minify the js and the images but the problem is, as you can see, that my web site is only this page so every image and js is on this document...
The loading time is really high and even the smooth scrolling movement lasts a lot and the first time you use it it doesn´t go fine...
Please may any of you help me??
I took a quick look at the page just using the chrome developer tools and while there are probably several things you can do which YSlow would suggest, I think the biggest gain would come from optimizing and spriting your images. 131 of the 156 requests on your page are for images. Thats alot of images and many are fairly small. Also alot of the images seem quite large in bytes for their size. Here is what I would do:
Combine the images using several sprite sheets about 50k-100k per sheet.
Use the PNG format.
Quantize the sprite sheets to 8bit PNGs. My guess is that you will not experience perceptible quality loss by doing this. You could use spmething like pngquant to do this.
Use something like optipng to apply lossless compression on the quantized image.
I think this will yield dramatic improvements.
As skaffman suggests, do run yslow and/or google page speed test for more thorough suggestions. I also like using webpagetest.org which provides great metrics for optimizing pages.
Give the YSlow Firefox plugin a try. It will analyze the load times of your site and advise you the best course of action to take to fix it.
OK, here's some quick initial thoughts...
Flush the page after the head so that the browser can start downloading those resources sooner.
Remove the iframe
jquery appears to be loaded twice - once directly and once via google.load
Can you defer the loading of the javascript until later e.g. put it at the bottom of the page or load it asynchronously?
Rather than preloading the slideshow images - why not load them on demand when clicked on, or lazy load them after the page has finished load?
Also do you really want IE to emulate IE6???