Test your skills: Images and Form elements - Learn web development
the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on images, media and form elements.
...your post should include: a descriptive title such as "assessment wanted for images skill test 1".

CanvasImageSource - Web APIs
canvasimagesource provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
... the interfaces that it allows to be used as image sources are the following: htmlimageelement svgimageelement htmlvideoelement htmlcanvaselement imagebitmap offscreencanvas specifications specification status comment html living standardthe definition of 'canvasimagesource' in that specification.

Feature-Policy: oversized-images - HTTP
the http feature-policy header oversized-images directive controls whether the current document is allowed to download and display large images.
... syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.

Feature-Policy: unoptimized-images - HTTP
the http feature-policy header unoptimized-images directive controls whether the current document is allowed to download and display unoptimized images.
... syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.

:-moz-system-metric(images-in-menus) - Archive of obsolete content
the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.

GetImageSize
this content is now available at nsiaccessibleimage.getimagesize().

nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article.

View background images - Firefox Developer Tools
in the rules view, you can see a preview of images specified using background-image.

Index - Web APIs
398 using the css painting api css, css paint api, canvas, houdini, learn the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... 532 using images advanced, canvas, graphics, html, tutorial importing images into a canvas is basically a two step process: 533 manipulating video using canvas api, canvas, chroma-key, editing, guide, manipulating, video, effects 534 canvascapturemediastreamtrack canvascapturemediastreamtrack, experimental, frame capture, interface, media, media capture, reference, w...
... 539 canvasimagesource api, canvas, helper, reference canvasimagesource provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
...And 20 more matches

Image file type and format guide - Web media technologies
apng (animated portable network graphics) apng is a file format first introduced by mozilla which extends the png standard to add support for animated images.
...it is technically possible to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done.
... gif supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.
...And 17 more matches

Index - Learn web development
3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.
... 120 images, media, and form elements beginner, css, forms, images, learn, media, replaced content this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css.
... 125 test your skills: images and form elements beginner, css the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on images, media and form elements.
...And 14 more matches

cross-fade() - CSS: Cascading Style Sheets
the css cross-fade() function can be used to blend two or more images at a defined transparency.
... specification syntax the cross-fade() function takes a list of images with a percentage defining how much of each image is retained in terms of opacity when it is blended with the other images.
...if the result is greater than 0%, the result is then divided equally between all images with omitted percentages.
...And 13 more matches

Progressive loading - Progressive web apps (PWAs)
images besides javascript and css, websites will likely contain a number of images.
...we don't need all of the images in the best possible quality at the very beginning of viewing the site.
...first of all, you should use tools or services similar to tinypng, which will reduce the file size of your images without altering the quality too much.
...And 13 more matches

Adding vector graphics to the Web - Learn web development
on the web, you'll work with two types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be.
... popular web raster formats include bitmap (.bmp), png (.png), jpeg (.jpg), and gif (.gif.) vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen.
...you can find this example live on our github repo as vector-versus-raster.html — it shows two seemingly identical images side by side, of a red star with a black drop shadow.
...And 12 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
you can then view previously-captured images and delete them.
...we've also altered the width of the images inside the third container (no longer a column — this is the gallery) so that now you get five per line (it was previously three per line).
... x-card:nth-child(3) img { width: 50%; } this rule simply changes the width of the gallery images so now there are two per line.
...And 11 more matches

imgIContainer
it also provides methods for drawing images onto thebes contexts.
... internally, this interface also manages animation of images.
... obsolete since gecko 2.0 void clear(); obsolete since gecko 1.9.2 gfximagesurface copycurrentframe(); native code only!
...And 10 more matches

<image> - CSS: Cascading Style Sheets
syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... a selection of images chosed based on resolution defined by the image-set() function.
... description css can handle the following kinds of images: images with intrinsic dimensions (a natural size), like a jpeg, png, or other raster format.
...And 10 more matches

Backgrounds and borders - Learn web development
from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... background images the background-image property enables the display of an image in the background of an element.
... this example demonstrates two things about background images.
...And 9 more matches

Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... objective: to test knowledge around embedding images and video in web pages, frames, and html responsive image techniques.
... starting point to start off this assessment, you need to grab the html and all the images available in the mdn-splash-page-start directory on github.
...And 9 more matches

Index - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
...images of those graphs reminded me of the multiheaded hydra monster.
...And 8 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
in vector images, they are used to model smooth curves that can be scaled indefinitely.
... 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.
... 65 canvas codingscripting, glossary, graphics, html, javascript the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d shapes and bitmap images.
...And 8 more matches

Tips for authoring fast-loading HTML pages - Learn web development
if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
... use modern css and valid markup use of modern css reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-css.
... minify and compress your images large images cause your page to take more time to load.
...And 8 more matches

Drawing graphics - Learn web development
graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and svg.
...while you could use css and javascript to animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited.
... drawing images onto canvas it is possible to render external images onto your canvas.
...And 7 more matches

Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
... these theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension.
... add the theme image file to the folder: <mytheme> <your_header_image>.<type> create a file called manifest.json in the folder and edit its content as follows: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "<your_header_image>.<type>" }, "colors": { "frame": "#ffffff", "tab_background_text": "#000" } } } where: "frame": is the heading area background color for your theme.
...And 7 more matches

Graphic design for responsive sites - Progressive web apps (PWAs)
serving images selectively via css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context.
... making html <img>s responsive is not as easy, as there is currently no native mechanism to serve different html images depending on context.
... coping with different resolutions in this section we'll review different strategies for dealing with getting images to work across devices with different resolutions.
...And 7 more matches

SVG documentation index - SVG: Scalable Vector Graphics
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
... 75 filterres needsexample, svg, svg attribute, svg filter the filterres attribute indicates the width and height of the intermediate images in pixels of a filter primitive.
... 271 basic transformations intermediate, svg, svg:tutorial now we're ready to start distorting our beautiful images.
...And 7 more matches

Modifying the Default Skin - Archive of obsolete content
skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file.
...the xul for any skins is the same, however the style sheets and images used are different.
... a skin is described using css, allowing you to define the colors, borders and images used to draw elements.
...And 6 more matches

CanvasRenderingContext2D - Web APIs
it is used for drawing shapes, text, images, and other objects.
... canvasrenderingcontext2d.createpattern() creates a pattern using the specified image (a canvasimagesource).
... compositing canvasrenderingcontext2d.globalalpha alpha value that is applied to shapes and images before they are composited onto the canvas.
...And 6 more matches

Perceivable - Accessibility
non-text content refers to multimedia such as images, audio, and video.
... success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalents (a) all images that convey meaningful content should be given suitable alternative text.
... complex images or charts should have an accessible alternative provided, either on the same page or via a link.
...And 6 more matches

background-image - CSS: Cascading Style Sheets
the background-image css property sets one or more background images on an element.
... the background images are drawn on stacking context layers on top of each other.
...how the images are drawn relative to the box and its borders is defined by the background-clip and background-origin css properties.
...And 6 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial).
... note: browsers do not always display images.
... there are a number of situations in which a browser might not display images, such as: non-visual browsers (such as those used by people with visual impairments) the user chooses not to display images (saving bandwidth, privacy reasons) the image is invalid or an unsupported type in these cases, the browser may replace the image with the text in the element's alt attribute.
...And 6 more matches

Simple Example - Archive of obsolete content
in this situation, an rdf container will be used to hold the list of images.
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg" ...
... dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by urls.
...And 5 more matches

How can we design for all types of users? - Learn web development
if you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more: div.container { max-width:70em; } alternative content for images, audio, and video websites often include stuff besides plain text.
... images images can be either decorative or informative, but there's no guarantee that your users can see them.
... your readers may be using a very strict intranet that blocks images originating from a cdn.
...And 5 more matches

Dealing with files - Learn web development
the most common things we'll have on any website project we create are an index html file and folders to contain images, style files, and script files.
... let's create these now: index.html: this file will generally contain your homepage content, that is, the text and images that people see when they first go to your site.
... images folder: this folder will contain all the images that you use on your site.
...And 5 more matches

Mozilla’s UAAG evaluation report
(p1) vg alt for img: rendered when images turned off.
...(p3) g alt for img: rendered when images turned off title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ?
... checkpoint title status notes/plans 3.1 toggle background images.
...And 5 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
ne; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-l...
... 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); ...
... background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px;...
...And 5 more matches

background-size - CSS: Cascading Style Sheets
spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.
... to specify the size of multiple background images, separate the value for each one with a comma.
... background images created with the element() function use the intrinsic dimensions and proportions of the generating element.
...And 5 more matches

CSS3 - Archive of obsolete content
support for multiple background images.
... css counter styles level 3 candidate recommendation testing modules css images module level 3 candidate recommendation defines the <image> data type.
... adds: support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the css box-decoration-break property.
...And 4 more matches

Getting Started - Archive of obsolete content
now all of the css and images are extracted, but if you make some changes and run mozilla as it is, you will not see them because it's still set to look at the files in the jar files.
...this is a catchall directory which holds all of the images and styles for portions of mozilla that don't merit their own individual directory.
...they contain the images/styles for the browser, email client, or html editor.
...And 4 more matches

Creating localizable web applications
don't put text or numbers in images.
...good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the website.
..._("step 3: testing your persona images") .
...And 4 more matches

Index
however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.
... 168 iaccessibleimage interfaces, xpcom, xpcom interface reference this interface is used for a representation of images like icons on buttons.
... 183 imgicache interfaces, interfaces:scriptable, needscontent, xpcom interface reference evict images from the cache.
...And 4 more matches

imgICache
use the following snippet to obtain a relevant image cache for a given document or channel (where relevantdocument is a document object that contains images you care about, or relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(relevantdocument); // alternatively, tools.getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will...
...any images from windows in private browsing mode will not be present in the cache returned from a call with a null parameter).
... method overview void clearcache(in boolean chrome); nsiproperties findentryproperties(in nsiuri uri); void removeentry(in nsiuri uri); methods clearcache() evict images from the cache.
...And 4 more matches

HTMLImageElement.alt - Web APIs
this may be the case because of an error, because the user has disabled the loading of images, or because the image simply hasn't finished loading yet.
... think of it like this: when choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.
... decorative images images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string ("").
...And 4 more matches

Drag Operations - Web APIs
these include text selections, images, and links.
... in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default.
... the draggable attribute may be used on any element, including images and links.
...And 4 more matches

Web accessibility for seizures and physical reactions - Accessibility
patterns and images can also trigger epilepsy.
... the fact that static images may cause seizures and other disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
... although static images are possible as triggers, they are less consistent.
...And 4 more matches

background-repeat - CSS: Cascading Style Sheets
the background-repeat css property sets how background images are repeated.
... by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...the first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
...And 4 more matches

image-rendering - CSS: Cascading Style Sheets
the property applies to an element itself, to any images set in its other properties, and to its descendants.
...this property has no effect on non-scaled images.
...this is intended for images such as photos.
...And 4 more matches

image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
... color fallback if a color is specified in image() along with your image sources, it acts as a fallback if the images are invalid and do not appear.
...unlike declaring a background-color, which is placed under or behind all the background images, this can be used to put (generally semi-transparent) colors over other images.
...And 4 more matches

HTTP Index - HTTP
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more 4 basics of http guide, http, overview http is a pretty extensible protocol.
...http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d.
... 86 csp: img-src csp, content-security-policy, directive, http, image, reference, security, img-src, source the http content-security-policy img-src directive specifies valid sources of images and favicons.
...And 4 more matches

In-Depth - Archive of obsolete content
values: normal, reverse -moz-image-region this is useful for dividing up an image into multiple smaller images.
...check out the section on organizing images for more information.
...the image that is listed there by default (chrome://navigator/skin/icons/btn1.gif) is actually a bunch of images grouped together in one file, so somewhere one of the css attributes is telling it what portion of the larger image to cut out and display.
...And 3 more matches

Additional Navigation - Archive of obsolete content
to look closer, here is the data network after only the member has been evaluated: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) when evaluating the triple, the template builder will iterate over the three potential results found so far.
... for the first result, the value of the ?photo variable 'http://www.xulplanet.com/ndeakin/images/t/palace.jpg' will be used as the subject, the predicate will be 'http://purl.org/dc/elements/1.1/title', and the object will be 'canal'.
...the resulting data will look like the following: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) here is the example.
...And 3 more matches

Anonymous Content - Archive of obsolete content
ditable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
...xul: <box class="zoombox"> <image src="images/happy.jpg"/> <image src="images/angry.jpg"/> </box> xbl: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1px solid black"> <children includes="image"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at ...
...And 3 more matches

XUL accessibility guidelines - Archive of obsolete content
alternative text provide alternative text for meaningful images.
...use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e.
... image elements, buttons with images).
...And 3 more matches

Create Your Own Firefox Background Theme - Archive of obsolete content
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
... online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser.
...footer images are optional.
...And 3 more matches

HTML: A good basis for accessibility - Learn web development
one thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning.
... if they are decorational, it is better to write an empty text as a value for alt attribute (see empty alt attributes) or to just include them in the page as css background images.
... note: read images in html and responsive images for a lot more information about image implementation and best practices.
...And 3 more matches

HTML: A good basis for accessibility - Learn web development
one thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning.
... if they are decorational, it is better to write an empty text as a value for alt attribute (see empty alt attributes) or to just include them in the page as css background images.
... note: read images in html and responsive images for a lot more information about image implementation and best practices.
...And 3 more matches

Mobile accessibility - Learn web development
responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.
...in general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections.
... therefore, it is wise to serve smaller images to narrow screen devices as appropriate.
...And 3 more matches

Advanced styling effects - Learn web development
play with the percentage and pixel parameters in the live example to see how the images change.
... you can apply filters to any element and not just images.
... there are two properties that use blend modes in css: background-blend-mode, which blends together multiple background images and colors set on a single element.
...And 3 more matches

Sizing items in CSS - Learn web development
a common use of max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width while making sure they don't become larger than that width.
... this technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately.
... you should, however, not use this technique to load really large images and then scale them down in the browser.
...And 3 more matches

Responsive design - Learn web development
the second technique was the idea of fluid images.
... using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger.
... responsive images the simplest approach to responsive images was as described in marcotte's early articles on responsive design.
...And 3 more matches

From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio.
...most content is copyrighted, offline and online, even content you might not expect (for example, most images on wikimedia commons).
... the <embed> and <object> elements the <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like java applets and flash, pdf (which can be shown in a browser with a pdf plugin), and even content like videos, svg and images!
...And 3 more matches

Multimedia and Embedding - Learn web development
this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
... images in html there are other types of multimedia to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage.
... in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css background images.
...And 3 more matches

Image gallery - Learn web development
the html body looks like this: <h1>image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <im...
... it sets the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.
... your javascript needs to: loop through all the images, and for each one insert an <img> element inside the thumb-bar <div> that embeds that image in the page.
...And 3 more matches

Animated PNG graphics
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the portable network graphics (png) format, adding support for animated images.
... it is intended to be a replacement for simple animated images that have traditionally used the gif format, while adding support for 24-bit images and 8-bit transparency.
... apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.
...And 3 more matches

