Normally when you keep <img/> tag it shows from top to bottom while it is being downloaded from the web and looks very ugly but if you somebody's Facebook album and click on some photo you will see the whole photo is downloaded i.e the whole photo looks blurry/hazy and then as it downloaded from the web the picture goes clearer and clearer.
It looks so natural and as against the default behavior. How can this be done? I know it is Facebook and they can do anything they wish ;) but I need a brief overview of what they might have done to achieve this.
It's the image that is in special form - saved as progressive.
About progressive JPEG:
A simple or "baseline" JPEG file is stored as one top-to-bottom scan of the
image. Progressive JPEG divides the file into a series of scans. The first
scan shows the image at the equivalent of a very low quality setting, and
therefore it takes very little space. Following scans gradually improve the
quality. Each scan adds to the data already provided, so that the total
storage requirement is roughly the same as for a baseline JPEG image of the
same quality as the final scan. (Basically, progressive JPEG is just a
rearrangement of the same data into a more complicated order.)
More information here.
Interlaced jpg's do that. As far as I know, it's not code, but it's how you edit/save the image in the image editor.
Related
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
I'm trying to design a quiz format website, and as a hint, I want to display the wiki image for the answer. I have the url for the wiki image, but I am afraid that if I set the image source to the wiki image url directly, the user can inspect the page, see the name of the source and deduce the answer, so having the original source is not an option.
I see that base64 looks promising, but will the impact to page load time be any different than linking the image directly? It sounds like it will definitely increase the size of the page itself (number of characters). Also, can it be done on the fly in php?
Are there any options I can pursue that obfuscate the image source from the user, but don't hamper site performance to a noticeable extent?
I have a blog slideshow on my web page which accesses images from a given url.
The problem is, people add images with massive resolution (3000px*6000px), which noticeably slows down the animation of the slideshow.
These high resolution images are necessary, but not for this particular purpose, since the images live inside a div of size (300*600)
Is there any way CSS (or some other way) can convert the image to a smaller specified resolution (say 300px * 600px), before scaling down.
This way the animation won't involve high res image frames and so it won't be as laggy.
The only alternative I can think of, is that everytime an image is uploaded on the database, the backend creates a secondary compressed image for this purpose.
However, this seems like a lot of effort.
Since you said in the comments that bandwidth and download time are not the issue and it's acceptable to download the full res image, scale it down, then add it to the page, please consider the following solution which does exactly that.
Download the original image via AJAX, then use ctx.drawImage to draw the image to an HTML canvas with much smaller size. For instance, you can take a 3000px*6000px image and draw it scaled onto a 300px*600px canvas. Then free the original image using JavaScript so that it no longer takes up memory in the browser.
After that, you can use the canvas to do your animations and there should not be nearly as much lag as using the large, original image (since the compositor will need to move much fewer pixels).
Edit: According to your later comment, your users are uploading to an external image hosting service, so this solution will prevent them from having to upload a thumbnail version in addition to their full-res version.
If you choose Imgur.com like you are considering in the comments: They let you modify the image size a bit in the URL. So for instance if you have an image at https://i.imgur.com/9ZC02Os.jpg, you can use https://i.imgur.com/9ZC02Oss.jpg for the small version, https://i.imgur.com/9ZC02Osm.jpg for the medium version, and https://i.imgur.com/9ZC02Osl.jpg for the large scaled version (note the s, m, and l at the end of the URLs). That way you can probably avoid drawing to a canvas completely.
This was a site I found a few years agowhich may be of interest: http://sneak.co.nz/projects/img-resizing/
You could store a small version on your site for use in the slideshow. A good way to do this may be to check if a small image is available and if not create it the first time it is called and save it somewhere.
This code will resize an image on the fly but I think you would still have some lag while the image is resized.
$photo="sunflower.jpg";
$cmd = "convert $photo -thumbnail 200x200 ".
" -quality 100 JPG:-";
header("Content-type: image/jpeg");
passthru($cmd, $retval);
This is a long shot but I've seen things which might make it posssible.
I have a div, which is filled with images. Album covers if you must know. And I want to allow users to download this as an image. So they could use it as something like a desktop background.
So is this possible? Get this visual representation of an element and display it as an image?
Basically you can't do that. At least crossbrowser. But if it is not critical. You can try <canvas>
check here http://www.nihilogic.dk/labs/canvas2image/
Assuming I understand the question...If you know the position of the images in the div, you could concatenate the images together server side into a single image. Then just have a button users can click on that will call the function to assemble and download this image.
From what I understood from your question you can use an
img
tag for this. The user can view the image in the browser and can save it to their hard drive.
from your description each of the image inside will be a different album cover, so combining these into a single image won't a good idea.
You could possibly do the rendering serverside. By this I mean that you could generate the HTML and kind of "screenshot" it on the server. The result would nearly always be at least slightly different from what the user sees, but depending on your requirements it might be enough.
There are various tools to do this, for example wkhtmltoimage, which is a sister project of wkhtmltopdf and can be found at https://code.google.com/p/wkhtmltopdf/
I would like a user to be able to edit an image that I serve, using Javascript, and then upload that image back into App Engine.
Original image is stored as Blob in DataStore.
Image is served (currently) just using
Currently user can only view the image, but i want user to be able to edit the images (adding text and lines at most, no complex transformation needed).
User can save the image back into the web application.
What is the quickest way to do this?
Will it be easy to integrate with 3rd party javascript image libraries (which has the editing tools already)?
Your starting point (and minimum requirement) for line art (read: not pixels but as you say: text and lines) will be the HTML5 Canvas Object:
http://www.w3schools.com/html5/html5_canvas.asp
Depending on your use case you may want to 'underlay' the pixel image to be decorated.
For saving refer to
http://www.tutorialspoint.com/html5/canvas_states.htm and
How to save HTML5 canvas?
If the end results shall be pixels, Canvas2Image might by for you.
Sorry to just throw general links at you, but since you asked in a general way. Hope this helps.