I'm in the process of making a website for a school group and the website will have a lot of pictures of its activities. I'm using lightbox so the pictures will display as a slideshow and I changed the dimension of the pictures so the "current" picture on slideshow isn't as big as the original. I still find about 5 seconds delay from opening the picture or going to the next picture. I'm wondering if there's a way to achieve a faster load time or even another method I didn't consider.
I'm using xhtml, css, and php for my site.
Sorry for answering, but I can't write comment now...
I'm doing it other way, after upload, I resampled picture to big picture and thumbnail.
Ofcourse you can resampled picture everytime, but this is propably reason, why you have to wait so long, and it is lots of work for server, if you have many visitors in one moment.
So for me is best way to said, that big image is 640x480 max, and then save picture after upload to this size, ofcourse resampled by the same ratio.
Edit: From your post, I can't know if you resizing/resampling image, and where, in HTML by setting height and width or in PHP and how often.
Let's say you have a picture on the server, and its size is 8000x6000. its size could be something like 10 MB.
Now let's say you want to display this image in a web page and do it like this:
<img src="largeImage.jpg" width="800" height="600"/>
The browser will download the large image (10 MB), which takes a whole lot of time, and will then resize it to 800x600 in memory to display it on the web page (this consumes memory and CPU time). Total time: 25 seconds.
Now suppose you resize this image to 800x600 and put this resized image on the server. You then display the image with
<img src="smallImage.jpg" width="800" height="600"/>
The small image will look identical to the user visiting your web page, but the browser will only have to download a small image, which will be something like 100 KB large (100 times less than the large image). The time taken to download the image will be divided by 100 as well (0.25 seconds), and the browser won't have to load and resize a huge image in memory (less memory, less CPU time). Your image will be visible almost instantly.
There are many tools (I use Irfanview myself) which are able to take a large collection of images and resize them all at once. You should do that.
Related
I'm developing IPS 4. I have profile popup:
The profile cover loads very long, because cover dimensions and size are big. So I've decided to make a PHP API which resizes images to needed size and then displays the resized image.
Is this good idea to make cover upload faster?
You need to populate a 436x85 box with user-provided pictures.
My own digital camera has a 18 MPx sensor that produces 4896x3672 pictures that use around 7 MB when compressed as JPEG. Imagine you display e.g. a dozen profiles per page. That's 84 MB worth of network transfer (more than a typical MP3-encoded music album) for a single page. JPEG compression roughly accomplishes a 1/10 ratio so you can assume 840 MB of RAM just to store the pictures. And they you have the overhead of having the browser resample pictures real time.
On the other size, a 436x85 JPEG can use 8 to 22 KB on average (depending on quality settings).
So if you use the raw pictures uploaded by users, of course it's not going to be fast.
Conclusion: always resize pictures yourself. And please do it only once, it's a heavy process even for your server.
Yes, it is a good idea to store not only the original image, but the resized ones too, because each time a new user is requesting certain page he is getting this big image, what is basically a waste of transfer and makes user wait what leads to poor user experience.
You should make a script which resizes and saves newly uploaded images to your server and use them instead of these big original ones. But also don't forget that resizing is really CPU-heavy, so it would be a good idea to queue this action and not do it instantly during the user's request.
I want to know the purpose of creating thumbs dynamically? If we have the option in <img> tag to set height and width of the image?
I just want to know which one is a good practice?
Using the height and width attributes of the <img> tag only control the size of the image rendered on a page. If you try to use size and width for a thumbnail for a 4 MB image file, it will still load the 4 MB image. Now if you do that for a whole image gallery, you'll be waiting some time for the page to load. If you use thumbnail images, which are scaled down images based on your original 4 MB image, the page will probably load much faster since the thumbnails will probably only be in the 100's of KB or less.
Dynamically changing the dimensions of the image reduces the amount of data needed to be transferred to the client, thus reducing server traffic and loading time.
this is because the user viewing your webpage don't want wait a long time for loading your scaled big size images.
So that you don't have to download a gigantic picture when you only want to see a small one
I have a products website where in I have around 100 images of high quality. Each image is around 6-7MB in size.
In my database I have stored the path of all the images along with their names. The images are saved in a folder /images/product_name/, But when I go to display these images in a web page, the page takes forever to load. All I do is send the id to the table, get the image paths and display it in the products page.
It would be very helpful if I could get any sort of advice on how to optimize the process.
The images you send to the client are most likely way too big. 7MB of size sounds very large for a product picture so 100*7MB = 700MB of data transfered if you display all the product images.
If you only need small images, scale them down to some KB's (thumbnails) and use those to display in your table.
NOTE: you can just preprend a prefix like "tmb_" or "tmb_200x200_" to the original filename, and you won't have to touch the paths in the database.
From reading your comments I think you are looking for some automated process to optimize the files and serve them at a more decent filesize.
You should take a look at imageMagick or the GD library which allows you to resize images (among many other things - http://php.net/manual/en/book.imagick.php) and optimize them. This can be combined with something like the YUI Image cropper to allow you to choose certain parts of the image to show in the thumbnail.
This is best done at the point of upload so the Server doesn't unnecessarily regenerate the images each time they are requested, and stored under a thumbnail column in the database.
If you must show bigger images I suggest you use a lightbox (see an example here - http://leandrovieira.com/projects/jquery/lightbox/) or similar technique that only loads the larger image when the client requests it.
Use http://luci.criosweb.ro/riot/ to compress images.
It is one of the simple and free tools recommended by Google to compress images.
Also as it was mentioned before make sure the thumbs you send to the listing pages are around 100px and only if the user clicks to zoom in show him the large ones one by one, and still even in the zoom option you should only display a 1000px size image max and that should not have more then 200-500k depending on format and quality.
Do you have optimized your images (in term of file size) ? Like on Smush.it for example http://www.smushit.com/ysmush.it/
You should really optimize your images. You can use a commercial product like Photoshop or use a free one like the GIMP to optimize the files.
Loading about 700 MBs of images will take exactly 1 day for me!!
reduce the size of the images to a thumbnail and when the user clicks on the thumbnail then load the original file. This can increase the performance.
I am trying to create an image gallery. My scroll bar gets rough and slows down when i try to add some 20 different images. Any suggestions??
Make sure you add the width and height attributes. On my webpage when I added them, for some reason it loaded a little bit faster on Safari and Chrome but made no difference on the other browsers.
You can also try lazy loading your images. It really makes a difference.
Make sure you resize your images to the size they are going to be displayed on your webpage.
Your question is vague, is it the images or scroll bars that are slow?
If images:
Never resize your images with css width height properties. This will load the entire image and be very slow. Instead resize images before uploading them, or have a thumb generator resize them on upload.
If the image is small (less than 100 pixels height or width) you can reduce it's quality when generating the thumb, so the file-size is smaller but to no noticable affect.
Use the correct file format.
- gif for animation
- png for small inconsequential graphics like logos and icons
- jpg for higher quality graphics like images
Are you gzipping content before sending it on the server?
Use a CDN for your images like AWS S3 yes, but DO NOT USE flick/picassa as they will 'look up' your image before serving it, which will be much slower.
Using just a CDN (AWS S3) will be better than your current hosting as they've been optimised for quick look ups, reducing the wait time by 50-90% compared to most web hosts.
Use only one CDN, once the DNS look up has taken place for the domain your browser will cache it.
If your site uses cookies or sessions store the images on a different URL (this can be a subdomain of your site), so that the cookies and session data aren't sent with each image request (slowing it down).
If the graphics are re-used set a time out parameter on them (a couple of months in the future), so that the browser caches them locally.
EDIT: I would also agree that loading images on demand/visibility in webpage is a very good practice.
If scroll bars:
Are you using custom scroll bars and or a custom scroll event?
If so, you may want to put a threshold (I recommend 100ms) for how often your resize event can be fired. Or manually fire the resize event after loading the images, as if in your scenario you know when the images have been loaded.
Try lazy loading your images using jQuery. Here's a plugin: http://www.appelsiini.net/projects/lazyload
Here's an example of when I've used lazy loading: https://www.lunatickets.co.uk (scroll down the page and watch the images).
Also make sure the browser isn't resizing your images! Make sure you've optimised them for the web!
Make sure you add width/height attributes to your img tags - other
wise your browser/website layout will "jump around" as it loads them.
If your inserting images try resizing them to the appropriate
width/height before you load them. Your browser will run slower if it
is resizing the large images to display smaller.
Try not to load all images at once.
Slideshows like this: http://sandbox.scriptiny.com/slideshow/, they only load the showed image plus some of the next.
The gallery I last used loaded the current image and the next 10 images. I don't remember the name, but I think that is the way to do it.
Have you tried keeping your images on S3, Flickr or Picasso? Let their servers take the hit for the HTTP requests
I'm building an image gallery which present a few images in the frontpage. The images are larger than the actual size displayed in the frontpage, which leads me to the following question:
If cache is not an option, what would be better:
Using php to shrink the image and send it to the client.
Send the original full size image and let the client shrink it (with simple width and height attributes)
I tend to think that the second is a better solution, but I'd like to hear more opinions.
Thanks!
Edit:
When people upload the images, I create thumbnails for them to be displayed when browsing the site.
The "cache is not an option" reason:
The discussed images are 5 "featured" images in the frontpage which will not stay the same for more than an hour max. so isn't it a waste to create another image copy of every uploaded image just for that?
Essentially, it depends on
What's the original-to-desired width/height ratio? It's not a big deal serving a 500x500 image and showing it as 250x250, but wasting bandwidth on 1920x1080 images is. Also, mobile devices might not have enough resources available to actually display the webpage if you serve too many big images.
What do you have more of: bandwidth or CPU power? Can you make sure nobody uses your on-the-fly resizer as DOS target?
Generally solutions with a cache, even a very temporary one, are much better though.
[AD edit]
The discussed images are 5 "featured" images in the frontpage which
will not stay the same for more than an hour max. so isn't it a waste
to create another image copy of every uploaded image just for that?
It is. But you could simply create a separate folder for these thumbnails, and setup a cron job to wipe files older than an hour. Here's an example I use on my site (set to 30 minutes):
*/15 * * * * find /var/www/directory/ -mmin +30 -exec rm -f {} \; >/dev/null 2>&1
Given 'enough' CPU ressources I would prefer to shrink images before sending them to go easy on people with bad connections and mobile devices.
Another option and my preferred strategy would be to keep smaller versions of the images and then use them. If the images are uploaded at some point, then create a smaller version of the image on upload.
It kind of depends on your flow, but I would resize them on-the-fly and save the thumb. So if the thumb exist, serve it, if not resize on the fly and serve that (while saving the thumb).
Then in a cronjob you can remove old images.
How about 3. don't resize the images in the process that's supposed to serve them to client - make a background process do the resizing, send the thumbnails if resized, full images if not yet. This has the advantage that you can throttle the resizing process independently of the user requests.