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

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.

Related

Large sized images on website rendered on phones

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.

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.

How was this Skrollr 3D rotation effect achieved?

I'm a fairly new and still learning developer and today I came across website that got my interest. http://www.lobagola.com/ I checked the source codes and reviewed what scripts the developer used and discovered Skrollr.
What kind of images did he use? Are they just plain static images or some sort of 3D image I'm not familiar with, how do I achieve this effect using Skrollr? I have read the documentation and I don't believe I came across an example as such.
When in the same situation I typically open the Developer Tools of my Internet Exploer with F12 (yeah, yeah... other browsers got similar tools to do this, you might have to look a bit) and go to the Network tab, which allows you to track all network activity caused by the current web page.
Once enabled (green "play" icon), I hit Ctrl + F5 to force-reload the whole page.
After that I just go through all the files loaded to see whether I can find whatever I'm looking for. You don't have to read code or intepret anything. In this example I've been looking for a movie file or anything similar.
Obviously to not require HTML5, this page uses a "sprite sheet" with the different frames of these animated transitions.
There are also single images, obviously used as placeholders and as a fallback.
When scrolling through the slideshow, the page will calculate an index between 0 and the number of frames in the image file and display that (cut using CSS formatting).

Google Chrome Image Ceiling?

We’re using Chrome for an interactive installation and appear to have hit some sort of image loading ceiling.
The app is built for a multitouch device and runs at 1920x1080. It's built on backbone and involves the rendering and removing of a large number of views which contain sprite animations (facilitated by the stepping of transparent png background images).
We’re preloading all of the images and listening for completion using David Desandro’s imagesloaded plugin. This worked perfectly at first (with less assets) and appears to work now, until you navigate further into the application. Despite the absence of 404s in the console and the confirmed presence of the files some of the images aren’t loaded and simply don’t appear. The problem persists even if we don’t preload the images.
The typical size of an animation sequence is 92250px x 450px and they come in any where between 1mb and 10mb each (that's after they've been optimised using the compressors behind grunt-contrib-imagemin). The image assets total is around 300mb.
What we’ve tried:
Applying any cache related flags in the chrome command line arguments when launching chrome (http://peter.sh/experiments/chromium-command-line-switches/) such as --disk-cache-size.
Caching all of the media assets using the HTML5 cache manifest.
Testing on different machines, both mac and PC. This produces the same results.
What we’re currently trying:
Reducing the size of all of the images by removing every other frame in the animations. This isn't ideal.
Changing the animation method to switch out (preloaded) individual images rather than sprites.
Preloading images in batches just before they're about to be added (not ideal).
Ideally we'd like to remove the ceiling on whatever this limit we've hit is. Any help/insights would be appreciated!
Whilst we haven't really got to the bottom of what is causing this issue, we have implemented a work around. Switching out the large sprite sheet animations for individual PNG frames does the job. I'd still be interested to learn exactly what the issue/limitation was for future reference...

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