Pixel manipulation with canvas - Web APIs
we will also look into how image smoothing (anti-aliasing) can be controlled and how to save images from your canvas.
... data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.addeventlistener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
...you can toggle the checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers).
...And 3 more matches

Using files from web applications - Web APIs
example: showing thumbnails of user-selected images let's say you're developing the next great photo-sharing website and want to use html to display thumbnail previews of images before the user actually uploads them.
...we also add a file attribute to each image specifying the file for the image; this will let us fetch the images for actual upload later.
...while they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling url.revokeobjecturl(): url.revokeobjecturl(objecturl); example: using object urls to display images this example uses object urls to display image thumbnails.
...And 3 more matches

ARIA Test Cases - Accessibility
expected at behavior: when focus falls on a button, a screen reader speaks the text of the button plus alternative text of any images within the button (the accessible name of the button).
... window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - img tiled image expected at behavior: screen readers should announce the image is a single graphic element along with its associated label, even though it is built from numerous sub-images.
...jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - radiogroup and radiobutton radio example using css background images radio example using img element radio example using aria-activedescendent property dojo nightly build expected at behavior: on initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position.
...And 3 more matches

Accessibility and Spacial Patterns - Accessibility
the two images below are from nasa research, specifically, from the article, "designing with blue" "spatial localization.
...the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation.
... stripes and patterns are typical of the kinds of images that create problems, and stripes have been studied most closely.
...And 3 more matches

Performance fundamentals - Web Performance
text and images reflow automatically, ui elements automatically receive the system theme, and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages.
... for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constructed resources like images in that part of the dom have to be loaded and decoded the css styles must be applied to that dom the styled document has to be reflowed nowhere in that list is "load the js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
...javascript is a dynamically-typed language, and the web platform allows loading code, html, css, images, and other resources dynamically.
...And 3 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
optional tools you can optionally use any image editor to customize the images.
...lighter images are used when the mouse pointer is over the button.
... darker images are used when the button is pressed.
...And 2 more matches

XUL Structure - Archive of obsolete content
style sheets (css), images, and other technologies are used to control the presentation.
...the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file.
... skin - style sheets, images and other theme specific files style sheets describe details of the appearance of a window.
...And 2 more matches

Test Your Skills: Fundamental layout comprehension - Learn web development
project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below.
... basic setup you can download the html, css, and a set of six images here.
... save the html document and stylesheet into a directory on your computer, and add the images into a folder named images.
...And 2 more matches

HTML basics - Learn web development
for example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
...take the <img> element that we already have in our html page: <img src="images/firefox-icon.png" alt="my test image"> this contains two attributes, but there is no closing </img> tag and no inner content.
...let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype.
...And 2 more matches

Perceived performance - Learn web development
to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first.
... don't load images or scripts that aren’t used or visible on the initial page load.
...images and video should be served in the most optimal format, compressed, and in the correct size.
...And 2 more matches

Embedding API for Accessibility
e); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", true); accessibility prefs reference the following is a description of what accessibility prefs give us (or will give us), for accessibility: functionality implementation works as of images setintpref("network.image.imagebehavior", behavior); /* behavior: 0=accept, 1=accept images from originating server only, 2=no images */ moz 0.8 cookies setintpref("network.cookie.cookiebehavior", behavior); /* behavior: 0=accept, 1=accept cookies fr...
...abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 ...
... setcharpref("alert.audio.video_waiting", pathtosoundfile); setcharpref("alert.audio.audio_waiting", pathtosoundfile); setcharpref("alert.audio.timed_event_waiting", pathtosoundfile); /* these alerts will also be mirrored visually, either on the status bar or elsewhere */ no background images setboolpref("browser.accept.background_images", acceptbackgroundimages); no blinking text setboolpref("browser.blink_allowed", acceptblinktext); no animations setcharpref("image.animation_mode", animationmode); ...
...And 2 more matches

SVG Guidelines
pros and cons of svg for images when used as a document format there is usually a compelling reason that makes svg the only solution.
...however, this is not to say that it always does away with the need to have a collection of raster images for display at different scales.
...this flexibility depends on doing computations for svg images at the time they're displayed, rather than at the time the author creates them.
...And 2 more matches

IAccessibleImage
other-licenses/ia2/accessibleimage.idlnot scriptable this interface represents images and icons.
... 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is used for a representation of images like icons on buttons.
... method overview [propget] hresult description([out] bstr description ); [propget] hresult imageposition([in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); [propget] hresult imagesize([out] long height, [out] long width ); methods description() returns the localized description of the image.
...And 2 more matches

HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
...when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire.
... images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event.
...And 2 more matches

Using Service Workers - Web APIs
now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them?
...we could try to work around this using .complete, but it’s still not foolproof, and what about multiple images?
...it uses a promise-powered function to read image data from a json object and load the images using ajax, before displaying the images in a line down the page.
...And 2 more matches

ARIA: img role - Accessibility
these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
... <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
... you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it.
...And 2 more matches

image-set() - CSS: Cascading Style Sheets
resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.
... accessibility concerns browsers do not provide any special information on background images to assistive technology.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 specifications specification status comment css images module level 4the definition of 'the image-set() notation' in that specification.
...And 2 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image.
... browse websites that let you look at lots of existing color palettes and images to find inspiration.
...most browsers, by default, remove background images when printing documents.
...And 2 more matches

Content Security Policy (CSP) - HTTP
for example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint.
...there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.
...n origin (this excludes subdomains.) content-security-policy: default-src 'self' example 2 a web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the csp is set on.) content-security-policy: default-src 'self' *.trusted.com example 3 a web site administrator wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code.
...And 2 more matches

Handling media support issues in web content - Web media technologies
a similar concept can be applied to still images; if an image you wish to present is very large and may take time to download (especially for slower devices or connections), you can offer a lower-resolution or alternate version that will be displayed until the full-quality version is available to be displayed.
... poster frames for video progressive images images—whether embedded using <img> or <picture>—don't support a concept similar to poster frames.
...this requires creating your images using progressive formats, such as progressive jpeg or interlaced png.
...And 2 more matches

