Last time I saw someone asks why Safari on iPad doesn't show some 1920x1440 jpeg with real size & I solved that puzzle. You have to use a progressive-encoded jpeg. However, I find another different problem.
Say, demo.jpg is a progressive-encoded jpeg with 2000x3000 & I upload it to my website. I then access it via url ...demo.jpg, Safari will show it with 2000x3000 size, perfect.
Now I make a most-simple html file named mypic.html. This html has only img tag with src=demo.jpg or src=demo.jpg width=2000 height=3000 inside body. Now I access it via url ...mypic.html. This time Safari show a very small icon of a question mark?
Does anybody know why the latter case fail?
The problem is about the memory available to Safari. The total amount of RAM is just 256MB, and Safari stops showing the image of much smaller size. You need to scale them down.
Related
I'm working on a photography website in which full resolution photos can be uploaded but full-res should not be able to be displayed/accessed (download of the full res will take place through a token.)
I've tried the "restrictTo" setting but resolutions need to not be reliant on specified dimensions.
Is there a way to have myphoto.jpg by default without a querystring display at for example 700x700 yet still have the full resolution file available through a token download? Pretty much, an image without a querystring is still processed by Imageprocessor but with a default resize rule.
I can request an image with a native width of 5000px by myphoto.jpg?width=1400 but the resulting image is the full 5000px width image, why doesn't the max width 1400px image serve up?
If you are getting the full image back it means something has gone wrong. (You've probably ran out of contiguous memory) so make sure you're in 64bit mode.
maxWidth restricts the resize param to an upper limit only. So does nothing on it's own.
What you are probably looking for is the ValidatingRequest event
http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/#events
I would first set ImageProcessor.Web to intercept all image requests in the processing.config file by changing the interceptAllRequests property. That will ensure you capture any attempts to view the image without a token.
In the event you can cancel the request and also alter/add any querystring parameters to limit your size transparently without showing the querystring to the end user.
I would use a query string for the image.
url?width=1400&height=900&mode=crop&anchor=center
I would also use a lazy load so the page loads faster with small blurry images and then afterwards replaces them all with the full res or querystring for max size you want to display at.
I wrote a script for this.
http://www.codeshare.co.uk/blog/lazy-loading-images/
Also on my site now, when I upload an image, I automatically resize it down to 1080p resolution when it saves. So I can upload a massive image and not have to worry about resizing it first or it taking up too much space on my server.
Here's the code for that too
http://www.codeshare.co.uk/blog/automatically-resize-your-media-images-in-umbraco/
I know this is a stupid problem, but this is my first real app that I have to make, I have no one to ask and I looked up this problem and found no other similar problems.
My app crashes on real devices with no exception. I saw in the simulator that uses too much RAM and after a while I got to the conclusion that the pictures I am using are to blame.
The app is structured in this way: it has 8 viewControllers for different things: for example, it starts with one which lets the user select the avatar with which he/she will play and here I have two pictures, next is a viewController which shows the stats for that avatar and here it is another picture and so on. The problem is that each picture uses 40MB of RAM to be displayed and things add up so the app uses more than 300MB of RAM when the user gets to the gameviewCOntroller where the game is. Because of this, on devices like iPAD 2 or iphone 4 it crashes, but not on iphone 5.
I tried to set the images both from "images.xcassets" and from a ".atlas" folder, but the result is exactly the same. The pictures have a dimension of no more than 1500x1999px, they are in png format.
Also, I saw that if the app were to start directly into the gaveViewController it would use 180MB so the other viewController remain in memory or something like that. Should I "clear" them or something similar?
//-------update-------
This is what I got from Instruments:
Memory is a big deal on mobile devices, there is not a clear answer to you question, but I can give you some advices:
If your images are plain colors or have symmetric axes use resizable images. You can just use one line of pixel multiplied by with or height to cover the entire screen using a small amount of memory
Image compression doens't have effects when the image is decompressed. So if you have a png that is 600kb and you are thinking that converting in a 300kb will lower memory usage is only true for "disk space" when an image is decompressed in memory the size is widthXheightXNumber_of_channelXbit_for_channel
resize images: if are loading a 2000px square image into memory and you show it inside an image view of 800 px square, resize before adding it.You will have just a peak while resizing, but later it will use less memory
If you need to use big images, use tiling techniques such as CATiledLayer
If you don't need an image anymore get rid of it. It's ok to have an array of path to images, but not an array of full uncompressed images
Avoid -imageNamed it caches images and even if Apple says that this cache is released under memory pressure, you don't have a lot of control on it and it could be too late to avoid a crash
Those are general advices, it's up to you if they fit your requirements.
You should definitely follow Andrea's advices.
Additionally you should consider setting the image size to exactly what your need is. You're saying that you've tried to set them from xcassets so you have full control over the images you're loading, which is great (compared to downloading an image that you cannot modify).
I highly suggest you read some documentation on using Asset catalog files. This will allow you to have high-resolution image for bigger screens that also have more memory, and smaller ones for older devices, which is what you want here.
Also, note that 1500x1999px is still a very big size for most mobile devices.
More links about screen-size:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
We are getting reports in the field, on both iOS and Android, of partially loaded profile images in our mobile app.
Here is what it looks like (note that I have gaussian blurred part of the image to protect the privacy of our members, but the grey is what is actually rendered):
AFAIK there is not a concept of loading "Progressive JPEGS" in UIImageView, so I am at a loss about how this image could even have been rendered at all. This code has not been modified in at least a year. All images are hosted on S3, and have been for 2 years.
Is it somehow possible that carriers are truncating images now if a device hits a certain bandwidth limit?
-- Edit --
I can confirm we were able to repro this behavior on an AT&T network. Is it possible that AT&T is munging images in this fashion when a user goes over his data cap or something?
I had this same issue crop up when I switched from https to http images. Needless to say... I switched back to https based images.
I'm fiddling with the iOS startup image.
Both tutorials I found
http://mathiasbynens.be/notes/touch-icons
https://gist.github.com/472519
are using .png images for the splash screen. I have tried to reduce my png files size, but for the large splashscreens, I'm well over 500k, which is too much for me. So I tried using jpg, which also seems to work, but I'm not sure I'm doing the right thing when switching from PNG to JPG.
Here is my code for inserting the splash screen (lost the link to the original author... :-(
It's inserted as script, because iOS is said to load every specified image although only one image is needed. The script ensures only a single splash screen is inserted into the DOM and thus avoids unnecessary http requests.
<script>
(function(){var a;if(navigator.platform==="iPad") {
a=window.orientation===90||window.orientation===-90 ?
"landscape.jpg" : "portrait.jpg"
} else {
a=window.devicePixelRatio === 2 ? "retina.jpg" : "startup.jpg"
}
document.write('<link rel="apple-touch-startup-image" href="'+a+'"/>')})()
</script>
My questions:
1. Should I use JPG over PNG to cut down on file size?
2. How can I reduce my PNG file size? (I used optipng, but 20% of 800k is still 640k)
Thanks for hints!
I use JPG files on my site and they work just fine. Just make sure you optimize for web when you save, and make sure the image dimensions are exactly correct. See here (the page mainly talks about splash images for an actual native app, but the information also applies to web apps): http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
I have a dream script I'm looking for and wondering if anyone here as stumbled across one
Problem: Creating #2x and regular PNG files for iOS software
Edit: no need to worry about file type. iOS images should ALWAYS be 24bit PNG
In my workflow, I'll get my image all set then go through this same exact ritual every time:
Save for Web & Devices
Press Save and choose a filename, like "myimage#2x.png"
Save for Web & Devices again
Reduce image size by 50%
Press Save and choose a similar filename like "myimage.png"
My dream photoshop script would
1. Ask for a filename & location: i.e. present a typical save dialog
2. I'd enter a name "myimage"
3. it would save the current document as "myimage#2x" in that location, and then save a 50% reduced image named "myimage" also in that location
Any ideas? I've poked around the photoshop scripting reference but its a bit overwhelming.
Thanks!!
You could use photoshop Actions for that. You can found dozens of how-tos for that in google.
But i rather prefer to save all images just in retina with #2x and then load them all in the little and smart app called unretiner (Appstore link) to generate the lowers images.
Here is an action set I created (JLRetinaPNGExport.atn) which you can find here. This action set comes with 3 actions:
current layer export as .png at 100% then 50%
current layer, trim transparent pixels, then export as .png at 100% then 50%
merge visible and export as .png at 100% then 50%
This action set was modified from this action set. Hope this helps!