Lots of cameras are now putting thumbnails into their JPEGs and RAWs images.
I'd like to be able to autoload some images and then display only the thumbnail, or better yet autoload only the thumbnail portion for speed.
Is there a way to do this in Javascript?
Thanks.
You've said you want to do this in the browser, so when you say:
...or better yet autoload only the thumbnail portion for speed.
You're not going to get a speed benefit from doing this client-side, because the entire image must first be downloaded before you can make a thumbnail for it.
You can create thumbnails for retrieved images, just by creating an img element and settings its width and height to something smaller; the default thing browsers will do is scale the image down (not necessarily in a pretty way).
Example:
var img = document.createElement('img');
img.src = "your image url here";
img.style.width = "32px"; // Change as appropriate
img.style.height = "32px"; // Change as appropriate
document.body.appendChild(img); // Or append to some other container element
Live copy
There I've assumed it's apprpropriate to force the image to be a certain width and height (frequently with thumbnails, it's useful if they're all the same size, although the above will mess with aspect ratios).
If you want to resize by a percentage (say, 25%), you can do that but it's more complicated: You have to create the image, load it off-screen (there are various ways to do this), wait for the load to complete, and then do the calculation.
If you're running a server, you're probably better off finding something that can pre-process the images and create thumbnails for you. ImageMagick, for instance, can help with that server-side.
Related
I'm trying to 'lazy load' dynamic images. Their height/width ratio matters in the layout of the webpage. I have four options to prevent them from messing up the DOM when they load or render.
I can get the height and width of the image using Javascript, set an element in the DOM to place-hold for the image until I want to load it later. I would use...
var image = new Image();
var width = image.width;
var height = image.height;
I can simply not lazy load them and use an img tag with a src immediately. If #1 is just as slow as this method then there's no point even trying to load them later and I may as well do it in an HTML tag.
<img src='source' />
I can store the image dimensions in my database. This would mean I would continuously have the necessary dimensions of the image and could pretty easily set a placeholder. I don't know if this is common practice though. Edit: it should be noted, I'm accessing the database to retrieve the image url anyways.
<div>this elements width and height is set</div>
I could get the dimensions of the image through PHP. This is the same as the Javascript method, just at a different point in the process.
$size = getimagesize($filename);
My question is essentially which of the above is the most well established way of getting a pictures width and height to store a place for it in the DOM?
I'd say a combination of method 2 and 3 are your best bets. You should store the image size and other metadata in your tables describing the image. You can then either do some form of dynamic loading, or just place a bunch of <img> tags, with width and height already set to the sizes from the DB and decoding=async so the browser doesn't block the rest of the page on loading these images.
The end state is to send a document to the browser, which contains the clear list of images you wish to display, and as much info about them as you can (sizes, loading modes, various srcs for various screen densities etc).
Method 1 seems like a lot of work, most of which would duplicate what the browser would already be doing.
Method 4 would be a performance nightmare. getimagesize would need to access the disk and read some part of each image you're trying to display. If there's a set of well known images, you'd be saved by disk caches, but otherwise, if you're doing something like instagram/facebook/flickr where every user has their own images you'd be looking at O(n) random disk reads atop whatever I/O the database does.
I am working on a website that has image blocks, with various sizes (relative width based on the current size of the parent, parent also have a relative size to window). I use jquery load event to rewrite the src attributes of the images based on the image object's dynamic size to ensure pixel perfect view. The problem is that the browser download the full size image, than replace it with a dynamically generated one. This leads to unnecessary loadings and speed loss.
What if I let the src value empty, that add the correct url into it? I would like to stay seo optimized, so an empty src maybe not a good idea. Can I achieve this without double downloading images? Maybe I should use an event before the browser begins the download the src data.
My code:
$('.image').load(function () {
if (!$(this).hasClass('optimized')) {
$(this).attr('src', '/image-perfection.php?image=' + encodeURIComponent($(this).attr('src')) + '&width=' + $(this).width());
$(this).addClass('optimized');
}
});
Create a small thumbnail, and let your images to point to the same thumbnail image.
The advantage of this is that you can specify a 'loading' like image that will be pre-catched by the browser for next requests, and then you can load the images the way you do.
You can also write a proxy script that cut the images in the server for you, if you're working with uploaded images you can cut them once they're uploaded for optimize the process, of course it depends of how your implementation must be.
i am programming a jquery plugin which loads lots of images.
I would prefer to show the picture first fuzzy and if it's fully loaded, in complete.
Facebook is a good example.
How does this technique work?
This depends on the format that the image is saved in.
JPG images normally load (and hence display) from top to bottom. If however they are stored in progressive (also called interlaced) format then they will load the whole image in a grainy format and gradually increase the quality. Facebook save their images in the progressive format.
There are utilities available for converting from the first format into the second. Here is a link to a well known one (ImageMagick): ImageMagick
You just have two images: one of bad quality, and one of good quality and.
When you want to show image, you first set image.src to bad quality image, and then instantly to good image path (setTimeout with 0 delay will work too).
It works, because browser doesn't replace image in img tag until it's fully loaded. Image with bad quality will loaded much faster than good image, so user will first see fuzzy image and fully loaded image when it's loaded.
Example
img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
img.src = 'path/to/fullImage.jpg';
}, 0);
The usual approach is to set width and height on a thumbnail version of the image to full size of the big image, and replace the thumbnail with full image when the large one is loaded. When you set the full size on the thumbnail image, it becomes 'fuzzy' becuase it's interpolated to a larger size by the browser.
I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.
I'm trying to load in some decently large images into a web application. The largest of these images can be 2800x2800. I load them in, display, and everything works fine.
My problem is, once they are loaded using:
var img = new Image();
img.src = 'myImageURL';
img.onload = function(){
//display image
}
The large images display on the page progressively, from top to bottom as if they are being loaded.
I want to remove this visually, and only display them once fully loaded and rendered in the browser.
I cannot change the image sizes either, because this web app is intended for the user to scale the images, all the way up to 100% of original size, so I must load the full 2800x2800 and resize it small.
Does anyone know how I could hide the image until it's rendered? I can hide it until loaded, but that's basically what I'm doing and it's the progressive render display I want to remove.
Thanks
Use the onload attribute on the <img> tag, something like this:
<img src="huge.jpg" style="display:none" onload="this.style.display='block'">
Substitute whatever you want for effects, but onload is your hook.
Demo: http://jsfiddle.net/DfCUQ/1/ (note: update the ?nocache=X in the demo for each time you load it)
You could make the css visibility to 'hidden' and have some text (or loading spinner, etc) in the place of the image until the onload event gets called.