Just a quick question:
I'm working on revamping a script that serves vehicle inventory to users.
The site receives thousands of hits per month with many pageviews per visitor.
My question is this:
I am going to have 7 images for each vehicle in the new system.
1 Main Product Photo
6 Interior Extra Photos
The 6 extras will be viewed as a thumbnail, with the ability to load the full image in a lightbox.
Now, to the question:
Should I use TimThumb (or similar) to resize the images to Thumbs on the fly, OR should I create a thumb directory and save a thumbnail for each image as it is added to the server?
I use TimThumb for the main image, and it works quite well, but I'm debating which is easier on the server for the other 6 images.
Thanks!
it might not differ while the load is low, but rebuilding thumbs on request is quite resuorce consuming. if server load matters, you should save thumbnails.
there are two ways to do this:
- generate all thumbs on image upload
- generate thumbs on first request and save them
The easiest on the server is to use javascript on the client side. Its a little slower loading for the user if there are a lot of images being served but if there are less than 10 it should be okay. Look into using jQuery and CJ Object Scaler http://plugins.jquery.com/project/cj_object_scaler
Related
I am working on website which is having huge amount of PDFs shown to its page. Those PDFs are listed on the page. The count may be 150 on every page.
We need to show the preview of first page of those PDFs to show the user whats inside every PDF.
What I am doing now?
While uploading those PDFs on clouds, I am creating previews of first page of those PDFs (1 small preview and 1 large preview) using a tool called PQScan.
Small preview will be shown on page by default, Large preview will be shown on mouse hover.
What is the problem?
For around 150 PDFs per page, The loading time of small and large preview(.gif/.jpeg/.png images) from cloud is taking a lot of time.
Image for refrerece on how I am showing -
Is there any better way to tackle this problem to resolve the issue faced? Also the size occupied by these images on cloud?
Some suggestions from my knowledge are:
Use Lazy loading technique to improve your page load time. Refer Google Documentation to know more about this.
Save random pages of the document as single images (such as cover page, some 2-3 random pages in between). Then instead of automatic slideshow or GIF, only show the cover page preview image. And on mouse hover, you can load and display other pages as slideshow or any animation effect you can implement.
Use Next Generation image formats as they are much smaller compared to older formats. Refer here for more detailed information.
So I'm working on a project to fetch images from fashion websites. Now I'm implementing the add item function in the website. In this function, user needs to input website url first, then the web scraper will scrape the target images' url and pass the urls to the curl to download the image. Finally the add item popup window will preview the images I fetched in the previous step and ask the user to fill out some basic information for the items. Everything works fine except that the curl will take a very long time to download the images (cuz the images from those fashion website are often very high-quality). So I'm wondering is there a way I can create a preview without actually downloading the full-size images and do the download when the user fill out basic information later. Thanks!
If the fashion website has smaller versions of the images, you should download those first. You can use them for your preview.
If the fashion website only has the full size image, there is no way to download a smaller version of it.
You probably know what your doing, but remember that you should respect the copyright of images on websites, especially art websites such as fashion websites. Be careful with what you do with them.
Hey I'm trying to make an image gallery but I am stuck at whether I should load all the images while the page loads or get ajax to request new images before they are displayed in the gallery?
The example below shows that I'm viewing the second image and have 2 hidden images loaded while image 5 is loading via ajax request. I thought if I keep two loaded images between the image being viewed and the image ajax is loading users should not have to watch an image load
Image Gallery (Viewing Single Image)
1 2 3 4 5
+-------+-------+-------+-------+-------+
| |Loaded | | * |Loading|
|Loaded | On |Loaded |Loaded | AJAX |
|Hidden | Show |Hidden |Hidden |Request|
+-------+-------+-------+-------+-------+
I havent used ajax off localhost so dont know what kind of performance it has compared to just loading the images with the page and hiding them.
You can generally rely on the browsers cache to load images quickly. A very dependable way that I've found to do this is with the following:
$("<img>").attr('src', imageSrc);
This creates an image element, doesn't append it to the DOM, but the browser will still download the image and cache it. With that, you can append either the image element you created or use a new image element with that image source and there shouldn't be a load delay.
I'm not sure what you mean by loading with ajax. Since an ajax request is not any different than any other request, there shouldn't be a performance difference between using "ajax" and "just loading" the images. There may be some overhead on the server if you are using a script to load the image in some way.
Ultimately, loading at HTML parse time, using javascript/jquery preloading or using ajax take the same time, especially if the image is large (if it wasn't, you wouldn't ask?).
The system has to open a connection, make a GET request for the file, and the file is transmitted over the network. If it is cached then it is not retransmitted. Network transfer is the bottleneck, and different load methods do not change that.
You'll influence your user's waiting times in two ways:
Reduce the size of your media, e.g. use thumbnails, be clever with compression, reuse large files so you exploit caching...
Time your image load carefully, which is what image preloading (with or without AJAX, it's the same thing) does. It's likely that it's impossible to know exactly when to start loading an image so the user won't wait. Loading three images ahead, as you propose, sounds fine to me. Users may, occasionally, wait, but more is overkill.
For a slide show, you could have an array to recall which images are unloaded, as a thumbnail, or fully loaded, which will ensure you don't make unnecessary repeat requests.
I've not really given you a magic bullet... There isn't one, but I hope this helps.
I have already have this situation in which i have also taken both sample find the solution
Basically for basic image [thumbnail image] loading you can use lazy load for the page
and for the loading the large or main image you can load the thumbnail image into that and after you can write the code for loading the large image into it.
$('#GalleryImage img.mainImage').load(function() {
$(this).attr('src',$(this).attr('src').replace('thumb','large'));
});
May this will help you
I've a site where users upload images and I'm displaying lots of images from users back to users. Most of the images are JPG but some are PNG.
I use manually created sprites for the images I have created myself but current user images are downloaded individually which adds time to page load.
I've done a bit of reading on PHP Dynamic Sprite Create like the on the links below:
http://www.mummey.org/2008/12/csprites-a-dynamic-css-sprite-generator-in-php5/
http://net.tutsplus.com/articles/news/dynamic-sprite-framework-with-php-new-plus-tutorial/
Does anyone have this functionality working and if so how/what did they use? recommendations?
cheers
I would combine PLupload (plupload.com) with the CSS Sprite Class from PHPClasses.org (http://www.phpclasses.org/package/6560-PHP-Generate-sprite-images-and-CSS-to-use-image-styles.html).
I recommend using PLupload because of the client-side image resizing feature, which can cut down on a lot of server processing.
I would like user to upload most of their photo albums online, would it feasible to create and save one in thumbnails folder and one in full size folder or generate thumbnails on the fly when the user access their album? It will be something like eBay does. Webspace is not a concern since I have an unlimited plan.
Store the thumbnails when they're uploaded, or better yet, create a thumbnail (and store it) when the image is first accessed.
Storing them means that the server won't have to do unnecessary processing on every page load.