Large sized images on website rendered on phones - javascript

I am working on a web application that stores and displays satellite images from a given location.
My problem is that these images are quite large (up to 20MB jpg-files) and this causes rendering problems on certain mobile devices.
On some android phones the image resolution is downgraded, while on some iOS devices the image won't even load. The iOS problem is maybe described here, but with no solution.
Does someone have any experience with this kind of problem?
I do apologize if my problem is to broad, but i am really just looking for some pointers or ideas.
I am developing in html/css with jquery/javascript and the server is hosted by cPanel with a Linux CentOS machine.
Regards Peder.

You basically have two options:
Split those large images into smaller images and tile them (still downloads large amounts of data, but at least the client can do it in pieces)
Downgrade image resolution. That is, dynamically serve the quality of image that the client can actually handle.
Many map websites will use a combination of both. Being, they download a few high-quality segments for the area you look at closely and low-quality for all the areas you aren't looking at as closely.

Related

How to detect/handle low performance devices Javascript

I am working on a HTML canvas app that displays graphics to the screen. The graphics aren't important for the website, they just make things look pretty.
My problem is the app needs the cpu of the device to run at a certain speed or the frame rate becomes unacceptable.
Any modern phone/laptop can easily run the app, but of course not everyone has updated tech.
At that point I'd like to drop support for the device and stop rendering the animations because it will just do more harm than good.
This idea is pretty standard on the internet. For example if you want an image background for your site, but you don't want mobile phones to load the same large image as desktops then you just use some css queries to only serve the image to desktops.
This is how we can get new features pushed out while keeping backward compatibility.
However when it comes to detecting performance this isn't as easy of a task as it sounds. There's no way to get cpu specs with Javascript, and even if I could there's no way of telling what else the user is running on their machine.
This leaves me with 2 options, either run a small performance test before I start the canvas app. Or start the app and try to run a few frames and stop it if the frame rate is too low.
The problem is both of these options are pretty sketchy because the device may just have a "speed hiccup" at the start of the app, and so I shut down the animations for nothing.
Also if a user has a device that sits right on the border of the threshold sometimes the animations will load, and sometimes they won't which would probably be confusing.
Is there any "standard" on the internet to deal with this sort of problem? Would it be best to leave a footnote at the bottom of the site window when animations are turned off?
Or is it just something you have to accept when pushing the boundaries and dealing with performance?

Avoid "black squares" showing on images in Chrome when using Hardware Acceleration?

Recently a large number of users of my company's website have reported seeing black boxes on some images on our login page.
For example:
I've searched for solutions, and everyone suggests turning off Hardware acceleration in Chrome by going to Settings | Advanced | Use hardware acceleration when available and disabling this option, which of course I don't want to have to tell users of our website to do!
It seems like this has been an on again/off again issue in Chrome since 2015.
Is there a way to avoid this issue using CSS, different image formats, or directives of some sort?
EDIT: Some Additional information
It's definitely reproducible on different machines running the same version of Chrome, with no extensions installed, with a new profile user, and in Incognito mode. But not on all machines - only some.
The images in question are being loaded from a CSS Image sprite.
Here's a dump of my GPU info, which has this issue.
I've found 2 different solutions for our situation:
Remove the border-radius css attribute from styling these images
Stop using a CSS Image Sprite, and use an image or font instead to load these images from.

Chrome image rendering issue

We are developing an image viewer with zoom and cet...We are developing with angular js and using matrix3d transformations on the images so we can manipulate them.
When opening our project with Firefox with 30 1MB pics it renders them quite easily, while in google chrome it makes problems with even 4 1MB images. I feel Like we are missing a few css lines which will solve it all.
What might be the causes for this kind of thing?

How to manage images for a mobile app

I am jumping from Core Java/OSGi into the mobile space, for my initial project I am putting together a little Cordova / Famous / Angular app. I would like to display an image that fills the top half of the screen (100% width x 50% height) and then use a lightbox that transitions between images.
I am having a hard time finding resources that describe best practices for managing image resources. Some of my questions include:
My assumption is you want to standardize your images to a certain size and target density. What are the size x density combinations I should be targeting?
Since this will be a background image, is it better to use a <span> and set the background-image attribute or use an <img>?
How does the above choice of tag change if I wanted to have a mirrored effect? Should I stick to the <img> and set webkit-box-reflect or use another <span> combined with some rotation?
The idea is to fill the space, which will mean that on some devices either the horizontal or vertical edges may not be visible. Ultimately, I know the best answer will be finding something that works and just sticking with that.
What are some reliable resources that describe best practices for image management, specifically related to managing images for mobile devices?
Thanks,
JD
There are many resources out there. You can easily find many Videos, tutorials, articles etc.
I suggest to start with following. They cover almost all aspects including graphics, performance, quality of an intuitive app.
Apple iOS
Learn how to build the polished, engaging, and intuitive apps that Apple customers expect
https://developer.apple.com/design/
https://developer.apple.com/accessibility/
Android
Design and build apps the right way. Learn how to create apps that look great and perform well on as many devices as possible, from phones to tablets and more.
http://developer.android.com/design/index.html
http://developer.android.com/guide/practices/index.html
IBM Mobile Solutions Best Practices
Starting a new mobile development project? These best practices are general in scope and can help you plan your app's architecture and progress through front-end development. (These practices are not specific to any particular Worklight release.)
http://www.ibm.com/developerworks/mobile/worklight/best-practices.html
See Images related Tips.
Blackberry
When you follow best practices, you can improve the performance of your app and make it easier to debug and maintain.
http://developer.blackberry.com/html5/documentation/v2_2/best_practices_for_web_development.html
Windows Mobile Apps
http://msdn.microsoft.com/en-us/library/windows/apps/hh994633.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh202944(v=vs.105).aspx
http://msdn.microsoft.com/en-us/library/bb677125.aspx
Update:
Image optimization
There is another great source on Google Developers site and is specific to Image Optimization.
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
Eliminating and replacing images
Vector vs. Raster images
Implications of high-resolution screens
Optimizing vector images
Optimizing raster images
Lossless vs lossy image compression
Selecting the right image format
Tools and parameter tuning
Delivering scaled image assets
Image optimization checklist
Hope this should help.

Reducing image loading times?

I was wondering if there is any other ways to compress my images or any script that would load the page faster / or the the images behind the scenes?
The site is very interactive and using very high quality layers of images for the main layout. I have already saved for web devices in Photoshop and re-compressed using ImageOptim, some are jpeg but the majority are png24 to maintain transparancy, they are all set in CSS.
I have used jpegs and css sprites where i can but there is one in particular of a tree illustration streching the full site length, that is really slowing up the loading time, is there any I could compress these images further or code them differently that I missed?
Any help would be great thanks!
You said you are spriting. That is good.
You can also use tools such as PNGcrush which attempt to make files smaller by dropping things such as meta data.
You should also send far distant expiry headers and use a cache breaker on your images, to ensure the images won't be downloaded again if unnecessary.
In Photoshop, choose file-> save for web, you will be able to find the best compromise between size and quality.
Do you really need the transparency there? PNG transparency is unsupported on some browsers and makes the page processing intensive and slow even on high end computers, depending on image size and quantity of layers. If you can show something of your site maybe someone can give more hints about how to optimize it.
You can compress them on the fly with Apache if that's your web server. One of many available articles on the subject: http://www.samaxes.com/2009/01/more-on-compressing-and-caching-your-site-with-htaccess/

Categories