Web video codec guide - Web media technologies
ringing is another type of artifact that can make it particularly difficult to read text contained in your images.
... mosquito noise artifacts are most commonly found in mpeg video, but can occur whenever a discrete cosine transform (dct) algorithm is used; this includes, for example, jpeg still images.
... images from wikipedia there are two general types of motion compensation: global motion compensation and block motion compensation.
...And 2 more matches

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
...to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: img { max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded f...
... a new way of sizing images before loading completes recognizing the problem, a wicg community group formed to propose an intrinsicsize attribute.
...And 2 more matches

Lazy loading - Web Performance
a practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (js, css, images...) are downloaded only when the user navigates to that cart page.
... see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load.
... most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them.
...And 2 more matches

tabs - Archive of obsolete content
it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has entered "interactive", you can retrieve properties such as the document's url.
...at this point the document itself is fully loaded and parsed, but resources such as stylesheets and images may still be loading.
...at this point the document and its resources, such as images and stylesheets, have finished loading.
... this event can be used for pages that do not have a domcontentloaded event, like images.

widget - Archive of obsolete content
creation and content widgets can contain images or arbitrary web content.
...this may take one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget view is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget view has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

Creating a Skin for Mozilla - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
... contents getting started setup changing borders and colours changing images creating the install script in-depth system colours mozilla css commands how do i know what to modify?
... organizing images adding an image to the right of a toolbar jar file installer utility (provided by neil marshall) frequently asked questions links original document information author: neil marshall other contributors (suggestions/corrections): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright information: copyright 2002-2003 neil marshall, permission given to devmo to migrate into the wiki april 2005 via email.

ContextMenus - Archive of obsolete content
for example, right clicking on an image might display items pertaining to images, whereas clicking on a link would display items pertaining to links.
...the nsiimageloadingcontent interface is implemented by all types of images.
... this is useful instead of comparing the tag, as several different tags support images.
...the result is that context clicking on images will show a menu with three items, but will only show one item for other types of elements.

RDF Modifications - Archive of obsolete content
for instance, an assert call looks like the following: var source = rdf.getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.getresource("http://purl.org/dc/elements/1.1/description"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource.
... subject: http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg predicate: http://purl.org/dc/elements/1.1/description object: one of the thirty or so egyptian obelisks the template builder will be notified through the rdf observer mechanism of the change.
... (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks') next, the builder works its way backwards through the statements, in order to fill in the remaining variables.
...now, the potential result so far is: (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks', ?start = http://www.xulplanet.com/rdf/myphotos, ?title = 'obelisk') as you can see, the result looks to have all the information necessary to create a new item in the output.

Custom toolbar button - Archive of obsolete content
optional tools you can optionally use any image editor to customize the images.
...the images supplied here are 40 pixels wide and 48 pixels high, with a 256-colour palette and a transparent background, in png format.
... here are some more images that you can download and use: restart the application and customize the toolbar to find the new button.
... optionally change: the button image or images the extension icon, icon.png the version and home page in your install.rdf file use a jar tool or zip tool to pack the contents of the directory.

Creating a Skin - Archive of obsolete content
when you have lots of buttons, with states for hover, active and disabled, this saves space that would normally be occupied by mutliple images.
...if you look at this image (btn1.gif), you will notice that it contains a grid of smaller images, each one 16 by 16 pixels.
... #find-button { list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button.
...for example, having different images for the check boxes in the find files dialog as other windows looks a little odd.

Tiles and tilemaps overview - Game development
tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles.
... this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
... the tile atlas the most efficient way to store the tile images is in an atlas or spritesheet.
...the below images shows a tile atlas of 8 x 4 tiles: using an atlas also has the advantage of naturally assigning every tile an index.

Accessible multimedia - Learn web development
multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes).
...images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.
... simple images we already covered simple text alternatives for html images in our html: a good basis for accessibility article — you can refer back to there for the full details.
...if you haven't already, go and try out the assessments at test your skills: html images and test your skills: multimedia and embedding.

Styling lists - Learn web development
handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { l...
...this is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside.
... if we didn't do this, the background images would overlap with the list item text, which would look messy.
... background-repeat: by default, background images repeat until they fill up the available background space.

Graceful asynchronous programming with Promises - Learn web development
that means we want to run the promise.all() block when we get back usable blobs representing the images, and a usable text string.
... next, we call our function three times to begin the process of fetching and decoding the images and text and store each of the returned promises in a variable.
...here we use some fairly simple sync code to store the results in separate variables (creating object urls from the blobs), then display the images and text on the page.
... console.log(values); // store each value returned from the promises in separate variables; create object urls from the blobs let objecturl1 = url.createobjecturl(values[0]); let objecturl2 = url.createobjecturl(values[1]); let desctext = values[2]; // display the images in <img> elements let image1 = document.createelement('img'); let image2 = document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2; document.body.appendchild(image1); document.body.appendchild(image2); // display the text in a paragraph let para = document.createelement('p'); para.textcontent = desctext; document.body.appendchild(para); save and refresh and you should see your ui components all loaded, albeit in a not particularly attractive way!

Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... we have already taken a look at optimizing images.
... similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback.
... measuring performance multimedia: images multimedia: video javascript performance best practices.

Gecko's "Almost Standards" Mode
a common case that this affects is the layout of images inside table cells.
... this means that sliced-images-in-tables layouts are less likely to fall apart in gecko-based browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.
... (see the devedge article "images, tables, and mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the size of the line box (that is, their line-height is ignored) do not get a height (e.g., for their background) larger than that of their descendants, even if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
... also on mdc images, tables, and mysterious gaps mozilla's doctype sniffing mozilla's quirks mode original document information author(s): eric a.

Building the WebLock UI
the overlay section, where we discuss how to import scripts, images, and other resources from mozilla into your own ui, is by far the more complicated of the two.
...(note: we include three images to represent the state of the weblock, but wlock.gif and wl-lock.gif are identical, since weblock is presumed to be unlocked when it's loaded.
... this tutorial makes use of only two different states, but you can further customize the look of the weblock using the three images if you wish.) since the presentation of the weblock manager dialog itself doesn't require any special styles, these are all the rules you need in the weblock.css.
... image resources if you are following along with this tutorial and want to use the images we use here for the states of the weblock component in the statusbar, you can download them and the other resources for weblock from http://www.brownhen.com/weblock.

Accessibility documentation index - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
...these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
... 68 aria: listbox role aria, accessibility, needscontent the listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
... the two images below are from nasa research, specifically, from the article, "designing with blue" 84 accessibility documentation index accessibility, index this document provides a list of links to all accessibility articles on the mozilla developer network.

Text labels and names - Accessibility
the caption is in addition to any alternative text on images within the figure.
...do not use heading elements to mark up images or other graphical content.
... content with images must be labeled provide descriptive text for all contentful (that is, non-decorative) images and image-like elements.
... this includes svg images, <img>, <canvas>, <map>, and <area> elements, as well as <input> elements where type=image and <object> elements where the type starts with image/.

Border-image generator - CSS: Cascading Style Sheets
roperties['border6'] = { fill : false, slice_values : [42, 42, 42, 42], width_values : [42, 42, 42, 42], outset_values : [0, 0, 0, 0], slice_units : [0, 0, 0, 0], width_units : [0, 0, 0, 0], outset_units : [0, 0, 0, 0], repeat : [2, 2], size : [350, 350], preview_area : 500, }; var loadlocalimage = function loadlocalimage(source) { var location = "images/" + source; imgsource.src = location; }; var loadremoteimage = function loadremoteimage(source) { imgsource.src = source; if (selected) selected.removeattribute('selected'); tool.setoutputcss('source', 'url("' + source + '")'); }; var pickimage = function pickimage(e) { if (e.target.classname === 'image') { selected = e.target; selected.setattribute('selected'...
..., 'true'); loadremoteimage(e.target.src); imgstate = e.target.getattribute('data-stateid'); } }; var loadimagestate = function loadimagestate(stateid) { if (properties[stateid] === undefined) return; var prop = properties[stateid]; var topic; var unit_array; var value_array; for (var i in topics) { for (var j=0; j<4; j++) { topic = topics[i] + '-' + positions[j]; unit_array = topics[i] + '_units'; value_array = topics[i] + '_values'; inputslidermanager.setvalue(topic, prop[value_array][j]); dropdownmanager.setvalue(topic, prop[unit_array][j]); } } buttonmanager.setvalue('slice-fill', prop['fill']); dropdownmanager.setvalue('image-repeat-x', prop['repeat'][0]); dropdownmanager.setvalue('image-repeat-y', prop['re...
... inputslidermanager.setvalue('preview-height', prop['size'][1]); inputslidermanager.setvalue('preview-area-height', prop['preview_area']); }; var update = function update() { scale = math.min(300, (30000 / this.width) | 0); setscale(scale); inputslidermanager.setvalue('scale', scale, false); subject.style.backgroundimage = 'url("' + this.src + '")'; preview.style.borderimagesource = 'url("' + this.src + '")'; guidelines['slice-top'].setmax(this.height); guidelines['slice-right'].setmax(this.width); guidelines['slice-bottom'].setmax(this.height); guidelines['slice-left'].setmax(this.width); if (imgstate) loadimagestate(imgstate); }; var setscale = function setscale(value) { scale = value; var w = imgsource.width * scale / 100 | 0; var...
...'width' : null, 'outset' : null, 'repeat' : null }; var setborderslice = function setborderslice(positionid, value) { border_slice[positionid] = value + border_slice_units[positionid]; updateborderslice(); }; var updateborderslice = function updateborderslice() { var value = border_slice.join(' '); if (border_fill === true) value += ' fill'; preview.style.borderimageslice = value; setoutputcss('slice', value); }; var setborderfill = function setborderfill(value) { border_fill = value; var bimgslice = border_slice.join(' ');; if (value === true) bimgslice += ' fill'; preview.style.borderimageslice = bimgslice; }; var updateborderwidth = function updateborderwidth() { var value = border_width.join(' '); preview.style.borderima...

Overview of CSS Shapes - CSS: Cascading Style Sheets
shapes from images an interesting way to generate your path is to use an image with an alpha channel — the text will then wrap around the non-transparent parts of the image.
... note that images used in this way must be cors compatible, otherwise shape-outside will act as if none had been given as the value, and you will get no shape.
... we take a deeper look at creating shapes from images in the shapes from images guide.
... using generated content as the floated item in the examples above we have used images or a visible element to define the shape, meaning that you can see the shape on the page.

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property.
... this article describes how scaling of svg images is handled when using these properties.
... source image examples before diving in to look at the results of using different kinds of source images and seeing how they look when used with background-size, it would be helpful to look at a few example source images that have different dimensions and sizing settings.
... svg source scaling examples now let's see some examples of what happens as we apply different scaling to these images.

background-position - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or mo...
...] ]where <length-percentage> = <length> | <percentage> examples positioning background images each of these three examples uses the background property to create a yellow, rectangular element containing a star image.
...the third example illustrates how to specify positions for two different background images within one element.
...00px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* multiple background images: each image is matched with the corresponding position, from first specified to last.

color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
... exact the element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better.
... if the output device is a printer, and to save ink, dark or extremely dense background images might be removed.
... any options the user agent offers the user to allow them to control the use of color and images will take priority over the value of color-adjust.

conic-gradient() - CSS: Cascading Style Sheets
to use conic gradients to create pie charts --- which is not the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same.
... accessibility concerns browsers do not provide any special information on background images to assistive technology.
...while it is possible to create pie charts, checkerboards, and other effects with conic gradients, css images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users.
... specifications specification status comment css images module level 4the definition of 'conic-gradient()' in that specification.

mask-repeat - CSS: Cascading Style Sheets
the mask-repeat css property sets how mask images are repeated.
...; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...the first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
... round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added.

Video player styling basics - Developer guides
since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image.
... simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web.
... each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultant encoded strings are quite short.
... play/pause and mute now that the buttons actually look like buttons and have images that indicate what they do, some changes need to be made so that the "dual functionality" buttons (such as the play/pause button) are in the correct "state" and display the correct image.

Graphics on the Web - Developer guides
websites and applications often need to present graphics, such as images.
... static images can easily be displayed using the <img> element, or by setting the background of html elements using the background-image property.
... you can also construct graphics on-the-fly, or manipulate images after the fact.
...with vectors, you can create images that scale cleanly to any size.

HTML: Hypertext Markup Language
html uses "markup" to annotate text, images, and other content for display in a web browser.
... multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.
... advanced topics cors enabled image the crossorigin attribute, in combination with an appropriate cors header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.

SVG: Scalable Vector Graphics
as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil.
... svg images and their related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed.
... compared to classic bitmapped image formats such as jpeg or png, svg-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so.
...this allows developers to create rich animations and interactive images.

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
these are the current icon sets for firefox: windows mac os x (lion and above) mac os x linux (gnome) note: the images above are probably not distributable under the same cc license, unlike the rest of this material.
...on the other hand, it is often the case that there are multiple images and css sheets that are the same for all systems.
...if your file is getting too big, you should look into optimizing your images.

Adding menus and submenus - Archive of obsolete content
menus with images to add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image css property.
... images in menu items may not appear, showing only a narrow segment of the image instead.
... this seems to happen when remote images are used.

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
... the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb.
...it also eliminates most of the background colors and images to save on printer ink.

Defining Cross-Browser Tooltips - Archive of obsolete content
summary: authors are used to having alt text appear as a &quot;tooltip&quot; above images, but that's not how it was meant to be used.
... the problem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
... in other words, alt text should only be displayed when a user agent cannot display the primary content of the element (e.g., a text-mode browser that cannot display images).

Menu - Archive of obsolete content
for example, the items of the page's context menu change depending on what the user clicks: images have a context menu, links have a context menu, and so on.
... for example, jetpack.menu.context.page.on("a[href]") does not match images contained in links.
... criteria that can't be completely expressed via a css selector: jetpack.menu.context.page.beforeshow = function (menu, context) { menu.reset(); if (matchesmycriteria(context)) menu.add("match!"); }; add an item to both the hyperlink context menu and the image context menu: jetpack.menu.context.page.on("a, img").set("a link or image"); add an item to the image context menu, but only for images contained in hyperlinks: jetpack.menu.context.page.on("a > img").set("an image inside a link"); add a "recent tweets" submenu to the jetpack menu.

Bindings - Archive of obsolete content
<rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> dc:description="view from the top of the tower looking east of the doges palace"/> if you try a full example based on this data, you will notice that only one result has been generated.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?title = 'canal') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') the second triple will add a ?description for the first photo, adding a fourth variable-value pair to the existing data.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above', ?description = 'view from the top of the tower looking east of the doges palace') thus, only one match exists, so only one set of content is generated.

Multiple Queries - Archive of obsolete content
in fact, the content for this photo is that of the first query with the button, whereas the content for the other photos are that of the second query with the normal images.
...here are the results that would be generated by the first query above, before any bindings are applied: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, then, the builder adds the three results generated from the second query: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/n...
...deakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg) so four possible results are available, one from the first query and three from the second.

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
floating fish with the cards set up to float, the next step was to place the images appropriately.
...since all the fish images are 150 pixels wide, that's a good interval between image and text.
...therefore, i just added a half-em margins on card paragraphs, and then changed the left margin to be 160px, which makes sure the text in the paragraphs won't wrap under the floated images.

2D maze game with device orientation - Game development
there are also three folders in the directory: img: all the images that we will use in the game.
...we're loading two images first that will be used later in the preload state to show the progress of loading all the other assets.
... this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']); }, create: function() { this.game.state.start('mainmenu'); } }; there are single images, spritesheets and audio files loaded by the framework.

Visual JS GE - Game development
resource js objects used for adding images for animation purposes.
...you need to put your images in a folder, for example test_res/ , inside project_instance/res/.
... resource objects contain the path data for all your images.

Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
the html parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively.
... the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images.
... to make speculative loads of linked scripts, style sheets and images successful, avoid document.write.

Styling tables - Learn web development
to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer.
...yes, we could have put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

CSS building blocks - Learn web development
from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... images, media, and form elements in this lesson we will take a look at how certain special elements are treated in css.
... images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.

create fancy boxes - Learn web development
backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned.
... as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(175deg, rgba(0,0...
...background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.

How much does it cost to do something on the Web? - Learn web development
most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it.
... sites like pixabay provide images under cc0 license, so you can use, edit and publish them even with modification for commercial use.
... isp access make sure that you have sufficient bandwidth: low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some css and javascript.

JavaScript basics - Learn web development
adding an image changer in this section, you will learn how to use javascript and dom api features to alternate the display of one of two images.
... save this image in your images folder.
...javascript from the earlier exercise.) let myimage = document.queryselector('img'); myimage.onclick = function() { let mysrc = myimage.getattribute('src'); if(mysrc === 'images/firefox-icon.png') { myimage.setattribute('src','images/firefox2.png'); } else { myimage.setattribute('src','images/firefox-icon.png'); } } save all files and load index.html in the browser.

Add a hitmap on top of an image - Learn web development
prerequisites: you should already know how to create a basic html document and how to add accessible images to a webpage.
...try turning images off.
...alternatively, dudley storey demonstrates a way to use svg for an image map effect, along with a subsequent combined svg-raster hack for bitmap images.

Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html documents!
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html.
... video and audio on the web web developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content.

HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... measuring performance multimedia: images multimedia: video javascript performance best practices.
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...

JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance.
... similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary.
... measuring performance multimedia: images multimedia: video javascript performance best practices.

Software accessibility: Where are we today?
these applications assumed that computer users could: read and react to text and images displayed on the screen.
...screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast.
...when the user types something on the keyboard, or when an application displays text or images on the screen, the exact meaning of these actions is determined by the context in which they take place.

Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes.
...this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip.
... space bar toggles checkboxes the enter key should activate an item if double clicking would do so msaa support, including accessible selection, exposing current level and position in list, alternative text for informative or interactive images, selectable, multiselectable and extselectable states, statechange events for expanding/collapsing and toggling of checkbox children.

Lightweight themes
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
... online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser.
... submitting your theme image to get started submitting your images, go to the theme submission page: name your theme — pick a unique name for your theme.

Firefox UI considerations for web developers
firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes.
... usa today the only icon provided by usa today is its classic favicon: <link rel="shortcut icon" href="https://www.gannett-cdn.com/sites/usatoday/images/favicon.png"> since no rich icon is available, firefox creates a screenshot of the home page rendered 560 pixels wide.
... hootsuite the html on hootsuite's site looks roughly like this: <link rel="shortcut icon" href="/dist/images/icons/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="/dist/images/icons/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/dist/images/icons/apple-touch-icon_72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/dist/images/icons/apple-touch-icon@2x.png"> firefox starts by looking for an svg icon; there is none.

JavaScript-DOM Prototypes in Mozilla
var obj = document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's prototype (obj.__proto__) that xpconnect sets up when exposing the first image in document to javascript.
...as an example: function bar() { alert("hello world!"); } document.images[0].__proto__.foo = bar; this would make every image in this document have a callable foo property (i.e.
... a third way through which one can access the prototype of an object is through the constructor property of the object, which itself points (initially) to the constructor: document.images[0].constructor.prototype.foo = bar; note though, the above may or may not work in mozilla.

Using the viewport meta tag to control layout on mobile browsers
their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
... to get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using css or viewport properties.
... for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly.

Mozilla Web Developer FAQ
the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way.
... in the css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers.
... these aspects of the layout can be changed by explicitly setting the display css property of the images (and possible surrounding <a> elements) to block.

Mozilla Quirks Mode Behavior
prior to gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other browser (bug 783213).
... images (img elements) without alt attributes sometimes display placeholder icons in quirks mode.
... there are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.

imgIRequest
imagestatus unsigned long status flags of the status_* variety.
... cors_none 1 cors modes images can be loaded with.
... by default, all images are loaded with cors_none and cannot be used cross-origin in context like webgl.

mozIColorAnalyzer
this is intended to be used on favicon images.
... larger images take longer to process, especially those with a larger number of unique colors.
... remarks below are some images with the result of findrepresentativecolor: image representative color 0xb28d3a 0x502e1e 0x53ba3f 0x00a400 see also mozirepresentativecolorcallback bug 634139 ...

nsIAccessibleImage
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getimageposition(in unsigned long coordtype, out long x, out long y); void getimagesize(out long width, out long height); methods getimageposition() returns the coordinates of the image accessible.
... getimagesize() returns the size of the image accessible.
...void getimagesize( out long width, out long height ); parameters width the width of the image accessible.

nsIMsgCustomColumnHandler
you must implement: nsitreeview.iseditable() nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler.
...n that does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { }, getcelltext: function(arow, acol) { }, getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcolumnhandler() method: var handler = gdbview.getcolumnhandler(...
...getimagesrc is used to determine what to display.

nsITreeView
fer); astring getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getimagesrc(in long row, in nsitreecolumn col); long getlevel(in long index); long getparentindex(in long rowindex); long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in...
... getimagesrc() the image path for a given cell.
... astring getimagesrc( in long row, in nsitreecolumn col ); parameters row the index of the row.

Creating a Custom Column
from nsitreeview: getcellproperties(row, col, props): optionally modify the props array getrowproperties(row, props): optionally modify the props array getimagesrc(row, col): return a string (or null) getcelltext(row, col): return a string representing the actual text to display in the column from nsimsgcustomcolumnhandler: getsortstringforrow(hdr): return the string value that the column will be sorted by getsortlongforrow(hdr): return the long value that the column will be sorted by isstring(): return true / false warning!
... the message's header so that we can extract the reply to field var hdr = gdbview.getmsghdrat(row); return hdr.getstringproperty("replyto"); }, getsortstringforrow: function(hdr) {return hdr.getstringproperty("replyto");}, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getrowproperties: function(row, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } basically, all we are doing here is making sure that both the text that is displayed to the user (getcelltext()) and the string we sort according to (when the user decided to sort the view by our custom column) are identical.
... don't forget that columns aren't restricted to text - they can also load images (via getimagesrc()) so that your extension can display a new visual cue to the user.

Plug-in Basics - Plugins
embedded plug-ins are commonly used for multimedia images relating to text in the page, such as the adobe flash plug-in.
...it embeds a variety of object types in an html page, including plug-ins, java components, activex controls, applets, and images.
...plug-ins are embedded in much the same way as gif or jpeg images are, except that a plug-in can be live and respond to user events, such as mouse clicks.

Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
...by positioning some decorative generated content with ::before, or including background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; what makes the css painting api so interesting and powerful is that you can create complex images, passing variables, that automatically resize.
... you could try making the background images above without the css paint api.

Applying styles and colors - Web APIs
in the images below, the grid represents the canvas coordinate grid.
... screenshotlive sample patterns in one of the examples on the previous page, we used a series of loops to create a pattern of images.
...image is a canvasimagesource (that is, an htmlimageelement, another canvas, a <video> element, or the like.

HTMLImageElement.complete - Web APIs
examples consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image.
... these photos may be very large, so you don't want to wait for them to load, so your code uses async/await to load the images in the background.
...i on iossamsung internetcompletechrome full support 1edge full support 12firefox full support yesie full support 8notes full support 8notes notes ie reports false for broken images.opera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support yesopera android ?

HTMLImageElement.srcset - Web APIs
the srcset property, along with the sizes property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation.
...all of the following are valid image candidate strings: "images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w" this string provides versions of an image to be used at the standard pixel density (1x) as well as double that pixel density (2x).
... for additional examples, see our guide to responsive images.

HTMLImageElement - Web APIs
this specifies a list of candidate images, separated by commas (',', u+002c comma).
...this is obsolete; you should instead use css (such as text-align, which works with images despite its name) to specify the alignment.
... example var img1 = new image(); // image constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendchild(img1); var img2 = document.createelement('img'); // use dom htmlimageelement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendchild(img2); // using first image in the document alert(document.images[0].src); specifications specification status comment css object model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification.

Recommended Drag Types - Web APIs
dragging images direct image dragging is not common.
...instead, images are usually dragged only by their urls.
...as some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.

WebGL constants - Web APIs
useful for rendering hidden-line images, decals, and or solids with highlighted edges.
... generate_mipmap_hint 0x8192 hint for the quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().
... constant name value description read_buffer 0x0c02 unpack_row_length 0x0cf2 unpack_skip_rows 0x0cf3 unpack_skip_pixels 0x0cf4 pack_row_length 0x0d02 pack_skip_rows 0x0d03 pack_skip_pixels 0x0d04 texture_binding_3d 0x806a unpack_skip_images 0x806d unpack_image_height 0x806e max_3d_texture_size 0x8073 max_elements_vertices 0x80e8 max_elements_indices 0x80e9 max_texture_lod_bias 0x84fd max_fragment_uniform_components 0x8b49 max_vertex_uniform_components 0x8b4a max_array_texture_layers 0x88ff ...

Using textures in WebGL - Web APIs
// function loadtexture(gl, url) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because images have to be download over the internet // they might take a moment until they are ready.
... gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); const image = new image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, image); // webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions.
... see this hacks.mozilla.org article for an explanation of how to use cors-approved images as webgl textures, with a self-contained example.

Rendering and the WebXR frame animation callback - Web APIs
60 fps is already beyond the point at which most people can easily detect that the animation isn't simply a series of still images going by really fast.
...the more of these we simulate—and the more accurately we do so—the better able we are to trick the human brain into perceiving our images in 3d.
...these two images are focused onto the retinas and the resulting signal transmitted over the optic nerves to the brain's visual cortex, located at the back of the occipital lobe.

WAI-ARIA Roles - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells.
...these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.aria: list rolethe aria list role can be used to identify a list of items.
... it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.aria: listbox rolethe listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.aria: listitem rolethe aria listitem role can be used to identify an item inside a list of items.

-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
... round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added.
...erepeatapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -webkit-mask-image: url('mask1.png'), url('mask2.png'); -webkit-mask-repeat-x: repeat, space; } each image is matched with the corresponding repeat style, from first specified to last.

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the first and last images are pinned to the top and bottom edge of the element, and whitespace is distributed evenly between the images.
... round as the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added.
...puted valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -webkit-mask-image: url('mask1.png'), url('mask2.png'); -webkit-mask-repeat-y: repeat, space; } each image is matched with the corresponding repeat style, from first specified to last.

-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of background colors and images in browsers based on the webkit engine.
... background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
... exact background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.

:-moz-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet.
... note that images that are in the process of loading are not matched by this pseudo-class.
... syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) center no-repeat; } specifications not part of any standard.

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
these styles can also decorate borders with lines or images, and make them square or rounded.
... scaling background images describes how to change the size and repeating behavior of background images.
... border-image generator this interactive tool lets you visually create border images (the border-image property).

