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
Related
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page?
For example, i currently have a large image (1200x 1200) which i need to be fitted to 100x100. Would this be possible via jQuery or would it have to be done manually?
Thanks.
You would have to change your image sizes on the server and then change the page HTML or javascript to reference those smaller images. jQuery runs in the browser so, it can't take a 1200x1200 image on the server and somehow make it 100x100 before it gets downloaded.
But, changing the images to the smaller size on the server WILL drastically improve your page load time.
Yes it certainly will increase your page load speed.
And, resizing the image on the server is a better option.
reference:
Should I generate each thumbnail dynamically every time it is requested, or store them on image upload?
To resize images server-side, you can use WideImage library.
With an instruction like this :
WideImage::load($path)
->resize(100, 100)
->output("jpg");
You load your image, resize it in memory and return its data in the desired format.
I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page? Would this be possible via jQuery
No. This would require that the browser download the large image over the network and then process it to reduce it in size.
If you want to speed things up, you need to make the images smaller before they leave the server.
You don't need to do this manually though. Image resizing can be done programatically.
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'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.
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
Imagine you have a classifieds website...
When searching ads you want image thumbnails of the "real" image which displays in its real size after clicking the ad...
Would it be faster to create the thumbnails per search, or create the thumbnails on and then just display them?
Storage is not a problem on my server...
Thanks
I would create the thumbnail once the original image has been uploaded, this way there's no slowdown when the person's page is first hit.
However, lately I've been using an image resize script from Shifting Pixel (http://shiftingpixel.com/2008/03/03/smart-image-resizer/). It creates a resized version on the fly, and caches it, so subsequent hits to the page will use the cached version. This could be useful if you don't want to create the thumbnail yourself.
Assuming that the images are of a fixed size, then it is better to create them upfront. Otherwise you have at minimum a per-request check for existence per image. If they are created ahead of time, we assume that the images exist.
Creating the thumbnail dynamically is your best bet, especially considering you'll probably reformat the search results at some point and will likely end up choosing a different size for the thumbnail. If you only have a thumbnail thats 150x150 pixels but after a redesign of the results page you want thumbnails to be a little larger, say 300x300, you'll have to regenerate all the thumbnails again. If you create them dynamically on request you can just alter your resize script to give you thumbnails that are 300x300.