I display html string on UIWebview, and html string comes from server.
In html which I retrieved from server, is having 10 images which are large sized with src attribute. those images total size is above 4 MB. when I load this html string into UIWebview, application takes 4 mins to load images sometimes and sometimes it crashes.
I want to know, if there is any solution to <img src..> tag where I can make thumbnail images.
Any response will greatly appreciated.
Thanks
You should be able to find out on the server-side via java/html5 what browser your client is and what features it has. In doing so the server can determine the appropriate image size to send to the client.
My company has successfully implemented this with iPhone and Android client's retrieving images that are smaller in size as opposed to browser's on laptops receiving larger images.
Good luck!
Big chunks of memory allocated can trigger a sigkill 9 from springboard on heavy system load (by protection) even if you don't overlap the 46MB given for any single application running.
The best way to do this would be to load one image at a time.
For each individual image, create a smaller version.
Release the currently big image loaded since you have a smaller version of it.
Do it again for next, and so on.
You will reduce the impact of big loads.
The Nimbus Framework is doing image download and resize that way. Have a look.
For the UIWebview, I'm not sure of what you can do. Since you get the HTML before displaying it, you could perhaps grep the <img> tags and creating those thumbnails, storing them to the iPhone, replacing the src path of the original <img> tags by a local URL of your thumbs.
Probably the device you are using cannot support 4MB images when decompressed in a UIWebView.
Which device are you using?
4 minutes to load 4 images is a very long time. Is your network very bad? Otherwise it could be another indicator of wrong approach.
Being you I'll try to use native UIImageView to display the images and perform some kind of queued download, maybe with ASIHTTP.
So you can load and unload the images when you need them and avid keeping them always in memory.
As Jojas point, I still think that the answer is correct as the UIWevView drains memory to render the DOM elements.
Related
I have a lot of images on my website and that makes my website load too slowly. should I create a small image with low quality and small size and make a blur effect on it and make the real images load slowly (lazy load) after all page files are downloaded or what should I do
That's a very interesting issue. I love the answers posted here (very detailed and informative), but - I think that the crux of your problem is the coupling between your page resources and your page load. Thus I think that de-coupling those 2 will make a HUGE difference
The problem
You page is loading with all of it's resources. this results in a slow and leggy page load that reminds us of old-fashion web sites. We want a more modern approach that loads the page in a more elegant way
The Solution
Load your page with light-weight content (such as text)
Present the partially-loaded page to the user with placeholders for the rest of content
in the background - lazy-load heavy page resources (such as images)
let the page populate itself while the user has full access to it
How To Implement
Let's focus on the problem you mentioned - images. You may think they are loading slowly because of their size. But, videos (which are heavier than images) are usually loaded with no problem - because modern video players are loading them in chunks and have a really good strategy to give the user a great experience. So, for now, we will NOT focus on the weight of your resources but instead focus on how to load them properly. It goes without saying (but I'll say it anyway) - AFTER you are getting the results your expected - it is advise to properly handle the size of your images as noted in the other answers
A very simple and effective demo for this:
<style>
img.loader {
display: none;
}
img.loader.active {
display: block;
}
</style>
<script>
function loadImage(target, url) {
const imgElement = target.querySelector('img.target')
const imgLoaderElement = document.createElement('img')
const loaderElement = target.querySelector('img.loader')
imgLoaderElement.onload = event => {
// nice to have - the actual size of the requested image
console.log(imgLoaderElement.width, imgLoaderElement.height)
loaderElement.classList.remove('active')
imgElement.src = url
}
imgLoaderElement.src = url
}
</script>
<div id="image-loader-1">
<img class="active loader" src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt="" width="48" height="48">
<img class="target" />
</div>
<button onclick="loadImage(document.querySelector('#image-loader-1'), 'https://picsum.photos/600/400')">
Load Image
</button>
Let's break this down
Your image container is now a div element constructed of 2 elements
a pre-loader - to have a nice effect of loading something
the image element - this will contain the actual image
The function loadImage asks you to specify the target image container (in our example image-loader-1) and the image url (your site or 3rd0party sites - no difference here). It will then create a new image element (without populating it to the dom) and load the image there (while still playing the pre-loader in the background). Only after the image is full loaded (and the url is cached in the browser) - you may attach this url to your real image element (and then - make the pre-loader disappear).
This way, you will always have the benefit to use a loader until the image is ready for view - making your users experience better
Does this looks good? Right now - no, not really. I cleaned all the styling properties from it in order to make this solution as clear as possible.
Can it be better? yes. Just put some styling efforts into it and you are ready
to go
Note: because this is a general question which does not rely on a specific modern framework, I posted a very generic solution using vanilla JS. Hope it is clear enough for future users to understand and implement in their own projects.
There are several things that can be done.
is definitely make the size of images smaller. if they are not taking a lot of website space then it is better to make them smaller because if they are not shown in the resolution the image belongs to you are just wasting a lot of bandwidth and then downscale the image anyway. There are many online image compressor that you can use or you can directly decrease the size from your image viewer most of them have a resize option.
instead of using jpg/jpeg/png use webp. webp is a better format for images since it provides further compression of data and also have a lossless compression 25% better then png. The biggest pro of webp is faster load time and less storage. BUT this might not be supported by all browsers, so before implementing this just check if anyone is still running netscape or not. Last i checked all browser that are used support it.(https://en.wikipedia.org/wiki/WebP#Support)
If you need more optimization there is also a browser addon called lighthouse created by google. just install it, goto your website and click "generate report". It will tell you all the places you can actually optimize your website.
(Chrome- https://developer.chrome.com/docs/lighthouse/overview/
Firefox- https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)
Why does it get slow?
Images are too large
Images are not optimized according to the device
Images have unspecified dimensions
You use heavy formats
The browser starts loading images all at once
Your cache doesn’t store images
Solution:
Resize and compress images
Lossy = a filter that eliminates some of the data. The quality of the image is impacted.
Lossless = a filter that compresses the data without touching the quality of the image.
Use
Imagify
Ewww Image Optimizer
Optimole (Image optimization & Lazy Load by Optimole)
ShortPixel Image Optimizer
reSmush.it
Set image dimensions
Serve images optimized for each device
Lazy load your images
Implementing Lazy Loading using a WordPress plugin.
Lazy Loading by WP Rocket is a free plugin that implements the lazy
load script on the images.
Check this interesting guide if you want to compare the best lazy
load plugins available on the market.
Implementing Lazy Loading manually: follow this guide from CodeInWP
that explains the two ways to implement lazy loading manually (not so
easy to follow for beginners, though).
Convert your images to WebP
Credit:https://imagify.io/blog/reasons-images-slow-websites/
just in simple language....
Sites that use too many images, or have images that are too large, have longer loading times. This can slow down your entire page, irritating visitors and actually hurting your site's ranking in online search results.
Are there any web tricks to speed up the loading of a web page. I have a few pages where I have images which were created in photoshop, but they are saved as a PNG. The load time is fairly slow of the page due to this, is there anyway to speed up a page load? They are in the region of 1.2/1.5MB
Reducing the size of the file would be a significant advantage.
Additionally converting the asset to webp for Chrome and Firefox, jp2 for Safari and falling back to png would help retain quality while reducing file size.
If the image isn’t in the first viewport you can also try lazy loading the image with something like lazysizes or at the very least the loading attribute.
You could compress the images using an online tool. Although, this may slightly reduce the quality.
I’ve used this site before: https://tinypng.com/
Other than that, I’m not sure if you can “speed up” the load time for a webpage.
You can check your website images here
https://www.imghaste.com/pagespeed/
1.2 to 1.5MB for each image is way large.
You need to adopt a process where you can optimize/shrink images for your website.
If you don't really need the images to be PNG you can always convert them to JPEG.
https://www.imghaste.com/converter
I am new with cocs2d. I have created an app using Cocos2d. The app is working fine but problem is that application size is too large 350MB. There are many images in this app. I have used png and where possible jpeg images. There are many png images that have larger than 1 mb.
Is there any way to reduce the application size. I've reduced the size whereever possible. Is there any other format that can be used in place of png? There are no many animations. The png are used only purpose of transparency.
Your images are way out of size. Even if you put them on server, and then download it will take time to download.
The best option is to reduce the image size. A couple of sites that can help you do that are:-
Reduce image size
Compress image size
You can keep the image content on your server and then download the image content asynchronously (which is more imp download it first). If there are levels then download initial levels first and download remaining on the background thread. You can always display a loader on launch and display some help kinda stuff meanwhile the data gets download and cached.
You can make use of SDWebImage and other libraries to get your images stuff async.
Hope it helps.
While your pictures are fairly large and you should try to reduce the number and size, you can make gains through packaging the .png into pvr.ccz files. There are multiple different programs available to do this. I like to use Texture Packer which is available here: http://www.codeandweb.com/texturepacker
You can find some tips in my post on reducing memory usage & bundle size.
Most importantly use texture atlases in .pvr.ccz format and where possible reduce image color depth to 16 bit. Avoid JPGs altogether because they're terribly slow to load in cocos2d.
There is no issue in using png files although your images are too large, You can reduce their size by 70 - 80% by using tinypng and it will not going to hurt your graphics.
https://tinypng.com/
I usually edit the image size now https://resizeimage.io , you try!
Good day.
I have a UIWebView that loads a big article with 10+ images. HTML code is stored locally, images are loaded by UIWebView automatically.
Sometimes web view won't load all of the images (for example, 3 out of 10). It doesn't depend on a connection type (EDGE/WiFI), image amount (sometimes web view loads 20 out of 20 images, sometimes doesn't load 3 out of 5).
As for now the only way to fix this as I understand is parsing <img> tags in HTML and loading images programmatically to a local cache for future displaying.
Any thoughts? Is there any way to control UIWebView's image loading?
Thank you.
I've recently had the same issue on another project: some images were displaying as half black only on slow connections like GPRS/EDGE. The reason was that my client's web server had a limit for connection time when downloading images. If you've run into similar issue don't forget to check that.
I am building an apparel catalog on the iPad. The app will contain over 2000 jpg product images at 2048 x 1536 # 72ppi, plus 2 sizes of thumbnails for each image. The large size of the primary images is to allow for zooming in on the products at reasonable resolution. The larger thumbnails will be displayed on each page to show alternate colors for each product. The smaller thumbnails are used in a side-scrolling pop-up filmstrip-style page browser.
I am dynamically resizing the larger thumbnails from the full-sized images as each page is displayed (in a paging UIScrollView). The smaller thumbnails are pre-rendered in photoShop to maximize the performance of the side-scrolling page browser.
Aside from the space taken up on the device from so many images, what other issues or concerns are there around the large number of images in an app like this? Memory management is under control because I am paging the large images in and out as needed as the user moves between pages in the main UIScrollView.
You are going to want to take a look at the PhotoScroller sample code. Those are mighty large images, and will cause your app to crash with the amount of memory they consume.
To page between pages, that means you'll have 2 images always loaded. If you can tile the images, I strongly suggest you do, that will further reduce your memory footprint.
Keep in mind that just because you can use say, 80 MB of memory for your application, does not mean you SHOULD use that much. Be a nice neighbour, your application will run along side other applications which themselves, use memory. Try and reduce your footprint however possible.
If you are dealing with the large image memory management properly (by tiling) and your customers are aware of the sizes of the app and/or downloads then there really isn't much other concerns.
The iPad has enough processing power to handle this kind of image processing pretty swiftly, but I wouldn't expect this to run great on an older iPhone.
To prevent crashing, I would quadruple check that your memory management works the way you say it does, and that you definitely don't ship with NSZombieEnabled on.
In my opinion, if you're dealing with that much data you should build a hybrid app, and host all the images on a web server somewhere. An image that size can approach 1 MB: 1MB * 2000 images = 2 gigabytes of storage space on the phone consumed.