Using URL values for the cursor property - CSS: Cascading Style Sheets
this allows specifying arbitrary images as mouse cursors — any image format supported by gecko can be used.
...images.
...larger cursor images are ignored.

Shorthand properties - CSS: Cascading Style Sheets
therefore: background-color: red; background: url(images/bg.gif) no-repeat left top; will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
... background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: left top; ...
... can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties.

<blend-mode> - CSS: Cascading Style Sheets
the effect is like two images printed on transparent film overlapping.
... the effect is like two images shone onto a projection screen.
... examples blend mode comparison in the following example, we have a <div> with two background images set on it — a firefox logo on top of a linear gradient.

border-image-slice - CSS: Cascading Style Sheets
values <number> represents an edge offset in pixels for raster images and coordinates for vector images.
... for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
...ut'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.

cursor - CSS: Cascading Style Sheets
the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).
... for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
...cursor changes using images which are outside the size range supported by the browser will generally just be ignored.

repeating-conic-gradient() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.
...while it is possible to create pie charts, checkerboards, and other effects with conic gradients, css images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users.
... specifications specification status comment css images module level 4the definition of 'repeating-conic-gradient()' in that specification.

A hybrid approach - Developer guides
for example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway.
...but even if it does not work, it is no worse with respect to performance than only using fluid images.
... future plans include exploring serving images based on user-agent.

HTML documentation index - HTML: Hypertext Markup Language
2 allowing cross-origin use of images and canvas advanced, cors, canvas, html, image, reference, security, storage, data html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... 117 <img>: the image embed element content, element, graphics, html, html graphics, html images, html photos, html pictures, html embedded content, image, image element, media, multimedia, photos, pictures, reference, web the html <img> element embeds an image into the document.
... 175 <picture>: the picture element element, graphics, html, html embedded content, images, reference, web, webp, picture the html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

Preloading content with rel="preload" - HTML: Hypertext Markup Language
for example: resources that are pointed to from inside css, like fonts or images.
... larger images and video files.
... this doesn't have to be limited to images, or even files of the same type — think big!

Compression in HTTP - HTTP
for images, gif or png are using loss-less compression.
...for images, an image generated by a tool could be not optimized enough for the web; it is recommended to use tools that will compress as much as possible with the required quality.
... as compression brings significant performance improvements, it is recommended to activate it for all files, but already compressed ones like images, audio files and videos.

Feature-Policy - HTTP
legacy-image-formats controls whether the current document is allowed to display images in legacy formats.
... oversized-images controls whether the current document is allowed to download and display large images.
... web-share controls whether or not the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice, e.g.

An overview of HTTP - HTTP
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.
...due to its extensibility, it is used to not only fetch hypertext documents, but also images and videos or to post content to servers, like with html form results.
...it then parses this file, making additional requests corresponding to execution scripts, layout information (css) to display, and sub-resources contained within the page (usually images and videos).

Redirections in HTTP - HTTP
obviously, this method only works with html, and cannot be used for images or other types of content.
...rvername example.com redirect / https://www.example.com </virtualhost> the url https://example.com/ will be redirected to https://www.example.com/, as will any files or directories under it (https://example.com/some-page will be redirected to https://www.example.com/some-page) redirectmatch does the same, but takes a regular expression to define a collection of affected urls: redirectmatch ^/images/(.*)$ https://images.example.com/$1 all documents in the images/ directory will redirect to a different domain.
... nginx in nginx, you create a specific server block for the content you want to redirect: server { listen 80; server_name example.com; return 301 $scheme://www.example.com$request_uri; } to apply a redirect to a directory or only certain pages, use the rewrite directive: rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; iis in iis, you use the <httpredirect> element to configure redirections.

Web Performance
multimedia: images and video the lowest hanging fruit of web performance is often media optimization.
... alternative media formats when it comes to images and videos, there are more formats than you're likely aware of.
...lazy loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed.

SVG as an Image - SVG: Scalable Vector Graphics
svg images can be used as an image format, in a number of contexts.
... many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
...images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris.

Other content in SVG - SVG: Scalable Vector Graphics
« previousnext » apart from graphic primitives like rectangles and circles, svg offers a set of elements to embed other types of content in images as well.
... embedding raster images much like the img element in html svg has an image element to serve the same purpose.
... you can use it to embed arbitrary raster (and vector) images.

Mixed content - Web security
the attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website.
... if the attacker observes http requests to certain images, they could determine which webpage the user is visiting.
...some common examples of mixed content include javascript files, stylesheets, images, videos, and other media.

Loading Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
... "end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.

Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
... "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.

context-menu - Archive of obsolete content
for example, this item appears whenever the context menu is invoked on a page that contains at least one image: require("sdk/context-menu").item({ label: "this page has images", contentscript: 'self.on("context", function (node) {' + ' return !!document.queryselector("img");' + '});' }); note that the listener function has a parameter called node.
...require("sdk/context-menu"); cm.item({ label: "edit mozilla image", context: [ cm.urlcontext(["*.mozilla.org", "*.mozilla.com"]), cm.selectorcontext("img") ], contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + '});', onmessage: function (imgsrc) { openimageeditor(imgsrc); } }); show an "edit page images" item when the page contains at least one image: var cm = require("sdk/context-menu"); cm.item({ label: "edit page images", // this ensures the item only appears during the page context.

page-mod - Archive of obsolete content
name: contentscriptwhen type: string by default, content scripts are attached after all the content (dom, js, css, images) for the document has been loaded, at the time the window.onload event fires.
...e option takes a single string that may take any one of the following values: "start": load content scripts immediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");', contentscriptwhen: "start" }); if you specify "start" for contentscriptwhen, your scripts will not be able to interact with the document's dom right away (although they could listen for window.onlo...

page-worker - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

panel - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under addon.options property.

content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

Examples and demos from articles - Archive of obsolete content
.[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
... .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.

HTML to DOM - Archive of obsolete content
efox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.h...
...e" height="0"> <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/> </vbox> then, in your extension's "load" event handler: onload: function() { donkeybrowser = document.getelementbyid("donkey-browser"); if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the ifr...

How to convert an overlay extension to restartless - Archive of obsolete content
ndow(unloadfromwindow); services.wm.removelistener(windowlistener); mymodule.shutdown(); // do whatever shutdown stuff you need to do on addon disable components.utils.unload("chrome://myaddon/content/mymodule.jsm"); // same url as above // hack warning: the addon manager does not properly clear all addon related caches on update; // in order to fully update images and locales, their caches need clearing here services.obs.notifyobservers(null, "chrome-flush-caches", null); } function install(data,reason) { } function uninstall(data,reason) { } function loadintowindow(window) { /* call/move your ui construction function here */ } function unloadfromwindow(window) { /* call/move your ui tear down function here */ } function foreachopenwindow(todo) // app...
...as mentioned in the previous section, you'll need to clear the chrome caches on add-on shutdown, namely for chrome images and properties files.

The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
...a common exception to this rule is when your css is directly related to images, where you'll usually handle measurements in pixels (px).

Signing an XPI - Archive of obsolete content
i have hi-resolution scanned images of my passport and drivers license for these situations so i placed them on my web-server temporarily in a hidden location and emailed unizeto certum with the details and location of the files.
... within a few hours i received a confirmation email from a human accepting the id images and giving me a hyperlink to the certifcate download area.

Source code directories overview - Archive of obsolete content
it can be used to draw rectangles, lines, images, etc.
... ipc contains jpeg contains c code for reading/writing jpeg images.

Getting Started - Archive of obsolete content
(yes, this means that the structure of your new directory and classic.jar will be slightly different.) creating the install files icon.png and preview.png these are some png images containing the icon and the preview of the theme.
...css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.

Mozilla Application Framework in Detail - Archive of obsolete content
themes are simply collections of images and css which can augment or replace your current ui elements.
...you could easily create xml elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic.

Menus - Archive of obsolete content
ntab opens a link in a new tab links context-bookmarklink bookmarks a link links context-savelink saves a link links context-sendlink sends a link in an email links context-copyemail copies an email address mailto: links context-copylink copies a link links context-viewimage views an image at full size images context-copyimage-contents copies an image to the clipboard images context-copyimage copies the url of an image to the clipboard images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop background images context-blo...
...ckimage blocks an image images context-back goes back a page context-forward goes forward a page context-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete deletes selection editable text ...

Multiple Rule Example - Archive of obsolete content
the resulting data will be: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = palace from above ?description = view from the top of the tower looking east of the doges palace, ?date = 2005-04-30t14:55:00+01.00) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?phototitle = palace from above) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/i...
...mages/t/canal.jpg, ?phototitle = canal) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?phototitle = obelisk) the first result matches the first rule and contains variables for the two additional predicates that were examined in the conditions.

Complete - Archive of obsolete content
in this extension, the only things that depend on the theme are the icon images on the buttons and the css style rules.
...the allcustom directory contains the icon images and the css stylesheet.

Adding Buttons - Archive of obsolete content
syntax of buttons the button tag has the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with.
... in the next section, we will find out how to add labels and images to a xul window.

Custom Tree Views - Archive of obsolete content
rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; the functions in the example not described above do not need to perform any action, but they must be implemented as the tree calls them to gather additional information.
...rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" la...

Introduction - Archive of obsolete content
for extensions, the xul files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user.
...in addition, you may have extra files for images or for platform specific data.

Writing Skinnable XUL and CSS - Archive of obsolete content
each package has its own skin, css files and images that determine the appearance of that package.
...note that some particularly evil people put images chrome urls in dtds.

Accessibility/XUL Accessibility Reference - Archive of obsolete content
button <button label="<!--button text-->" /> <button id="butwrap1"> <label control="butwrap1"> <!--wrapped label--> </label> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with html, the type="content" attribute should be specified.
... image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" i...

image - Archive of obsolete content
note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth.
...this would be useful if the images are stored remotely or you plan on swapping the image frequently.

Windows and menus in XULRunner - Archive of obsolete content
we can add images to the toolbar buttons through the css file.
... we could hard-code the images in the xul file itself, but css is a better practice.

Archived Mozilla and build documentation - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.

Extentsions FAQ - Archive of obsolete content
could there be more than two images to reflect more than two states?does the rules in the css file have to be in any particular order (if two rules match, which is chosen)?
... i have two states switching images in the tool bar and would have no problem implementing a third, so yes it's possible.

Creating a Skin for Firefox - Archive of obsolete content
introduction in order to create a skin for firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify css.
... firefox uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.

Theme changes in Firefox 3 - Archive of obsolete content
the rule that's needed to show and hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://global/skin/icons/information-16.png used when presenting information notices.
... images to remove the following images were removed: chrome://mozapps/skin/extensions/question.png no longer used.

Browser Detection and Cross Browser Support - Archive of obsolete content
an example of this approach involved testing for the existence of the document.images object.
...the classic example is: if (document.images) { // code which processes the images } the advantage to feature detection is that it will work regardless of the vendor/version.

Browser Feature Detection - Archive of obsolete content
true true document.createattribute() true true true document.getelementsbytagname() true true true document.title true true true document.referrer true true true document.domain true true true document.url true true true document.body true true true document.images true true true document.applets true true true document.links true true true document.forms true true true document.anchors true true true document.cookie true true true document.open() true true true document.close() true true true document.write() tr...
...me: 'createtextnode', 'supported': false}, {name: 'createcomment', 'supported': false}, {name: 'createattribute', 'supported': false}, {name: 'getelementsbytagname', 'supported': false}, {name: 'title', 'supported': false}, {name: 'referrer', 'supported': false}, {name: 'domain', 'supported': false}, {name: 'url', 'supported': false}, {name: 'body', 'supported': false}, {name: 'images', 'supported': false}, {name: 'applets', 'supported': false}, {name: 'links', 'supported': false}, {name: 'forms', 'supported': false}, {name: 'anchors', 'supported': false}, {name: 'cookie', 'supported': false}, {name: 'open', 'supported': false}, {name: 'close', 'supported': false}, {name: 'write', 'supported': false}, {name: 'writeln', 'supported': false}, {name: 'getelemen...

XForms Custom Controls - Archive of obsolete content
for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the current default behavior).
... node bound to this control --> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> </bindings> <xf:model> <xf:instance xmlns=""> <data> <curimg></curimg> <img label="firefox">http://www.mozilla.com/images/firefox-logo-64x64.png</img> <img label="thunderbird">http://www.mozilla.com/images/thunderbird-logo-64x64.png</img> <img label="bugzilla">http://www.mozilla.org/images/p-bugz.gif</img> <img label="mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img> </data> </xf:instance> </xf:model> <style type="text/css"> @namespace xf url(http://www.w3.org/2002/xforms)...

Index - Game development
35 tiles and tilemaps overview 2d, canvas, games, javascript, static, webgl, tilemap, tiles tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles.
... this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.

