I'm asking user on registration to upload an avatar images but, some images takes much time to be uploaded as it's very big or something, is there any way to reduce images size before send them with post request, i'm using nuxtjs.
Not really.
You could make a validation on the size and do not allow them if it's above a specific threshold.
Don't do image compression on client-side tho.
There are some ugly solutions here tho, like converting your image into a canvas and back, you will definitively get some sub-par image quality but it may be okay in your case?
This answer is still relevant too.
Related
I am creating a website which contains posts. Every post has an image. Feed page of the website is slow because every image takes a lot of time to be downloaded and while it is downloading it is a blank space and it does not look nice. Images are uploaded by users and are of different formats. Is it possible to somehow make it so that images first appear blurry and then they start becoming less and less blurry as they load (I’ve read it is called interlacing)?
I have tried searching on the internet but didn’t find anything on the topic but the usage of .jpeg format which does not seem to work because even the .jpegs I have as post images are not loading interlaced and I cannot exactly force people to use only that format.
Images take time to load because they are relatively large files and the data in them has to be transferred over the network.
Interlacing is a a feature of the JPEG format that gives visible process as the image loads by reordering the image data so it doesn't run sequentially (Wikipedia has diagrams and animations which might be helpful in understanding that.)
If you want interlacing in the image then you need to make sure it is in the image. You can't really change that outside the image.
While it is impractical to ask users to upload images encoded that way, you can write server side code to convert images to meet you standards. When converting them you could also perform other optimisations (such as reducing the dimensions or increasing the compression level) that would speed up the load time. Of course, this will have an impact on image quality which might not be desirable. (Consider Flickr, for example, which provides a degraded image (with smaller file size) by default but allows switching to higher quality or original images on demand).
You could also consider displaying placeholder images while the full version loads. These could also be generated server side from the upload images and have extremely high levels of compression and resizing so you just display a small number of large pixels that give a vague impressions of the average colour over large chunks of the image until the real image is available to the browser.
The ability of a browser (Chrome for example) to handle a number of images, is limited only by the hardware of the computer on which it is displayed or also by the software itself?
I'm trying to develope an image viewer that must content lot of files that must be accesible instantly depending on the demand of the user and sometimes when i go over 350 files of 300kb the page frozens.
Thank you all for your help!!
It is probably limited by both.
There are limits to how large a struct is allowed to be for instance, because it has to fit in a fixed amount of bytes.
(see this question for instance)
(also, you're not yet running into the max size of an int so that is probably not what is happening right now.)
Besides this there are several more constraints.
That said, loading a gigantic amount of images every time you open a page is probably not a good idea.
Take some inspiration from how others (like google in their image search) have solved this problem simply by not loading the images until they are needed.
I think the best approach would be to have some small thumbnails of each image and on request of the user(click) load the bigger one, like Timothy said.
If you need it to be faster you can preload images. So for example if you have a list of images and the user scrolls through you just load the next n images. To free space you can "delete" the ones the user did already passed.
I have a high-quality image and I want to generate img tag with this image.
The problem is that it will take a lot of time to load this image.
So the question is: how can I reduce image's quality without creating another one with low quality?
how can I reduce image's quality without creating another one with low quality?
And the answer is: you can't. If you want to reduce bandwidth you could provide thumbnails for the actual images. Those thumbnails could be dynamically generated from the original images using the server side language of your choice. If you don't reduce those images on the server, you are busted. Once you send them to the client you have already wasted the bandwidth. This reduction has to happen on the server if you want to gain something. You can always set the width and height attributes of the img tag and fool yourself that you are gaining something.
If you save the image, gif or png, with the 'interlaced' option set, it will load in progressively greater detail, initially blurred/fuzzy and increasing resolution as more data is received from the server.
This does have the principal consequence of increased file-sizes, though.
Reference:
Coding Horror, by Jeff Atwood.
I have a website where users are supposed to upload images. I am trying to figure out the best way to set a max width/height of these images, and make the check before they get uploaded.
I know sites like bandcamp have this functionality, and it seems like they are doing this client-side in javascript, but as I read all of the similar questions on the web, it sounds like it is not possible. So here are my questions.
If it is possible to do this in javascript, can someone explain how or show me an open-source example
If it is not, then are either of these two solutions accepted.
a. The image gets uploaded from the browser to the server. Once it is successfully copied to the server, you can use a third-party python lib like PIL (I am using Django) to check the dimensions, and then return a ajax true/false if it was valid
b.Uploaded the image and insert it into the DOM but make it hidden, and then use
document.getElementByID('#image_id").height + width to see the size.
If the size is valid, then display:block or whatever.
both a and b have negatives, so if there is a better solution, let me know
Thanks
Why don't you simple accept all sizes, and check the size with PHP?
f.e. with getimagesize() and reduce the size with imagecopyresampled() like it is shown in the example:
http://www.php.net/manual/en/function.imagecopyresampled.php
If you want to resize on client side you can't do that without a plugin as Mike said.
Btw: A size limit is not smart as much of the visitors aren't able to resize images.
I'm trying to do a parallel preload of images using the logic implemented on the below link.
http://blog.lieldulev.com/2010/05/21/parallel-image-preloading-in-js/
I have a huge amount of images, currently 350+ images with an average of 50KB file size each, amounting to a total of 20MB of images im trying to preload. I need the images for canvas drawing.
Using the above logic of parallel downloading, I'm having issues of the browser waiting for 2mins to finish loading the whole page. sometimes, it stops the script.
By the way, 20MB of images is currently the conservative amount of images. some set of images I need to preload my go to as much as 80MB!!
Is it even practical to preload such an amount of images? And if i need to preload, What is the best approach to my requirement? Should i do non-parallel? How about partial preload?
Thank you in advance
Marv
That is a perfect usecase for a MXHR (Multipart XHR) request. That means, a serverscript is reading your image files, decodes them as base64 string and streams those images to the browser. supplyJShelp is using this technique, but currently only for javascript & stylesheet files. Anyway, it's designed pretty modular, it should be no problem to extend it's functionality for any image type you need.
If you don't feel in the mood to do it yourself, don't worry - I'll update the script for image loading the next few days.