I have to provide a responsive website targeting Opera Mini devices. I have to make the page's size as small as possible. As Opera Mini uses a proxy to compress page's size, I was wondering if Opera Mini does load hidden elements (like pictures) on the client device if the elements are specified as follows:
<img style="display:none" source="..."/>
Opera Turbo does compress images to decrease overall page size. But it does not remove any markup from the code. Furthermore, the compression mechanism can be disabled in the settings (at least in Opera Mobile).
Related
Referencing this article: https://cloudinary.com/blog/evolution_of_img_gif_without_the_gif
What is the compatibility situation with videos in img in 2020? I don't know what the name of the feature is called to look for in caniuse.
Now you can <img src=".mp4">s in Safari Technology Preview
Early results show mp4s in tags display 20x faster and decode 7x faster than the GIF equivalent - in addition
to being 1/14th the file size!
Now we wait for the other browsers to catch-up
By today (Oct 2022), we still can only use <img src=".mp4"> on Safari.
If you want to make MP4 files work like GIFs on other browsers, you might wanna use <video autoplay muted loop>.
I have a problem on a website.
When I reach this url http://www.diamir.com/en/product/diamir-vipec-12/, on page load, videos are not loading correctly. When I click on the play button, video remain black and only after a while become clear. It's really a strange behavior. I don't know if it is an issue with the codec or something else.
The website is optimized using PageSpeed Service from Google.
Codec: AVC (Baseline#L1.3)
Here is the HTML source:
<video controls class="img-responsive">
<source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
<source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>
Someone has had the same issue?
There are a couple of things you need to fix/take into account:
your videos play well in Chrome but IE displays an error message and firefox just won't read them.
your mp4 has the MOOV box after the MDAT box which means your mp4s are not prepared for web delivery. This issue is described here
Suggestions to fix it:
use Handbrake, ffmpeg or MP4Box to prepare your MP4 files for web delivery (aka faststart)
use the preload attritube set to "auto" in your HTML5 video tag for faster playback on click after page load (if you do that do not load too many videos on the same page or your end user will suffer network congestion)
set width an height for your HTML5 video tag otherwise it will scale to the resolution of the video file. You may want to keep control on that especially for responsive design.
Your videos have no audio track. That should not be a problem for HTML5 video playback but keep that mind if needs be. I have seen cases where you need to add a silent audio track to make it work on all devices (especially for exotic fallback from HTML5 video).
You can read there for more infos on HTML5 video. I suggest you double check the section called "MIME Types Rear Their Ugly Head" as well.
I am having problem using media queries for IE8. Suppose I want specific CSS at 1280px resolution, it is working fine of all browsers except IE8.
The CSS applies on IE8 when I increase the resolution from 1280px to 1301px. I think it is taking scrollbars width too.
Media queries are not supported in any version of IE below 9. Use Respond.js. Read the docs for Respond.js
I've always been wondering : What librairies/APIs are used by web browser engines (Gecko, WebKit ...) to render images, text, buttons & stuff ?
Think about it, webpages are rendered pixel by pixel identically across operating systems. Yet buttons, drop lists and text look native on most platforms.
The main are
Trident (IE and derivats)
Webkit (Safari, Chrome)
KHTML (KDE Konqueror) This was the base for webkit
Presto (Opera)
You can read more here: http://en.wikipedia.org/wiki/Web_browser_engine
These engines create an object structure of the HTML and then use Components to build the page, the browser engine does not render pixel by pixel but uses buttons, comboboxes, image elements all of which in them self render to a buffer and then those imagebuffers are collapsed to the screen.
Some engines use the plattforms own components (Trident) other use their own with different skins for different plattforms.
For actual rendering I know IE uses windows controlls and Gecko as you noted uses Cairo.
I assume webkit might use gtk or qt but I am not sure and for opera I have no idea but I assume they use some form of framework or toolkit.
I see that Adobe AIR uses WebKit as its render and I see that WebKit (at least the most current build) has some SVG support. Does this mean (and has anyone specifically tried) that an Adobe AIR application could render SVG on an HTML page?
On the offchance that it's helpful (and that you don't already know), Flex can embed SVG at runtime compile time, which effectively converts it to SWF format and embeds it as a resource.
[Embed(source="assets/frog.svg")]
[Bindable]
public var SvgAsset:Class;
More info at Adobe's embedding assets article.
If ActionScript 2: use the com.itechnica.svg (PathToArray) library to load SVGs at SWF runtime and display them (uses XML for SVG parsing):
Using SVG Path Data in Flash, Download button on the right pane.
If ActionScript 3: use the com.zavoo.svg (SvgPath) library to load SVGs at SWF runtime and display them (uses RegExp for SVG parsing):
Source code for SvgLoad and SvgDraw, Download button on the bottom-left.
No, according to the Adobe AIR Developer Center article What's new about HTML, HTML5, CSS, and JavaScript in AIR 2.5?.
SVG
Another feature that has received
a great deal of interest lately is
support for SVG. While present in
WebKit, the current version of Adobe
AIR does not support SVG.
The main reason for not including it
was runtime size concerns (adding it
would have increased the runtime size
by 15 to 20 percent). Initially, the
main pain-points regarding AIR were
the size of the runtime, integration
with the operating system and native
APIs, support for the tag and
new CSS properties, and JavaScript
performance. These priorities, coupled
with a trend toward reduced interest
in SVG graphics, led to SVG support
not being included in the current
version of Adobe AIR.
However, the renewed interest in rich
JavaScript applications powered by
HTML5 canvas and faster JavaScript
engines increased the number of
requests for scriptable vector
graphics via SVG. Thus, adding support
for SVG graphics may be considered for
the next version of AIR.
Adobe AIR can only support SVG once Adobe updates their version of WebKit (AIR's HTML rendering engine) and enables the SVG support within their version of WebKit. Might be a business decision not to (ie Flash).