Explaining basic 3D theory - Game development
rendering pipeline the rendering pipeline is the process by which images are prepared and output onto the screen.
... textures textures are 2d images used in the 3d space to make the objects look better and more realistic.

WebVR — Virtual Reality for the Web - Game development
using the webvr api the webvr api is based on two concepts — sending stereoscopic images to both lenses in your headset and receiving positional data for your head from the sensor, and those two are handled by hmdvrdevice (head-mounted display virtual reality device) and positionsensorvrdevice.
...it's not easy to achieve, but it doesn't require realistic images.

Crisp pixel art look with image-rendering - Game development
original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time.
... also, some game techniques require algorithms that analyse images, which also benefit from working with smaller images.

Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
... the tile atlas a tilemap might use one or several atlases — or spritesheets — that contain all of the tile images.

Visual-js game engine - Game development
add->new game object (form dialog for define type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.
... features : tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods).

Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
2g 1400ms 70 kbps the network is suited for transfers of small images.
... 3g 270ms 700 kbps the network is suited for transfers of large assets such as high resolution images, audio, and sd video.

CSS and JavaScript accessibility best practices - Learn web development
simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions.
...alt text for images.

Organizing your CSS - Learn web development
the differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.
... previous overview: building blocks in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

CSS values and units - Learn web development
images the <image> data type is used wherever an image is a valid value.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps.

Using CSS generated content - Learn web development
you modify your stylesheet to add text content or images.
... this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures.

How do you make sure your website works properly? - Learn web development
you might be surprised at how many problems come up: images don't show up, pages don't load or load slowly, and so on.
...that doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

What is the difference between webpage, website, web server, and search engine? - Learn web development
a web page can embed a variety of different types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos.
... note: browsers can also display other documents such as pdf files or images, but the term web page specifically refers to html documents.

What is a web server? - Learn web development
(for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web.
... hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images, css stylesheets, javascript files, fonts, and video.

CSS basics - Learn web development
how do i decorate my webpage with background images and colors?
...in contrast, images are inline elements.

What will your website look like? - Learn web development
images to choose an image, go to google images and search for something suitable.
... note that most images on the web, including in google images, are copyrighted.

Getting started with the Web - Learn web development
do i have images inserted on my page?
...what background images and colors should be used to decorate your website?

Use HTML to solve common problems - Learn web development
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add image...
... advanced images & multimedia how to add a responsive image to a webpage how to add vector image to a webpage how to add a hit map on top of an image internationalization html is not monolingual.

Creating hyperlinks - Learn web development
note: a url can point to html files, text files, images, text documents, video and audio files, or anything else that lives on the web.
... <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article.

Structuring the web with HTML - Learn web development
multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... solving common html problems use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

Choosing the right approach - Learn web development
on what type of file is being fetched, use the relevant function to decode its contents if(type === 'blob') { return response.blob(); } else if(type === 'text') { return response.text(); } }) .catch(e => { console.log(`there has been a problem with your fetch operation for resource "${url}": ` + e.message); }); } // call the fetchanddecode() method to fetch the images and the text, and store their promises in variables let coffee = fetchanddecode('coffee.jpg', 'blob'); let tea = fetchanddecode('tea.jpg', 'blob'); let description = fetchanddecode('description.txt', 'text'); // use promise.all() to run code only when all three function calls have resolved promise.all([coffee, tea, description]).then(values => { console.log(values); // store each value retur...
...ned from the promises in separate variables; create object urls from the blobs let objecturl1 = url.createobjecturl(values[0]); let objecturl2 = url.createobjecturl(values[1]); let desctext = values[2]; // display the images in <img> elements let image1 = document.createelement('img'); let image2 = document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2; document.body.appendchild(image1); document.body.appendchild(image2); // display the text in a paragraph let para = document.createelement('p'); para.textcontent = desctext; document.body.appendchild(para); }); pitfalls if a promise.all() rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at al...

What is JavaScript? - Learn web development
html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
... javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

The "why" of web performance - Learn web development
building websites requires html, css, and javascript, typically including binary file types such as images and video.
... measuring performance multimedia: images multimedia: video javascript performance best practices.

Web performance - Learn web development
multimedia: images the lowest hanging fruit of web performance is often media optimization.
...in this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.

Introduction to the server side - Learn web development
requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: css, javascript, images, pre-created pdf files etc).
...pdfs, images, etc.).

Handling common HTML and CSS problems - Learn web development
resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem.
... in addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated.

Command line crash course - Learn web development
the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name.
... example, if you wanted to go to a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css, html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.

Mozilla's Section 508 Compliance
(e) when bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.
...mozilla's preferences under privacy & security - images contain options for making animated images still.

Chrome registration
the providers work together to supply a complete set of chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, content, and appearance of the window itself.
...typically a skin provider will provide css files and images.

WebRequest.jsm
.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("http://example.org/*"); webrequest.onbeforerequest.addlistener(cancelrequest, {urls: pattern}, ["blocking"]); function cancelrequest(e) { console.log("canceling: " + e.url); return {cancel: true}; } this code cancels requests for images that are made to urls under "https://mdn.mozillademos.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https://mdn.mozillademos.org/*"); webrequest.onbeforerequest.addlistener(cancelimages, { urls:...
... pattern, types: ["image"] }, ["blocking"]); function cancelimages(e) { console.log("canceling: " + e.url); return {cancel: true}; } redirecting this code replaces, by redirection, all network requests for images that are made to urls under "https://mdn.mozillademos.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https://mdn.mozillademos.org/*"); webrequest.onbeforesendheaders.addlistener(redirect, { urls: pattern, types...

about:memory
m/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────5.82 mb (03.03%) ++ workers/workers(chrome) ├────5.36 mb (02.80%) ++ (16 tiny) ├────4.07 mb (02.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.16 mb (01.12%) ++ xpconnect some expertise is required to understand the full details here, but there are various things worth pointing out.
... there are measurements for other content such as images and workers, and for browser subsystems such as the startup cache and xpconnect.

Using the clipboard
for other types of data, such as urls or images, you will need to use a more complex method.
...this is needed because you can put anything on the clipboard from text to images.

XPCOM category image-sniffing-services
however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.
... in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content.

Mozilla technologies
accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images.
... apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell.

Index - Firefox Developer Tools
72 view background images in the rules view, you can see a preview of images specified using background-image.
... 88 frame rate frame rate is the rate at which a video device can produce images (or frames).

Taking screenshots - Firefox Developer Tools
values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images.
... so if you’re using the up-arrow history scroll to capture images in quick succession, be careful — you need to remember to change the filename for each new capture.

Console messages - Firefox Developer Tools
blocked loading mixed display content the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
... loading mixed (insecure) display content on a secure page the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.

Optimizing canvas - Web APIs
don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage().
...r" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas.

Canvas tutorial - Web APIs
the images on this page show examples of <canvas> implementations which will be created in this tutorial.
... in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformations compositing and clipping basic animations advanced animations pixel manipulation hit regions and accessibility optimizing the canvas finale ...

Clipboard.write() - Web APIs
the clipboard method write() writes arbitrary data, such as images, to the clipboard.
...for copying images to the clipboard).

Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... // but sub-resources such as images, stylesheets and frames are still loading.

Document - Web APIs
document.imagesread only returns a list of the images in the current document.
... load & unload events domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i...
...+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gi...

File.type - Web APIs
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
...moreover, file.type is generally reliable only for common file types like images, html documents, audio and video.

HTMLCanvasElement.toDataURL() - Web APIs
0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
...ample): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offsetheight; ocan...

HTMLImageElement.align - Web APIs
you should instead use the css propertiy vertical-align, which does in fact also work on images despite its name.
... floating images horizontally the left and right properties don't affect the baseline-relative alignment.

HTMLImageElement.sizes - Web APIs
this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions.
... how exactly the images are used may depend upon the browser and what the pixel density of the user's display is.

HTMLImageElement.src - Web APIs
syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.

HTMLSourceElement - Web APIs
htmlsourceelement.srcset is a domstring reflecting the srcset html attribute, containing a list of candidate images, separated by a comma (',', u+002c comma).
... a candidate image is a url followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.

The HTML DOM API - Web APIs
interacting with the contents of 2d images and the context of an html <canvas>, for example to draw on top of them.
... access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc.

ImageCapture - Web APIs
the imagecapture interface of the mediastream image capture api provides methods to enable the capture of images or photos from a camera or other photographic device.
... it provides an interface for capturing images from a photographic device referenced through a valid mediastreamtrack.

MediaImage - Web APIs
the media session api's mediaimage dictionary describes the images associated with the media resource mediametadata.
...note that it is just a hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type.

MediaStream Image Capture API - Web APIs
the mediastream image capture api is an api for capturing images or videos from a photographic device.
... let imagecapture = new imagecapture(track); interfaces imagecapture an interface for capturing images from a photographic device referenced through a valid mediastreamtrack.

WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.
...possible values: gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 gl.compressed_rgba8_etc2_eac gl.compressed_srgb8_etc2 gl.compressed_srgb8_alpha8_etc2_eac gl.compressed_rgb8_punchthrough_alpha1_etc2 gl.compressed_srgb8_punchthrough_alpha1_etc2 imagesize a glint specifying the number of bytes to read from the buffer bound to gl.pixel_unpack_buffer.

WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
pixels); // additionally available in webgl 2: // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage2d(target, level, internalformat, width, height, border, glsizei imagesize, glintptr offset); void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, glsizei imagesize, glintptr offset); void gl.co...
... imagesize a glsizei specifying the number of bytes to read from the buffer bound to gl.pixel_unpack_buffer.

WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
pixels); // additionally available in webgl 2: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, imagesize, offset); void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active compressed texture.
...ssed_rgba_bptc_unorm_ext ext.compressed_srgb_alpha_bptc_unorm_ext ext.compressed_rgb_bptc_signed_float_ext ext.compressed_rgb_bptc_unsigned_float_ext when using the ext_texture_compression_rgtc extension: ext.compressed_red_rgtc1_ext ext.compressed_signed_red_rgtc1_ext ext.compressed_red_green_rgtc2_ext ext.compressed_signed_red_green_rgtc2_ext imagesize a glsizei specifying the number of bytes to read from the buffer bound to gl.pixel_unpack_buffer.

WebGLRenderingContext.hint() - Web APIs
possible values: gl.generate_mipmap_hint: quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().
... examples the following example hints that the quality of filtering when generating mipmap images should be most efficient instead of best quality.

WebGL best practices - Web APIs
another important method for batching is texture atlasing, where multiple images are placed into a single texture, often like a checkerboard.
... it's quicker to sample from smaller texture images due to better inherent texture fetch cache locality: zooming out on a non-mipmapped texture ruins texture fetch cache locality, because neighboring pixels no longer sample from neighboring texels!

Starting up and shutting down a WebXR session - Web APIs
there are three options: immersive-vr a fully-immersive virtual reality session using a headset or similar device that fully replaces the world around the user with the images you present.
... immersive-ar an augmented reality session in which images are added to the real world using a headset or similar apparatus.

Window - Web APIs
domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... load fired when the whole page has loaded, including all dependent resources such as stylesheets images.

ARIA: figure role - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
... description any content that should be grouped together and consumed as a figure (which could include images, video, audio, code snippets, or other content) can be identified as a figure using role="figure".

ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
...unlike <select>, a listbox can contain images.

-webkit-mask-composite - CSS: Cascading Style Sheets
the -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another.
... mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.

@counter-style - CSS: Cascading Style Sheets
symbols can contain string, images or custom identifiers.
... the below @counter-style rule uses images instead of character symbols.

Color picker tool - CSS: Cascading Style Sheets
lette .controls > * { float: left; } #color-palette .controls > *:hover { cursor: pointer; } #color-palette .controls .lock { width: 24px; height: 24px; margin: 10px; padding: 3px; background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); background-repeat: no-repeat; background-position: bottom right; } #color-palette .controls .lock:hover { /*background-image: url('images/unlocked-hover.png');*/ background-position: bottom left; } #color-palette .controls .lock[locked-state='true'] { /*background-image: url('images/locked.png');*/ background-position: top left ; } #color-palette .controls .lock[locked-state='true']:hover { /*background-image: url('images/lock-hover.png');*/ background-position: top right; } /** * canvas */ #canvas { width: 100%; heigh...
...r no-repeat; position: absolute; top: 0; left: 0; display: none; } #canvas .sample .delete { width: 10px; height: 10px; margin: 5px; background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; position: absolute; top: 0; right: 0; display: none; } /** * canvas controls */ #canvas .toggle-bg { width: 16px; height: 16px; margin: 5px; background: url("images/canvas-controls.png") center left no-repeat; position: absolute; top: 0; right: 0; } #canvas .toggle-bg:hover { cursor: pointer; } #canvas[data-bg='true'] { background: none; } #canvas[data-bg='true'] .toggle-bg { background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; } #zindex { height: 20px; margin: 5px; font-size: 16px; position: ab...

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in my image gallery example i have some landscape and some portrait images.
... i have set landscape images – with a class of landscape to span two column tracks.

Implementing image sprites in CSS - CSS: Cascading Style Sheets
image sprites are used in numerous web apps where multiple images are used.
... rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.

Using CSS gradients - CSS: Cascading Style Sheets
in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.
... in both examples, the gradient is written twice: the first is the css images level 3 method of repeating the color for each stop and the second example is the css images level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.

CSS values and units - CSS: Cascading Style Sheets
.box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted.
... css images module level 4 working draft adds element(), image(), image-set(), conic-gradient() css images module level 3 candidate recommendation initial definition of image.

Mozilla CSS extensions - CSS: Cascading Style Sheets
-moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus ...
...statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.

CSS Tutorials - CSS: Cascading Style Sheets
scaling background images css allows you to resize images used as an element's background.
... css gradients gradients are images that transition smoothly from one color to another.

background-blend-mode - CSS: Cascading Style Sheets
the background-blend-mode css property sets how an element's background images should blend with each other and with the element's background color.
...if the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

background - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.
...= <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status comment css backgrounds and borders modu...

border-image - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
... accessibility concerns assistive technology cannot parse border images.

element() - CSS: Cascading Style Sheets
<div style="width:400px; height:100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification.
... working draft deferred from css3 images.

