The app I am building is to take a member picture and save to amazon s3 bucket.
Again thanks Codename one team( especially Shai) for helping me out through the process.
I am now facing some performance issue as in I am using iPhone 6s Plus. When I take the picture and reload the label with the image, it takes really long time to load.
Is there any way to reduce the picture size and resolution before saving to amazon s3 bucket? Or what would be the best practice or optimized way of achieving this? Please suggest.
Thanks,
Yes.
You can use the version of capture that accepts width/height notice that -1 will keep the aspect ratio for that axis.
You can also use ImageIO to resize an image to any arbitrary size without opening the file.
Related
I have a react app that has many image references ( tags <img src=... /> and css background:url(...)) type.
These images are hosted on Azure Storage.
To speed up my App loading time on various devices (desktops and mobile), I need to resize these images before they hit the client, ie, on the server somewhere.
So far, I can think of the following options:
Pick each image, and produce multiple versions of them for various standard device sizes. Then, pick up each <img src=... /> tag, and, using JS alter the image name, such that the right size of image gets served. This will not work with css.
Use Azure CDN to automatically resize images. I was hoping that resizing would happen automatically, as the CDN portal retrieves the user-agent from the device. Does anyone know if this is true?
Serve images through an Azure function, resizing them on the fly (as suggested here)
Can someone suggest other options they can think of, or a pros / con of the above.
Since you're using javascript, use the window tag. For browsers, the window tab measures the resolution of the browser and you can set the height and width of your image to window.innerHeight and window.innerWidth. There are multiple other ways to do this but this is the easiest and most optimised if your coding project needs to be efficient with the least lines of code necessary.
More info about the window object here : https://www.w3schools.com/js/js_window.asp
P.S. this is only a solution for desktop, for mobile you can use screen.width, screen.height. This might not work on desktop but on a macOS Big Sur device it works, I tried it (This might be because macOS Big Sur is like a mobile optimised interface given that you can even run iOS apps on it but we don't know unless we try). That might be a better option as it is most likely common across all your devices.
More info about the screen object here : https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php
On the off-chance that none of them are common across all of your target devices, try making a detector program with which you can detect the device type and store that in a variable. Then create 2 if statements saying
if(deviceType = iOS){
<img src=..., screen.width, screen.height/>
}else if(deviceType = Windows){
<img src=..., window.innerWidth, window.innerHeight/>
}
Obviously this code won't work but it's just there to show you the flow where you can sort of understand what I meant. You need to integrate it your own way but this was just a way to make it easier as many times people mention that my answers are not easy to understand, just as a safety measure.
The best part of these options is that instead of remade copies of the image itself, this will resize the one, which saves storage space and eliminates the chance of the user using an unexpected display output like a 49" Samsung Odyssey G9 monitor where the resolution is extremely far from what you might have expected and resized. This also means you don't have to create a separate file just to make image resizing code, just the one to detect the OS (not necessary if the screen object works) which would've already been done since this is Azure we're talking about and they always detect their user base.
If you have any queries, please reply back.
Good luck!
I am building a small app with Ionic 3 and angular 2/4
I have a problem to load a list of images from an URL (5MB per image)
It takes a lot of time to display my images.
How can I load images faster ?
There is any way to display images in low quality first ? (like Facebook and Whatsapp)
Any link, any tutorial, any blog ...
//js
private photo = "http://my-url.com";
private photo2 = "http://my-url-2.com";
//html
<div> <img [src]="photo"> </div>
<div> <img [src]="photo2"> </div>
Thank you !
The most convenient ways imho are:
compression - the first thing you need to ask yourself: Do I really need a 5mb image? Is it too big? Can it be compressed (e.g. jpeg/png)?
thumbnails - 1 (or more) version of the original image which are a lot smaller and therefore a lot faster to load. In many cases (e.g. list, overview) you don't even need the original image because the size of your img container is way smaller. So one way is to only load + display the size you need for that specific usecase. When you really need the 5mb version you could start with the thumbnail and replace it when the fullsize one is finished loading. This doesn't reduce the loading time, but feels way smoother.
preloading - you could preload the images (e.g. when you know they will be shown soon) to remove the slow loading part when your image is actually displayed.
caching - when your images don't change that much you might consider caching the images on your device. That way whenever you need to load a 5mb image for the second time (even after app restart) it takes the local copy instead of the remote one and can be shown almost instantly.
Ideally (and depending on your usecase) you combine all four things: Compressed images, different sized versions of your images, preloading when necessary and caching to make sure an image is only loaded once.
In my apps I'm using the simple but great plugin ionic-image-loader which I can highly recommend. It's easy to implement and covers 3. and 4. with almost no effort.
I hope I could help!
Part of the process used in my app involves taking a photo (done with Capture.capturePhoto()). The photo is then resized to a small square of 200px and finally sent to a server.
I am able to delete the resized image with FileSystemStorage.delete() however the initial photo taken with Capture.capturePhoto() cannot be deleted because of the app being sand boxed (as described in this SO question )
This can be embarrassing for the user because these photos are polluting their gallery (the photos have no value for the user).
As deleting the initial photo is not possible, I was wondering if I could force the Captured photo to be stored in cache so that it gets automatically removed by the OS.
Maybe this question could be a solution for Android but I would prefer to avoid having to go native?
Consequently is it possible with Codename one to take a photo that will only be temporary and be deleted automatically ?
Thanks a lot,
Cheers
We try to delete the file automatically but since the OS takes the photo some platforms just stick it in the gallery and there isn't much we can do there. It's literally a matter of "this works on Android device A and fails on Android device B".
Apps like snapchat etc. don't use the device camera app but instead use the low level camera API's which are more complex and flaky. At this time we don't map these API's in Codename One so if you need something with lower level control you will need to use native interfaces. This is a non-trivial API though.
I would like to implement my own slideshow and image gallery (for a foto reporting website).
Is there a best approach or tehcniques (using GAE and GWT) related to :
reducing the slideshow's loading time (a slideshow containing 30 images (960px * 780px) for example, should I load them all firstly and then let the user navigating ?)
should I do scaling operation (the image's resolution is greater than the browser's one) on the server side or in the client side ?
is there some know-well problem concerning the storage (if I have a lot of images) ?
If you have some advice or links about this topics, could you post them please ? Thanks you.
Question 1: preload vs lazy
Answer: The more you load to start the longer it takes your instance to spin up and the longer and larger the bandwidth. So in general you should probably use a lazy loader but prefetch the thumbnails and the next image.
Question 2: image scaling
Answer: I suggest creating a scaled version on upload that you serve then allow the user to download the full size image. Don't do this on the client again the bandwidth would eat you alive.
Question 3: storage
Answer: Use the blobstore/python or blobstore/java instead of db.BlobProperty because it saves money on storage and allows for files over 1mb.
Questions:
In Google App Engine Blobstore, is there a way to convert the original picture uploaded to thumbnail picture?
Is converting the picture to thumbnail picture a good idea or there are better ways?
What are the best optimization if I wish to use thumbnail picture as well as normal pictures? What I meant is that, shall I waste additional storage just to store the thumbnail pictures?
Performance is preferred very much. Thank you in advance for who's willing to help !
You don't necessarily need to store additional thumbnail versions of pictures. Check out get_serving_url().
You can use that function to generate a -public, but not guessable- URL to the picture with parameters to do resizing on the fly and it's optimized for performance. I think it's well suited for your needs.