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
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.
Coming from Rails background, I used to work with paperclip plugin, which was creating from images attachments thumbs with predefined sizes.
In wordpress, I am little confused. Here is my question or points that need more clarification:
Does timthumb creates thumbs and saves it to disk upon uploading images for the first time? or It just resizes images on the fly and caches them?
If it resizes on the fly, why I see different sizes of each image in uploads directory, such as filename.jpg filename-150x150.jpg and so on?
Isn't better for performance to just create the thumbs once upon uploading and serving them directly without calling a script? and if so, how to implement this?
Typically it resizes and caches the images upon their first request.
You're probably seeing the image resizing that WP does. These are controlled in the settings
Debatable. Yes in that it could all be done at your command, no in that someone could upload 1000 images and resizing them all at once could cause problems with the site. Thus spreading out the resizing could result in balancing the load demands. Also, parameters can be passed via the script when a page loads that creates a custom thumbnail. So if you decide your thumbnails were 10px too narrow, you can run it again and it will resize from the original. Plus the filename of the base image remains untouched - if your code says image.jpg, it will always be image.jpg, not matter the size. So if you've got 10,000 instances of thumbnails, and they all reference image-150x150 and now you want them to be 160x160, you either have to change the image names being referenced, or have a nonsensical filename. TimThumb provides a pretty good workaround for that.
Here's some basic timthumb/wordpess performance tips http://www.dollarshower.com/timthumb-and-wordpress-blog-performance/
In my website on listing pages I have to show small thumbnail of images which are used in detailed pages and they are larger in size. SO to display thumbnail in listing i am scaling them with height and width in <img> tag.
I know this is never good idea. because it makes page heavy and it takes time to load.
Is there any way that images get automatically cropped according to given height width ?
If you have PHP available, you can try phpThumb, which does all that for you and much more. It can crop, zoom-crop, transform, blur, contrast...etc etc, and it auto-creates the thumbnails and keeps them in cache so it doesn't have to re-crop...etc each time the image is loaded.
It's also VERY simple to install and use, which is a big plus.
You can't crop things client-side to make them lightweight because all the heavy lifting is already done (transferring the files). Not to mention it would be very intensive for your end users to be doing image manipulations. You will need to create thumbnails server side. You should post a question detailing what server side technology you are using (C#, php, etc). Ideally you would cache them or create them ahead of time so that you only do it once and save your server from unneeded work too.
Actually, don't post a followup question on what server side tech you are using. This has been asked a ton of times on SO. Search for how to do it. php thumbnail creation for example.
So I just put up a website for my high school and realized a lot of images are stretched especially on this page
www.eriesd.org/central/central2/staff.php
What you be the best way to make the images not so stretched?
I was thinking of adding a div and adding background image with center center or 50% 50%. Also on the career and tech pages I noticed the info page doesn't load in IE but the other pages load fine has anyone else ever had this problem?
I'm basically getting the location in menu and option and calling an ajax request which loads 1 of the 3 layouts which connects to my database and gets information depending on the option and location.
Assuming that the pictures are uploaded using some kind of php CMS, the first thing I would do, is process the images correctly at the moment they are uploaded: Apart from the bigger image, you would need to generate a thumbnail that fits the size you need for that page.
I would also recommend adding a notice to people who are uploading a picture, that this specific picture needs to have a landscape format as that is what you are using on the page.
CSS solutions would be my last resort to iron out small issues.
Edit: Apart from that I would seriously reconsider publishing all e-mail addresses like that and add some pagination as the page now takes a long time to load (especially with all the images being a lot bigger than you need them to be...).
They are stretched because you specified both width and height attributes for the <img> tag. If the actual image is of different dimensions, one can see how the browser has no options but to distort the image to make it fit the specified height and width.
Just don't specify either height, or width, or both, and the images are going to be ok.
You should set the height only on the img and add the width:200px;text-align:center CSS to the anchor if you want the white area either side. Omitting the width will shrink the whitespace around the image.
<a class="image" style="width:200px;text-align:center">
<img src="http://www.eriesd.org/central/central2/images/staff/kranking.jpg" alt="missing photo" height="112">
</a>
I'll answer your first question concerning images. The real problem is that your images are not sized to fit the space you want them to fill. One of them that I inspected was a 6MP (2848x2144) image weighing in at 1.5MB. There were many more of this approximate size and dimensin. Any one of those images is larger than the entire page should be by quite a lot. The first step is getting images to the size you need them to be. Your page is nearly 19MB. Not only so most browsers do a lousy job of scaling images, you're sending a ton of extra data and making the page load very slowly for users without very fast connections. Imagine a user with a mobile browser waiting on this and chewing through their data plan! A user with DSL might need several minutes; dial-up could require hours.
If you're uploading them manually, resize them first. Figure out a size constraint and resize and crop first. If you're using a CMS, find settings, plugins, or customize it to make a smaller thumbnail version and use it.
To keep the layout looking nice and equal, the only thing you can do is either stretch them as it is now, or, even better, crop the images a bit and resize them. You can probably do it programmatically for most of the pictures, just assume that the top center is where their head will be. You have stretched picture issues all over the site though.
As for the Career & Tech pages, they're still actually being loaded (at least in the latest IE) if you look at the source, but they're not being shown for some reason, so, either you have some CSS or JavaScript issues with .post or .content. It even pops up for a second sometimes and then disappears.
If you specify only a width, the height will be set proportionally and thus prevent stretching of your images.