filter - CSS: Cascading Style Sheets
filters are commonly used to adjust the rendering of images, backgrounds, and borders.
... .mydiv { filter: grayscale(50%); } /* gray all images by 50% and blur by 10px */ img { filter: grayscale(0.5) blur(10px); } applying svg filters examples of using the url function with an svg resource are as follows: .target { filter: url(#c1); } .mydiv { filter: url(commonfilters.xml#large-blur); } specifications specification status comment filter effects module level 1the definition of 'filter' in that spe...

<gradient> - CSS: Cascading Style Sheets
<div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment css images module level 4the definition of '<gradient>' in that specification.
... working draft adds conic-gradient css images module level 3the definition of '<gradient>' in that specification.

image-orientation - CSS: Cascading Style Sheets
description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated.
...alue="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value; }); result specifications specification status comment css images module level 3the definition of 'image-orientation' in that specification.

linear-gradient() - CSS: Cascading Style Sheets
specifications specification status comment css images module level 4the definition of 'gradient color-stops' in that specification.
... css images module level 3the definition of 'linear-gradient()' in that specification.

mask-border-slice - CSS: Cascading Style Sheets
values <number> represents an edge offset in pixels for raster images and coordinates for vector images.
... for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

mask-size - CSS: Cascading Style Sheets
the mask-size css property specifies the sizes of the mask images.
...gradients are treated as images with no intrinsic dimensions or intrinsic proportion.

object-fit - CSS: Cascading Style Sheets
} img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment css images module level 4the definition of 'object-fit' in that specification.
... working draft css images module level 3the definition of 'object-fit' in that specification.

object-position - CSS: Cascading Style Sheets
<img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
... result specifications specification status comment css images module level 3the definition of 'object-position' in that specification.

HTML5 - Developer guides
svg an xml-based format of vectorial images that can directly be embedded in the html.
... more fancy borders not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-radius property.

Mobile Web Development - Developer guides
optimizing images to help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution.
... you can also make use of css properties to implement visual effects like gradients and shadows without images.

<link>: The External Resource Link element - HTML: Hypertext Markup Language
font css @font-face image <img> and <picture> elements with srcset or imageset attributes, svg <image> elements, css *-image rules object <object> elements script <script> elements, worker importscripts style <link rel=stylesheet> elements, css @import track <track> elements video <video> elements worker worker, sharedworker crossorigin this enumerated attribute in...
...cors-enabled images can be reused in the <canvas> element without being tainted.

<picture>: The Picture element - HTML: Hypertext Markup Language
cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
... <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size.

MIME types (IANA media types) - HTTP
image list at iana image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated gif or apng.
... audio and video types as is the case for images, html doesn't mandate that web browsers support any specific file and codec types for the <audio> and <video> elements, so it's important to consider your target audience and the range of browsers (and versions of those browsers) they may be using when choosing the file type and codecs to use for media.

Cross-Origin Resource Sharing (CORS) - HTTP
images/video frames drawn to a canvas using drawimage().
... css shapes from images.

HTTP caching - HTTP
common forms of caching entries are: successful results of a retrieval request: a 200 (ok) response to a get request containing a resource like html documents, images or files.
...this includes static files such as images, css files and javascript files, for example.

Using Feature Policy - HTTP
these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
... send the following the http header: feature-policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; using the <iframe> allow attribute: <iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe> ...

Feature Policy - HTTP
ensure images are sized properly and are not too big for the viewport.
... the features include: layout-inducing animations legacy image formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused.

Cache-Control - HTTP
it therefore forbids a proxy or browser feature, such as google’s web light, from converting images to minimize data for a cache store or slow connection.
...this includes static files that are served by the application such as images, css files and javascript files, for example.

Content-Security-Policy - HTTP
img-src specifies valid sources of images and favicons.
... content-security-policy: default-src 'self' http://example.com; connect-src 'none'; content-security-policy: connect-src http://example.com/; script-src http://example.com/ examples example: disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https: // header content-security-policy: default-src https: // meta tag <meta http-equiv="content-security-policy" content="default-src https:"> example: pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and to disable plugins: content-security-policy: default-src https: 'unsafe-eval' 'unsafe-inline';...

Index - HTTP
38 csp: img-src csp, directive, http, reference, security the http content-security-policy img-src directive specifies valid sources of images and favicons.
... 117 x-dns-prefetch-control dns, http, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.

X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
...if the domain names for images can be resolved in advance of the images being requested, pages that load many images can see an improvement of 5% or more in the time of loading images.

Link prefetching FAQ - HTTP
an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5.
...for example, the next document might contain several large images.

Web app manifests
ptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/ho...
...mescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of the specification (the response of the manifest file should return content-type: application/manifest+json).

Web media technologies
this includes using local cameras and microphones to capture video, audio, and still images.
... guide to media types and formats on the web a guide to the file types and codecs available for images, audio, and video media on the web.

Populating the page: how browsers work - Web Performance
if your fonts, images, scripts, ads, and metrics all have different hostnames, a dns lookup will have to be made for each one.
...painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images.

Progressive web app structure - Progressive web apps (PWAs)
structure of our example application the js13kpwa website structure is quite simple: it consists of a single html file (index.html) with basic css styling (style.css), and a few images, scripts, and fonts.
...wa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachenam...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
ng', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array.
... var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); there are two things that need an explanation here: what extendableevent.waituntil does, and what the caches object is.

Structural overview of progressive web apps - Progressive web apps (PWAs)
also included are a few images, scripts, and fonts.
...wa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); with the file list prepared, it's time to install the service worker itself.

color-profile - SVG: Scalable Vector Graphics
for images that do have a profile built into their data, that profile is used.
... for images that do not have a profile, the srgb profile is used.

image-rendering - SVG: Scalable Vector Graphics
specifications specification status comment css images module level 3the definition of 'image-rendering' in that specification.
... candidate recommendation no significant change, only added a reference to css images 3 scalable vector graphics (svg) 1.1 (second edition)the definition of 'image-rendering' in that specification.

Tutorials
intermediate level multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
...how do i decorate my webpage with background images and colors?

Private Properties - Archive of obsolete content
before explaining how weakmaps work, the following looks at how ordinary objects can be used as hash maps, by creating a simple image cache: let images = {}; function getimage(name) { let image = images[name]; if (!image) { image = loadimage(name); images[name] = image; } return image; } now suppose there's a need to associate a thumbnail with each image.

clipboard - Archive of obsolete content
var clipboard = require("sdk/clipboard"); if (clipboard.currentflavors.indexof("image") != -1) require("sdk/tabs").open(clipboard.get()); as noted before, data type can be easily omitted for images.

content/loader - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

window/utils - Archive of obsolete content
this means that its "load" event has been fired and all content is loaded, including the whole dom document, images, and any other sub-resources.

Modifying Web Pages Based on URL - Archive of obsolete content
by default, content scripts are attached after all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.

Boxes - Archive of obsolete content
ue="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box.

Customizing the download progress bar - Archive of obsolete content
the other two images are for the filled in progress bar on windows and mac respectively.

Downloading Files - Archive of obsolete content
downloading images sample function for fetching an image file from a url.

On page load - Archive of obsolete content
ef.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).

SVG General - Archive of obsolete content
hopefully, enough to get you creating some svg images.

Code snippets - Archive of obsolete content
downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with s...

Displaying web content in an extension without security issues - Archive of obsolete content
it won’t harm disabling everything else as well unless it is really required: frame.docshell.allowauth = false; frame.docshell.allowimages = false; frame.docshell.allowjavascript = false; frame.docshell.allowmetaredirects = false; frame.docshell.allowplugins = false; frame.docshell.allowsubframes = false; but what about interactivity, for example if you want a certain reaction to mouse clicks?

Extension Theming Guidelines - Archive of obsolete content
skin packages just as extension code should exist in chrome content packages, all of the styling for an extension including css and images should exist in a chrome skin package.

Extension Versioning, Update and Compatibility - Archive of obsolete content
since it is being displayed outside of a normal webpage context it is heavily sanitized, which means there are few formatting options available and scripting and images aren't allowed.

Listening to events in Firefox extensions - Archive of obsolete content
load dispatched after the page—including images—has first finished loading.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
special elements embedding images in addition to writing direct javascript code in event handlers, xul also allows you to embed scripts using a script element, just like in html; this can be used to read in an external script or to place the code in the script element's content.

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the skin package this is used to include source files used as visual elements in the gui, including style sheets and images.

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
some examples of xml-based markup languages include xhtml, which is html redefined on an xml base; svg, for expressing vector images; and mathml, for expressing mathematical formulas.

Custom XUL Elements with XBL - Archive of obsolete content
as explained earlier, xul is really just boxes, text and images.

Intercepting Page Loads - Archive of obsolete content
shouldload is called for every load operation firefox tries to do, including images, scripts and xul documents.

The Essentials of an Extension - Archive of obsolete content
the skin section has the files that define most of the look and feel of the ui (using css and images, just like web pages).

Performance best practices in extensions - Archive of obsolete content
avoid animated images animated images are much more expensive than generally expected, especially when used in xul tree elements..

Security best practices in extensions - Archive of obsolete content
frame.docshell.allowimages = false; frame.docshell.allowjavascript = false; frame.docshell.allowplugins = false; there are more examples listed in the document listed above in this section.

Creating reusable content with CSS and XBL - Archive of obsolete content
you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element.

Index of archived content - Archive of obsolete content
tions list of mozilla-based applications localizing an extension mmgc makefile - .mk files misc top level bypassing security restrictions and signing code creating a web based tone generator defining cross-browser tooltips environment variables affecting crash reporting io guide images, tables, and mysterious gaps installing plugins to gecko embedding browsers on windows mcd, mission control desktop, aka autoconfig monitoring wifi access points no proxy for configuration notes on html reflow same-origin policy for file: uris source navigator source code directories overview using xml data ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
note this article is the version from 2003 with slight modifications (no images and no links to samples).

List of Mozilla-Based Applications - Archive of obsolete content
this is separate from the javascript library jslib) joybidder ebay auction tool standalone version uses xulrunner just (fr) audio a tool for setting temporal tags in audio documents jsdoc toolkit documentation tool uses mozilla rhino k-meleon gecko-based web browser for windows embeds gecko in mfc kairo.at mandelbrot creates images of mandelbrot sets xulrunner application kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia kneemail prayer, praise, and journal application komodo and komodo edit and open komodo development tools mozilla-based application (pre-xulrunner style), xul ui ...

Misc top level - Archive of obsolete content
images, tables, and mysterious gapsalmost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.

Dehydra Frequently Asked Questions - Archive of obsolete content
images of those graphs reminded me of the multiheaded hydra monster.

Block and Line Layout Cheat Sheet - Archive of obsolete content
ns_frame_external_reference ns_frame_replaced_element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations.

Metro browser chrome tests - Archive of obsolete content
static content for tests static content (html files, images, etc.) should be stored in sub directories to avoid polluting the main test directory.

Microsummary topics - Archive of obsolete content
it does not generally download related content like embedded images and javascript scripts referenced by the page.

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
r any other xml or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks designs based on a precise layout of small images in table cells.

Overview of how downloads work - Archive of obsolete content
click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window.

Plugin Architecture - Archive of obsolete content
note that while nsobjectloadingcontent also deals with images and documents, this document concentrates on plugins.

Priority Content - Archive of obsolete content
migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 2005 (pdt) dependant on: mostly completed*: class xbdesignmode / devedge - joel coreson please put completed articles on the devedge page instead.

New Skin Notes - Archive of obsolete content
--dria when using floated divs - images and such.

