Develop Reference

Rendering Multiple Images in React and HTML

I have a problem rendering images with large file sizes. When I upload a lot of large file sizes of images and display them, it becomes very laggy.
My question is:
The ideal way is the backend should provide an very small image file size url?
Or the frontend can do it using Canvas API?
Could you provide an explanation please? Thank you

If you have a bunch of thumbnails to display, the source images for those thumbnails should definitely not be the original, full-size images. If those images are large, it will take a long time for the client to download them, no matter how you render them on the client.
When figuring out an image to be shown to client, you should have two versions on the server:
Thumbnail version - low resolution, small file size, easy to download and render many at once
Full-size version, downloaded when the user wants to zoom in on one of them
It could be that the full-size version should not necessarily be the original image. For example, if the original image is 20MB (yes, they can exist), you wouldn't want to burden clients with that. So you'd want to perform resizes and optimizations on the server for both the thumbnail version and the "full" version - enough such that there isn't much of a delay between when the client tries to zoom in and the full-size image fully loads.

My recommendation is that you convert the image type to something more performant like .webp or .jpeg and give the element the exact width and height properties.
And react also have a feature to lazy load your images using react.lazy() that can boost your web performance significantly

Handling large images is too much work for a frontend client. You should get these images at a smaller size in order to just show them as they are.
Imagine someone trying to use your application with an old computer, or even an old smartphone, you shouldn't rely on client's processing power to handle all this heavy work.
I hope my answer helps you!

Jpegs are what you should be using, look at functionPreload() as well

Client side image quality reduction

Is there any pure JavaScript way to reduce the quality to a specified size? For example if someone tries to upload a 12MP image is there any way to reduce this to 5MP for example? At the moment we are using Aurigma, but would like to get away from the reliance on a plugin that the user may or may not have.
SO recommended this post as a possible question/answer, but this seems to deal with cropping the image. I'm needing to reduce the size of the image client side. Is this something that is possible? Is there a plugin for jQuery that does this?

You try using the Plupload library. I have been using it for multiple file uploads, but never its PNG, JPEG resize capabilities.
There is a related question at Image resize before upload

Are there any good Javascript/Jquery thumbnail script equivalents to TimThimb (PHP)?

For those unaware of TimThumb, it will take any image, of any size or dimension and create a thumbnail on the fly to any desired size. The beauty of it is that it really works on any dimension you feed it through a combination of either resizing the image, cropping or zoom cropping the image.
Ive been searching for jscript equvalents but they either require the user to actually mask out the thumbs manually (looking for a script that automatically does it to images) or the scripts can't handle images in a different aspect ratio.
Thanks for any leads on this!

It is impossible to do this only with client-side javascript. PHP has GD, ImageMagick libraries which create the new image (actual thumbnail) and javascript alone can't do this, as it is client side script, it can't create files.
So the answer is: There is no any.
As #papirtiger pointed out you can still do it with server-side javascript (such as node.js).
Please see this link

It depends.
You can use CSS or Javascript for simple image scaling.
There are tons of available plugins to this.
I doubt that there is one that does the guesstimation exactly the same as timthumb.
If you are going resize a large amount images on the page it will really hurt performance.
Another alternative is to several fixed size "layouts" (960, 320) etc and have the server generate thumbs for each.
You can than use javascript to load the appriate size.
If you really need to rescale the file:
Use external webservice to resize the image.
Most of them take a url and return a resized image:
example.com/resize?image="http://example.com/image1.jpg"&height="...
If you have TimThumb running on your server you can set up a simple API to allow you to call your own service.
othrwise see Image resizing web service for a few alternatives.

Using a large image (file size) but not hinder load time?

My demo is here.
Basically, I have a HUGE image (19160px × 512px to be exact, just under 2MB) that I transition the backgroundx using javascript to make it appear as if a transformation was happening.
I cannot compress the image much more without ruining its quality dramatically. Is there another way that I can achieve this with the same level of cross-browser and not rely on plugins like flash, but have it load faster?

Have you considered making this a video?
It might improve loading time somewhat.
Also, another idea. Have you tried using only the first and last image, putting the last one on top of the first, give it opacity:0 and fade it in using JavaScript (e.g. jQuery)?
The effect won't be 100% identical to what you have now, but it might look good enough to please the client, and it would reduce loading time to a bare minimum.
If both ideas won't work for you, I think the first 10-12 frames could be compressed more effectively as GIF images. (It's an estimate, I haven't tried.) You would have to split the image into multiple div s to do that and change the method you use to switch the images, and you would have more requests, but it could be worth it.

If it is a jpeg, you can always use progressive encoding. it will become clearer as it is downloaded.
There is also an interlaced
"Progressive JPEG" format, in which
data is compressed in multiple passes
of progressively higher detail. This
is ideal for large images that will be
displayed while downloading over a
slow connection, allowing a reasonable
preview after receiving only a portion
of the data. -Wikipedia

Slice it like Google Maps.

If you want to change that many pixels on the screen at once, you'll have to get them to the client somehow. You could chunk it into multiple images and use something other than background-x, but then you expose yourself to other potential network interruptions along the way.
The only alternative I can think of to precomputed images like this one is to do the computation on the client - start with the full-colour image and manipulate it using the client's CPU. Your options here involve canvas or CSS3 or a plugin.

I'm not a big fan of Flash but in this case it seems like the right tool for the job (unless you need it work on the iPhone). If you don't have the Flash authoring tool you can use the free Flex compiler.
See http://www.insideria.com/2008/03/image-manipulation-in-flex.html

Make it into an animated gif? Break it up into individual parts to remove all the area that is obscured by content.

better quality thumbnails from larger image files

I'm showing images from other websites as thumbnails. To do this I display them in a smaller img tag so the browser does the size decrease.
The problem is that the quality of these images (which I have no control of) is diminished.
Also they look much better in FF and Safari than in IE.
Is there a way to make these images look better without caching them on my server? (e.g a javascript library that does the resize with better quality)? Any idea is highly appreciated.

IE's default image resizing algorithm is not that nice - it can be changed by tweaking a registry entry, but of course that is outside of your control.
However, apparently it can also be triggered to do a better image resize through css
img { -ms-interpolation-mode: bicubic; }
source: http://edmondcho.com/blog/2009/03/17/internet-explorer-image-resizing-tip/

A quick Google search shows that in IE7 you can fix the image quality problem:
http://devthought.com/tumble/2009/03/tip-high-quality-css-thumbnails-in-ie7/

The only way to have control is to do the resizing yourself. Various browsers will use different algorithms, some with unsharp masking, some without. The filters used after resizing control most of this. Specific CSS tagging can control this to some extent.
Javascript can't really handle this, but using Flash or similar would allow this. You would have better control of the image. However, you would lose the "imageness" as far as HTML.

One thing I didn't see mentioned by the others - you aren't really resizing the image, you are just displaying it in a smaller space. Let's say you are pulling down an extremely large image file (5MB) and displaying it at 1 x 1 - it's still 5MB!
Writing a caching solution for these images wouldn't be very difficult at all - and will save you the legal ramifications and embarrassment. If I saw your site in my log files and realized you were pulling down my images, you would be Goatse'd - hard.

If you are working with a source image and simply re-sizing on the client, there isn't going to be a good way to do this.
Now, aside from the potential legal ramifications of using other sites images you could look at a simple caching process, and do a quick re-size on the image, and keep the aspect ratio, so that the display is good. This also helps reduce the bandwidth that you are using from the other sites.