Table Layout Regression Tests - Archive of obsolete content
place the images in table/images block/images or (don't forget cvs commit -kb) and the test file in the table/bugs or block/bugs directory.

Elements - Archive of obsolete content
you can use this to preload a number of images for later use.

validate - Archive of obsolete content
this would be useful if the images are stored remotely or you plan on swapping the image frequently.

Deprecated and defunct markup - Archive of obsolete content
ntained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (intern...

XUL Events - Archive of obsolete content
for images, this event does not bubble up the element tree, so it will not conflict with the window's load event.

Index - Archive of obsolete content
1006 adding labels and images tutorials, xul, xul_tutorial this section describes a way to add labels and images to a window.

Extensions - Archive of obsolete content
for instance, if an image was context clicked, you may wish to hide the menu item you have added if the operation it performed wouldn't apply to images.

MenuItems - Archive of obsolete content
although the exact size will vary depending on the theme being used, the size of menu item images should generally be around 16 by 16 pixels.

OpenClose - Archive of obsolete content
this may be confusing to understand, so see positioning a popup which describes this process in more detail and provides images which show the possible values and how a popup would be aligned for each value.

PopupEvents - Archive of obsolete content
for instance, right clicking on an image might display items on a context menu pertaining to images, whereas clicking on a link would display only those items pertaining to links.

Positioning - Archive of obsolete content
there are several possible values for the position attribute, described here, along with images which show how a popup would be aligned in each case.

Sorting and filtering a custom tree view - Archive of obsolete content
lvalue = function(row, col) { return table[row][col.id]; }; this.settree = function(treebox) { this.treebox = treebox; }; this.iseditable = function(row, col) { return col.editable; }; this.iscontainer = function(row){ return false; }; this.isseparator = function(row){ return false; }; this.issorted = function(){ return false; }; this.getlevel = function(row){ return 0; }; this.getimagesrc = function(row,col){ return null; }; this.getrowproperties = function(row,props){}; this.getcellproperties = function(row,col,props){}; this.getcolumnproperties = function(colid,col,props){}; this.cycleheader = function(col, elem) {}; } function sort(column) { var columnname; var order = tree.getattribute("sortdirection") == "ascending" ?

Building Trees - Archive of obsolete content
it’s not normal to put photos in a tree like this—instead, the images would be used for icons.

Multiple Rules - Archive of obsolete content
in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images.

Simple Query Syntax - Archive of obsolete content
after the default query statements are evaluated, the data network will look something like this: (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the numbers are used here for the variable names, but they are really just randomly generated so you can't refer to them in any way.

Sorting Results - Archive of obsolete content
here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">1125966767295<r:date> </rdf:description> </rdf:rdf> you can also specify parsetype="integer" for numbers which will allow sorting numerically.

The Joy of XUL - Archive of obsolete content
xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files).

Adding Event Handlers - Archive of obsolete content
example 2 : source view <vbox oncommand="alert(event.target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.

More Button Features - Archive of obsolete content
positioning the images by default, the image on a button will appear to the left of the text label.

More Event Handlers - Archive of obsolete content
example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.

Open and Save Dialogs - Archive of obsolete content
fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for html and for image files.

Skinning XUL Files by Hand - Archive of obsolete content
in xul, skins are created with cascading style sheets and images.

Splitters - Archive of obsolete content
as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.

Tree View Details - Archive of obsolete content
1, -deletecount); } } else { item[2] = true; var label = this.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); }, getimagesrc: function(idx, column) {}, getprogressmode : function(idx,column) {}, getcellvalue: function(idx, column) {}, cycleheader: function(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function...

Trees - Archive of obsolete content
however, listboxes may contain any type of content, whereas trees may only contain text and images.

XBL Example - Archive of obsolete content
you could put anything within the pages, however, this widget might be useful for a set of images.

XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event hand...

XUL Questions and Answers - Archive of obsolete content
there are several options for displaying graphics and animation in xul: <html:canvas> svg <xul:image> (static images or animated gif; support for apng is planned) plugins templates with non-rdf datasources?

XUL Reference - Archive of obsolete content
wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar me...

XML - Archive of obsolete content
xul is little beyond the set of tags used to define interface widgets, the relationship between them, or grammar, and some built-in flexibility for using extra resources like images, html elements, and other standards-based technologies.

menuitem - Archive of obsolete content
this would be useful if the images are stored remotely or you plan on swapping the image frequently.

prefwindow - Archive of obsolete content
for example the permissions manager ui in firefox uses the same window for three dialogs: images, software installation and popups.

tab - Archive of obsolete content
this would be useful if the images are stored remotely or you plan on swapping the image frequently.

toolbarbutton - Archive of obsolete content
this would be useful if the images are stored remotely or you plan on swapping the image frequently.

XULRunner Hall of Fame - Archive of obsolete content
ieditweb users can add pages, images, forms, ecommerce many special effects and much more using the xulrunner based client.

nsIContentPolicy - Archive of obsolete content
type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>.

Gecko Compatibility Handbook - Archive of obsolete content
images are laid out without intervening blank areas in interent explorer but display blank areas between the images in gecko browsers.

Mozilla release FAQ - Archive of obsolete content
it is very difficult to determine what components of the webpage actually needs -- certain images may be shared between several pages, the user may have images turned off or lack capabilities to use a certain type of media.

2006-11-22 - Archive of obsolete content
discussions image labelling for blind help machines frank hecker brought up a valid discussion about the problem of getting images tagged for use by screen.

2006-10-20 - Archive of obsolete content
how to create firefox extension (chrome) to add images next to urls ?

2006-11-10 - Archive of obsolete content
matthew gertner wants to know if anyone has written code to paste images from the clipboard on platforms other than windows?

2006-11-10 - Archive of obsolete content
block images discussion on how where to change source code so that images could be blocked in mozilla.

0.90 - Archive of obsolete content
"http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla</title> <url>http://www.mozilla.org/images/moz.gif</url> <link>http://www.mozilla.org</link> </image> <item> <title>new status updates</title> <link>http://www.mozilla.org/status/</link> </item> <item> <title>bugzilla reorganized</title> <link>http://www.mozilla.org/bugs/</link> </item> <item> <title>mozilla party, 2.

Sunbird Theme Tutorial - Archive of obsolete content
to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end.

Building a Theme - Archive of obsolete content
that form the structure and behavior of an application ui), locale (dtd, .properties files etc that contain strings for the ui's localization), and skin (css and images that form the theme of the ui) finally, the path of a file to load.

Making sure your theme works with RTL locales - Archive of obsolete content
*/ #a > #b > #c { /* normal rules */ } #a[chromedir="rtl"] > #b > #c { /* rtl rules */ } tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images.

Theme changes in Firefox 4 - Archive of obsolete content
iconsize value actual add-on toolbar button icon dimensions (assuming correct stylesheet and images) small 16x16 pixels large 24x24 pixels note: for stock buttons, the theme is free to use icons of any size.

Using the W3C DOM - Archive of obsolete content
« previousnext » the document object has properties for accessing collections of elements, such as document.images and document.forms.

-ms-block-progression - Archive of obsolete content
images are not rotated, but tables are.

:-moz-system-metric() - Archive of obsolete content
syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(s...

E4X for templating - Archive of obsolete content
of the lines in an e4x child element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} or if the e4x child element had its own children and text: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem.text()} {elem.somechild}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ function sort (xmllist, h) { ...

XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-...

The Business Benefits of Web Standards - Archive of obsolete content
even more importantly, it reduces bandwidth consumption by images.

Using the Right Markup to Invoke Plugins - Archive of obsolete content
here is an example: <object type="application/x-java-applet;jpi-version=1.4.1_01" width="460" height="160"> <param name="code" value="animator.class" /> <param name="imagesource" value="images/beans" /> <param name="backgroundcolor" value="0xc0c0c0" /> <param name="endimage" value="10" /> <param name="soundsource" value="audio"> <param name="soundtrack" value="spacemusic.au" /> <param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /> <param name="pause" value="200" /> <p>you need the java plugin.

Archive of obsolete content
index of archived content inner-browsing extending the browser navigation paradigm this article is the version from 2003 with slight modifications (no images and no links to samples).

Anatomy of a video game - Game development
these games present two images to the user; they accept their click (or touch); they interpret the input as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene resulting from that input.

Mobile touch controls - Game development
from a design point of view, it is better to make the field of activity bigger without covering half of the screen with button images.

Implementing game control mechanisms - Game development
the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects.

Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.

2D breakout game using pure JavaScript - Game development
you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.

Animations and tweens - Game development
next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.

Load the assets and print them on screen - Game development
loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript.

Randomizing gameplay - Game development
change the images and use your own.

Scaling - Game development
show_all — scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the previous mode.

2D breakout game using Phaser - Game development
you will learn the basics of using the phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states.

Tutorials - Game development
along the way you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.

API - MDN Web Docs Glossary: Definitions of Web-related terms
the web animations api can be used to animate parts of a web page — for example, to make images move around or rotate.

Bézier curve - MDN Web Docs Glossary: Definitions of Web-related terms
in vector images, they are used to model smooth curves that can be scaled indefinitely.

CMS - MDN Web Docs Glossary: Definitions of Web-related terms
a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.

Canvas - MDN Web Docs Glossary: Definitions of Web-related terms
the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d shapes and bitmap images.

Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded.

First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
the first contentful paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or svg.

Gecko - MDN Web Docs Glossary: Definitions of Web-related terms
web browsers need software called a layout engine to interpret html, css, javascript, and embedded content (like images) and draw everything to your screen.

Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view.

mime - MDN Web Docs Glossary: Definitions of Web-related terms
audio, video and images.

Media (Audio-visual presentation) - MDN Web Docs Glossary: Definitions of Web-related terms
more broadly, media may include still images such as photographs or other still images.

Raster image - MDN Web Docs Glossary: Definitions of Web-related terms
raster image files usually contain one set of dimensions, but the ico and cur formats, used for favicons and css cursor images, can contain multiple sizes.

Rendering engine - MDN Web Docs Glossary: Definitions of Web-related terms
a rendering engine is software that draws text and images on the screen.

SEO - MDN Web Docs Glossary: Definitions of Web-related terms
use text as well as images so that crawlers can understand the subject.

Texel - MDN Web Docs Glossary: Definitions of Web-related terms
textures are characterised by collections of texel’s, as how images are characterised by collections of pixels.

JPEG - MDN Web Docs Glossary: Definitions of Web-related terms
jpeg (joint photographic experts group) is a commonly used method of lossy compression for digital images.

lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
although there is no obvious difference quality between the two images above, the size of the second image has been significantly reduced, using lossy compression.

Assessment: Accessibility troubleshooting - Learn web development
the images the images are currently inaccessible to screenreader users.

Test your skills: HTML accessibility - Learn web development
the header image has an accessiiblity issue, and so do the gallery images.

WAI-ARIA basics - Learn web development
dynamic content updates content loaded into the dom can be easily accessed using a screenreader, from textual content to alternative text attached to images.

Cascade and inheritance - Learn web development
overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Creating fancy letterheaded paper - Learn web development
save local copies of the top, bottom and logo images in the same directory as your code files.

Debugging CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Handling different text directions - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Overflowing content - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Attribute selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Combinators - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Pseudo-classes and pseudo-elements - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Type, class, and ID selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

CSS selectors - Learn web development
adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Test your skills: sizing - Learn web development
task three this task has two images in boxes.

Test your skills: backgrounds and borders - Learn web development
backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.

The box model - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Introduction to CSS layout - Learn web development
floats — applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.

Positioning - Learn web development
you may recall from previous points in the course where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets.

CSS layout - Learn web development
floats originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.

How CSS works - Learn web development
the browser then fetches most of the resources that are linked to by the html document, such as embedded images and videos ...

What are hyperlinks? - Learn web development
since then, the web has evolved to provide access to images, videos, and binary data, but these improvements have hardly changed the three pillars.

What is a URL? - Learn web development
the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its related resources through various elements such as <link> or <script>; to display media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element.

What is accessibility? - Learn web development
if the technical side interests you more, you could learn how to embed images in webpages.

Test your skills: Basic controls - Learn web development
allow the file picker to accept jpg and png images only.

How the Web works - Learn web development
assets: this is a collective name for all the other stuff that makes up a website, such as images, music, video, word documents, and pdfs.

Installing basic software - Learn web development
a graphics editor, like gimp, figma, paint.net, photoshop, or xd, to make images or graphics for your web pages.

Publishing your website - Learn web development
however, the features are limited, and these apps usually don't provide hosting space for assets (like images).

Getting started with HTML - Learn web development
this contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.

Structuring a page of content - Learn web development
images that are used on the page.

Introduction to HTML - Learn web development
a navigation menu?), and embed content such as images and videos into a page.

Client-side storage - Learn web development
you can store videos, images, and pretty much anything else in an indexeddb instance.

Fetching data from the server - Learn web development
in this case we want to return our response as an image file, and the data format we use for that is blob (the term is an abbreviation of "binary large object" and can basically be used to represent large file-like objects, such as images or video files).

Third-party APIs - Learn web development
}) to check whether each article has any images associated with it (some stories don't.) we display the first image only if it exists (otherwise an error would be thrown).

Working with JSON - Learn web development
images, text, json, even html snippets), meaning that we can update small sections of content without having to reload the entire page.

CSS performance optimization - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.

Measuring performance - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.

What is web performance? - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.

The business case for web performance - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.

Learning area release notes - Learn web development
you can see these on: html text fundamentals creating hyperlinks advanced text formatting images in html video and audio content from object to iframe — other embedding technologies ...

Client-Server Overview - Learn web development
understanding how static sites work is nevertheless useful when learning server-side programming, because dynamic sites handle requests for static files (css, javascript, static images, etc.) in exactly the same way.

Getting started with Vue - Learn web development
assets: this directory is for storing static assets like css and images.

Styling Vue components with CSS - Learn web development
the images below show the look of the app before and after the reset is applied.

Handling common accessibility problems - Learn web development
the simplest text alternative available is the humble alt attribute, which we should include on all images that contain relevant content.

Introduction to automated testing - Learn web development
note: all the videos and images captured inside a test session are captured inside the gallery, test logs, and issue tracker at lambdatest.

Strategies for carrying out testing - Learn web development
default browser installed side by side, so you might want to build up a library of virtual machines to handle different tests as required, e.g.: windows 10 with edge 14 windows 10 with edge 13 windows 8.1 with ie11 windows 8 with ie10 windows 7 with ie9 windows xp with ie8 windows xp with ie7 windows xp with ie6 note: another good thing about virtual machines is that the virtual disk images are fairly self-contained.

Deploying our app - Learn web development
some questions to ask yourself: can images be compressed during the build step?

Introducing a complete toolchain - Learn web development
however, this project has only 4 svg images, which were manually minified using svgo before adding them to the project.

Gecko info for Windows accessibility vendors
animated images use role_graphic with state_animated.

Index
686 theme concepts theme, add-on themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.

Reviewer Checklist
accessibility for html pages, images should have the alt attribute set when appropriate.

Embedding the editor
there is a huge amount of composer ui in the various dialogs for editing tables, links, images etc.

HTML parser threading
when the executor acts on speculative loads, it starts speculative http fetches for images (including video poster frames), style sheets and scripts.

HTTP Cache
open_priority: except opening priority cache files also file dooming happens here to prevent races read_priority: top level documents and head blocking script cache files are open and read as the first open read: any normal priority content, such as images are open and read here write: writes are processed as last, we cache data in memory in the mean time management: level for the memory pool and cacheentry background operations close: file closing level index: index is being rebuild here evict: files overreaching the disk space consumption limit are being evicted here note: special case for eviction - when an eviction is scheduled on the io...

How Mozilla determines MIME Types
also, for images loaded via <img src>, mozilla's image library will do content sniffing (never extension sniffing) to find out the real type of the image.

Addon
screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on.

OS.File for the main thread
console.log('successfully saved image to disk'); }, function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.

Examples
make user defined promise return after multiple images finish loading (promise.all and promise.defer) this example shows how to use promise.all to wait to create multiple promises with promise.defer() and return at the end of it.

Creating localizable web content
images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what sizes/margins can be tweaked by css or have to be fixed for all locales but english don't use text in icons images 1&2.

Basics
i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...

MathML Screenshots
this page also shows how mathml can be used in combination with other web features such as background images at a desired opacity.

MathML Demo: <mfrac> - fractions
</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...

accessibility.tabfocus
4 give focus only to links and linked images.

Index
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.

NSS tools : ssltab
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.

NSS tools : ssltap
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.

NSS Tools ssltap
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.

NSS tools : ssltap
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.

Task graph
these tasks include build and test tasks, along with lots of other kinds of tasks to build docker images, build toolchains, perform analyses, check syntax, and so on.

Using the Places favicon service
getting favicon images you can use favicons in the browser ui using special annotation uris.

imgIEncoder
remarks for encoding images which may contain multiple frames, the 1-shot initfromdata() interface is too simplistic.

mozIThirdPartyUtil
for example, the uri "http://mail.google.com/" is not third party with respect to "http://images.google.com/", but "http://mail.yahoo.com/" and "http://192.168.1.1/" are.

nsIDocShell
allowimages boolean attribute stating whether or not images should be loaded.

nsIDocumentLoader
uriloader/base/nsidocumentloader.idlscriptable this interface responsible for tracking groups of loads that belong together (images, external scripts, and so on.) and subdocuments (iframe, frame, and so on.).

nsIDragService
currently, supported images are all dom nodes.

nsIFile
example, this could return "/home/user/foo.txt" or "c:\images\my.jpeg" permissions unsigned long the value of this attribute is a unix-style file permission mask for this nsifile.

nsIFilePicker
filterimages 0x008 corresponds to the *.jpe, *.jpg, *.jpeg, *.gif, *.png, *.bmp, *.ico, *.svg, *.svgz, *.tif, *.tiff, *.ai, *.drw, *.pct, *.psp, *.xcf, *.psd and *.raw filters for file extensions.

nsINavHistoryObserver
normally, transition types of transition_embed (corresponding to images in a page, for example) are not displayed in history results (unless includehidden is set).

nsINavHistoryQueryOptions
hidden things include the content of iframes and all images on web pages.

nsINavHistoryService
this is true of all images on a page, and the contents of the iframe.

nsIPermission
the nsipermission interface defines a "permission" object, which is used to allow or block objects (for example cookies, images) from certain sites based on user preferences.

nsIPermissionManager
the nsipermissionmanager interface is used to persistently store permissions for different object types (cookies, images, and so on) on a site-by-site basis.

nsIWebBrowserPersist
savedocument() save the specified dom document to file and optionally all linked files (for example images, css, js & subframes).

nsIWebNavigation
this includes animated images, plugins and pending javascript timeouts.

nsIWebProgressListener
(see below for a description of document requests.) other types of requests, such as requests for inline content (for example images and stylesheets) are considered normal requests.

XPCOM Interface Reference
ntrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritycheckedcomponentnsiseekablestreamnsiselectionnsiselection2nsiselection3nsiselectioncontrollernsiselectionimageservicensiselectionprivatensiserversocketnsiserversocketlistenernsiservicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandardurlnsistreamconverternsistreamlistenernsistringbundlensistringbundleoverridens...

XPCOM Interface Reference by grouping
dom nsiwebbrowser nsiwebbrowserpersist cache nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsiwindowcreator nsiwindowmediator nsiwindowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner ...

XPCOM
however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against.

customDBHeaders Preference
ew.getkeyat(row); var hdr = gdbview.db.getmsghdrforkey(key); var retval = hdr.getstringproperty("x-superfluous"); dump("x-superfluous: " + retval + "\n"); return retval; }, getsortstringforrow: function(hdr) { return hdr.getstringproperty("x-superfluous"); }, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } function addcustomcolumnhandler() { gdbview.addcolumnhandler("colsuperfluous",columnhandler); dump("column handler being added: " + columnhandler + "\n"); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { dump("here here!

Examples
add image to iphoto an extension that adds a contextual menu item to images that lets you easily add them to iphoto on mac os x.

Accessibility Inspector - Firefox Developer Tools
for a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.

How to - Firefox Developer Tools
xamine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...

Page Inspector - Firefox Developer Tools
you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...

Frame rate - Firefox Developer Tools
frame rate and responsiveness frame rate is the rate at which a video device can produce images (or frames).

Blob.type - Web APIs
var i, fileinput, files, allowedfiletypes; // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.type is an allowed file type.

Using the CSS Typed Object Model - Web APIs
had the background image been a gradient or multiple background images, .get('background-image') would have returned a cssstylevalue.

Cache.delete() - Web APIs
examples caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { someuiupdatefunction(); }); }) specifications specification status comment service workersthe definition of 'cache: delete' in that specification.

Cache.matchAll() - Web APIs
examples caches.open('v1').then(function(cache) { cache.matchall('/images/').then(function(response) { response.foreach(function(element, index, array) { cache.delete(element); }); }); }) specifications specification status comment service workersthe definition of 'cache: matchall' in that specification.

CanvasRenderingContext2D.createPattern() - Web APIs
syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image.

CanvasRenderingContext2D.drawImage() - Web APIs
the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas.

CanvasRenderingContext2D.drawWindow() - Web APIs
drawwindow_async_decode_images 0x10 do not synchronously decode images - draw what we have.

CanvasRenderingContext2D.getImageData() - Web APIs
see allowing cross-origin use of images and canvas.

CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.

CanvasRenderingContext2D.save() - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.

A basic ray-caster - Web APIs
the canvas api supports pixel copying of images, so textures seem feasible.

Basic usage of canvas - Web APIs
this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example.

Finale - Web APIs
svg scalable vector graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.

Transformations - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.

Canvas API - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.

Clipboard.read() - Web APIs
unlike readtext(), the read() method can return arbitrary data, such as images.

Clipboard - Web APIs
read() requests arbitrary data (such as images) from the clipboard, returning a promise.

ContentIndex.add() - Web APIs
if icons images are not of image type.

Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Document.adoptNode() - Web APIs
example const iframe = document.queryselector('iframe'); const iframeimages = iframe.contentdocument.queryselectorall('img'); const newparent = document.getelementbyid('images'); iframeimages.foreach(function(imgel) { newparent.appendchild(document.adoptnode(imgel)); }); notes before they can be inserted into the current document, nodes from external documents should either be: cloned using document.importnode(); or adopted using document.adoptnode().

Document.execCommand() - Web APIs
enableobjectresizing enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects.

GlobalEventHandlers.onload - Web APIs
at this point, all of the objects in the document are in the dom, and all the images, scripts, links and sub-frames have finished loading.

HTMLCanvasElement.getContext() - Web APIs
if set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images.

HTMLCanvasElement.toBlob() - Web APIs
the third argument is used when creating images using lossy compression (namely, image/jpeg) to specify the quality of the output.

HTMLCollection.item - Web APIs
example var c = document.images; // this is an htmlcollection var img0 = c.item(0); // you can use the item() method this way var img1 = c[1]; // but this notation is easier and more common ...

HTMLImageElement.border - Web APIs
instead, use the css border property and its longhand properties to establish borders around images.

HTMLImageElement.currentSrc - Web APIs
currentsrc lets you determine which image from the set of provided images was selected by the browser.

HTMLImageElement.decode() - Web APIs
usage notes one potential use case for decode(): when loading very large images (for example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new htmlimageelement, setting its source to the full-resolution image's url, then using decode() to get a promise which is resolved once the full-resolution image is ready for use.

HTMLImageElement.isMap - Web APIs
this may only be used on images located within an <a> element.

HTMLImageElement.lowSrc - Web APIs
or simply make sure your images are all well-optimized and balanced for appearance versus size.

HTMLMapElement - Web APIs
recommendation adds the images property.

HTMLMedia​Element​.textTracks - Web APIs
examples we start with a <video> that has several <track> children <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subtitles" s...

HTMLVideoElement - Web APIs
htmlvideoelement.mozdecodedframes read only returns an unsigned long with the count of parsed video frames that have been decoded into images.

HTML Drag and Drop API - Web APIs
let img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } learn more about drag feedback images in: setting the drag feedback image define the drag effect the dropeffect property is used to control the feedback the user is given during a drag-and-drop operation.

ImageCapture() constructor - Web APIs
syntax const imagecapture = new imagecapture(videotrack) parameters videotrack a mediastreamtrack from which the still images will be taken.

IndexedDB API - Web APIs
storing images and files in indexeddb specifications specification status comment indexed database api draft recommendation indexed database api 2.0 recommendation initial definition ...

Intersection Observer API - Web APIs
intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled.

LocalFileSystem - Web APIs
for example, if you were to create a mail app, you might create a temporary storage for caching assets (like images and attachments) to speed up performance, while creating persistent storage for unique data—such as drafts of emails that were composed while offline—that should not be lost before they are backed up into the cloud.

MediaMetadata.MediaMetadata() - Web APIs
artwork: an array of images associated with the playing media.

MediaMetadata.artwork - Web APIs
the artwork property of the mediametadata interface returns or sets an array of mediaimage objects representing images associated with playing media.

MediaMetadata - Web APIs
mediametadata.artwork returns or sets an array of images associated with playing media.

MediaStreamTrack: ended event - Web APIs
track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification.

MediaStreamTrack.onended - Web APIs
track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification.

Navigator.mediaSession - Web APIs
this information can include typical metadata such as the title, artist, and album name of the song being played as well as potentially one or more images containing things like album art, artist photos, and so forth.

OffscreenCanvas.getContext() - Web APIs
if set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.

PushEvent.data - Web APIs
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment...

PushEvent - Web APIs
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status co...

RTCPeerConnection.createDataChannel() - Web APIs
this can be useful for back-channel content such as images, file transfer, text chat, game update packets, and so forth.

ServiceWorkerGlobalScope.onpush - Web APIs
h contains a pushmessagedata object.) self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment ...

ServiceWorkerRegistration.showNotification() - Web APIs
buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworkerglobalscope.onnotificationclick event handler.

Storage Access API - Web APIs
scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send cookie headers and honor incoming set-cookie headers.

Streams API - Web APIs
this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.

URL.createObjectURL() - Web APIs
examples see using object urls to display images.

URL.revokeObjectURL() - Web APIs
examples see using object urls to display images.

WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
low dynamic ranges are for example jpeg format images which won't exceed 255:1, or crt monitors which won't exceed 100:1.

WebGL2RenderingContext.getInternalformatParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.

WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.

WebGLRenderingContext.bindRenderbuffer() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.

WebGLRenderingContext.checkFramebufferStatus() - Web APIs
when using a webgl 2 context, the following values can be returned additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures.

WebGLRenderingContext.createTexture() - Web APIs
return value a webgltexture object to which images can be bound to.

WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.

WebGLRenderingContext.getParameter() - Web APIs
gl.unpack_skip_images glint see pixelstorei.

WebGLRenderingContext.getRenderbufferParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.

WebGLRenderingContext.pixelStorei() - Web APIs
glint 0 0 to infinity opengl es 3.0 gl.unpack_image_height image height used for reading pixel data from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_pixels number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infin...

WebGLRenderingContext.renderbufferStorage() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.

Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key types of computation when constructing images and visualizing data on the web.

Taking still photos with WebRTC - Web APIs
fun with filters since we're capturing images from the user's webcam by grabbing frames from a <video> element, we can very easily apply filters and fun effects to the video.

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
or, if you're happy to let us continue to use the images, please let us know so we can credit you properly!

Fundamentals of WebXR - Web APIs
simpler and lower-priced xr devices typically use an integrated computer or connect to a smartphone, essentially using the mobile cpu and gpu to run apps, render images, and display them to the user.

Movement, orientation, and motion: A WebXR example - Web APIs
a tip: if you don't have an xr device, you may be able to get some of the 3d effect if you bring your face very close to the screen, with your nose centered along the border between the left and right eye images in the canvas.

WebXR Device API - Web APIs
each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer.

Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Window: load event - Web APIs
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

Window.stop() - Web APIs
because of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new windows, and other still-loading objects.

self.createImageBitmap() - Web APIs
a sprite sheet is an image containing multiple smaller images, each of which you want to be able to render separately.

XRRenderState.baseLayer - Web APIs
the read-only baselayer property of the xrrenderstate interface returns the xrwebgllayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.

Web APIs
alue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credent...

Using the aria-hidden attribute - Accessibility
this can improve the experience for assistive technology users by hiding: purely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element.

Using the group role - Accessibility
<div id="tree1" role="tree" tabindex="-1"> <div id="animals" class="groupheader" role="presentation" aria-owns="animalgroup" aria-expanded="true"> <img role="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <span role="treeitem" tabindex="0">animals</span> </div> <div id="animalgroup" role="group"> <div id="birds" role="treeitem"> <span tabindex="-1">birds</span> </div> <div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <...

ARIA: application role - Accessibility
the at will read any semantics like links, headings, form controls, tables, lists, or images.

ARIA: banner role - Accessibility
<div role="banner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navig...

Accessibility: What users can do to browse more safely - Accessibility
using firefox as an example, it explains that by changing the value the image.animation_mode from "normal" to "none", all animated images will be blocked.

Cognitive accessibility - Accessibility
include text along with use of icons, images, color and so on.

Mobile accessibility checklist - Accessibility
images of text must be avoided.

Web Accessibility: Understanding Colors and Luminance - Accessibility
"safer" animation means images with less contrast, not more.

-moz-force-broken-image-icon - CSS: Cascading Style Sheets
formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute wi...

-moz-image-rect - CSS: Cascading Style Sheets
function rotate() { var prevstyle = window.getcomputedstyle(document.getelementbyid("box4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.getcomputedstyle(document.getelementbyid(curid), null).getpropertyvalue("background-image"); document.getelementbyid(curid).style.backgroundimage = prevstyle; prevstyle = curstyle; } } this uses window.getcomputedstyle() to fetch the style of each element, shifting it to the following element.

-webkit-mask-attachment - CSS: Cascading Style Sheets
formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.

:-moz-suppressed - CSS: Cascading Style Sheets
the :-moz-suppressed css pseudo-class is a mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked.

:-moz-user-disabled - CSS: Cascading Style Sheets
the :-moz-user-disabled css pseudo-class is a mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.

::after (:after) - CSS: Cascading Style Sheets
html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want.

::before (:before) - CSS: Cascading Style Sheets
html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want.

::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

:checked - CSS: Cascading Style Sheets
: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.

:hover - CSS: Cascading Style Sheets
syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.

Using multiple backgrounds - CSS: Cascading Style Sheets
no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'.

Handling Overflow in Multicol - CSS: Cascading Style Sheets
if you want an image to size down to fit the column box, the standard responsive images solution of setting max-width: 100% will achieve that for you.

Typical use cases of Flexbox - CSS: Cascading Style Sheets
we see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions.

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
replaced elements replaced elements such as images will not change their orientation based on the writing-mode property.

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
until that happens, you can ensure that items do not stretch, such as images, which are direct children of the grid, by setting align-self and justify-self to start.

CSS Overflow - CSS: Cascading Style Sheets
this is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc.

Understanding CSS z-index - CSS: Cascading Style Sheets
in the most basic cases, html pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping.

CSS Shapes - CSS: Cascading Style Sheets
reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values basic shapes shapes from images edit shape paths in css — firefox developer tools external resources a list of css shapes resources css shapes 101 creating non-rectangular layouts with css shapes how to use css shapes in your web design how to get started with css shapes what i learned in one weekend with css shapes css vs.

Privacy and the :visited selector - CSS: Cascading Style Sheets
they may, however, require the following changes to existing sites: using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.

Replaced elements - CSS: Cascading Style Sheets
these are defined by the css images module level 3 and css images module level 4 specifications: object-fit specifies how the replaced element's content object should be fitted to the containing element's box.

Visual formatting model - CSS: Cascading Style Sheets
external information (e.g., viewport size, intrinsic dimensions of images, etc.).

background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.

background-origin - CSS: Cascading Style Sheets
igins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'background-origin' in that specification.

border-image-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</...

contain - CSS: Cascading Style Sheets
| style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> ...

content - CSS: Cascading Style Sheets
rback best sellers</h2> <ol> <li>political thriller</li> <li class="new-entry">halloween stories</li> <li>my biography</li> <li class="new-entry">vampire romance</li> </ol> css .new-entry::after { content: " new!"; /* the leading space creates separation between the added content and the rest of the content */ color: red; } result images and element attributes this example inserts an image before each link, and adds its id attribute after.

counter() - CSS: Cascading Style Sheets
the counter() function (and counters() function) is what makes it useful by returning developer defined strings (or images).

list-style-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification.

Guide to scroll anchoring - CSS: Cascading Style Sheets
this has happened because large images or some other elements have just loaded further up in the content.

pointer-events - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit examples disabling pointer events on all images this example disables pointer events (clicking, dragging, hovering, etc.) on all images.

radial-gradient() - CSS: Cascading Style Sheets
specifications specification status comment css images module level 3the definition of 'radial-gradients()' in that specification.

repeating-linear-gradient() - CSS: Cascading Style Sheets
specifications specification status comment css images module level 3the definition of 'repeating-linear-gradient()' in that specification.

repeating-radial-gradient() - CSS: Cascading Style Sheets
specifications specification status comment css images module level 3the definition of 'repeating-radial-gradient()' in that specification.

resize - CSS: Cascading Style Sheets
resize does not apply to the following: inline elements block elements for which the overflow property is set to visible formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.

<resolution> - CSS: Cascading Style Sheets
due to the 1:96 fixed ratio of css in to css px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution.

url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); ...

DOM onevent handlers - Developer guides
elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element).

Overview of events and handlers - Developer guides
the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while the...

Index - Developer guides
27 graphics on the web 2d, 3d, canvas, graphics, html5, svg, web, webgl, webrtc websites and applications often need to present graphics, such as images.these articles provide insight into how you can accomplish this.

Printing - Developer guides
you wish to use higher resolution images for a better result.

HTML attribute: accept - HTML: Hypertext Markup Language
<p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges.

HTML attribute: multiple - HTML: Hypertext Markup Language
file input when multiple is set on the file input type, the user can select one or more files: <form method="post" enctype="multipart/form-data"> <p> <label for="uploads"> choose the images you want to upload: </label> <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> </p> <p> <label for="text">pick a text file to upload: </label> <input type="file" id="text" name="text" accept=".txt"> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the example with mult...

<area> - HTML: Hypertext Markup Language
alt a text string alternative to display on browsers that do not display images.

<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
examples images <!-- just an image --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> </figure> <!-- image with a caption --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> <figcaption>mdn logo</figcaption> </figure> code snippets <figure> <figcaption>get browser details ...