Optimization is usually an afterthought or an after process in development; it usually only begins once a product is built, and only then if the site or application shows visible signs of needed optimization. I am vehemently against optimizing at the last minute, it should be part of your workflow(s), integrated into your development, on varying levels. One area of optimization that is critical for performance and seo is compacting and minimizing file sizes. Focusing on image file sizes in particular, when left unchecked, they can seriously impede a site’s download time, which affects that sites rankings in serps, amongst other things. There are a slew of methods to achieve this today (I use pngcrush), but as far as I know they are all focused on the images once they are production ready. While this standard practice is not going anywhere, check out these methods to be proactive with your image optimization before they get to production. These are only for Photoshop, however it is my image editor of choice when not developing in-browser.
Gamma Values
Gamma Value of a computer monitor affects how light or dark an image is in a browser. Windows use gamma of 2.2, Mac os use 1.8, so images look darker on Windows typically. In Photoshop, we can preview how images will look on different os with different gamma values, and make adjustments to compensate. Gamma Values can be altered to increase cross-platform compatibility, to aid in the ux, and also for simple design aesthetics.
After selecting Save for Web & Devices, choose one of the options in the dialog box Preview pop-up menu:
Monitor Color: makes no adjustments (default)
Macintosh: displays adjustments based on default Macintosh gamma.
Windows: displays adjustments based on default Windows gamma.
Use Document Profile: Adjusts gamma to match any attached document color profile in a color-managed document.
Photoshop Image Processor
The Photoshop Image Processor saves copies of a folder of images into jpeg format. The Photoshop Image Processor can be utilized for resizing and converting images’ color profile(s) to Web Standard srgb.
Save for Web & Devices Option
You can select the Save for Web & Devices Option under the File Menu, the same place where all of the Save options are located in Photoshop. Selecting this option shows further options for Image Optimization and previewing said images. Atop this dialog box are four tabs, original, optimized: displays image with current optimization settings applied, 2-Up: displays two versions of the image, and 4-up which displays four versions of the image.
Select preset optimization setting from the Preset Menu, or set individual options; available options change depending on the selected file format. In 4up Mode, if you choose Repopulate Views from the Optimize Menu, it automatically generates lower-quality versions of your image after changing the optimization settings.
You can change the optimization settings to your desired balance of image quality and file size; if using multiple slices, make sure you optimize all of them too. To insure that an optimized images colors are cross-browser compatible, make sure you convert any images with an embedded color profile other than srgb before you save for web. Convert to srgb option is default.
Optimize xmp Metadata
You can choose what xmp Metadata saves with your optimized file from the Metadata Menu. Metadata is only partially supported by gif/png formats and fully supported by jpeg. options:
Photoshop Image Optimization Metadata Optimization Menu Screenshot
None: no Metadata saved, smallest file size.
Coypright: Saves copyright notice, rights usage terms, copyright status, and copyright information url.
Copyright and Contact Info: Saves all copyright information, plus creator, creator job title, email(s), address, city, state/province, postal code, country, phone(s) and website(s).
All Except Camera Info: Saves all xmp Metadata except exif data, which holds camera settings and scene information.
All: saves all xmp Metadata.
Save your optimization settings as a named set and apply them to other images; they’ll appear in the Preset Menu.
Note: If you have an image with any embedded color profile other than srgb, convert the image’s colors to srgb before saving for the web.
You can preview optimized images in any browser that you have installed, simply click the browser icon at the bottom of the Save For Web & Devices dialog box. I had no browsers in the pop-up Menu, so I added some, for clarity’s sake. I selected Firefox and sure enough, an instance of Firefox fired up and displaying the image preview, as well as a caption listing the image’s file type, dimensions (px), size, compression specifications and any other settings it is using.
Photoshop Image Preview and Caption Screenshot in FirefoxPhotoshop Image Preview Browsers Menu Screenshot from the Save For Web Dialog
Compress an Image to a Specific Size
When saving for Web & Devices, select the tab with the desired display option, at the top of the dialog box. Then select Optimize To File Size from the Optimize Menu (right of the Preset Menu), enter the desired file size and select a Start With option. The Auto Select gif/jpeg Start With option automatically selects the optimal format, depending on the image’s content.
Saving Images for Email
Photoshop also allows us to save files for email, simply click the Optimized Tab in the Save For Web & Devices dialog box and select jpeg Low from the Preset Menu. Select the chainlink icon to the right of the dimension size boxes to retain image proportions and then enter 400 pixels into the width. Adobe recommends this size, however I don’t and neither do i recommend optimizing for email, at least for my purposes. I’m sure there are good reasons to it, I’m just not aware of any.
All of this information was found using this resources.
The only reason I’ve ever been against an ajax driven site is because the content is not accessible to the bots, thus seriously limiting your seo and findability capabilities. Google has come up with a solution to make ajax driven sites crawlable, and by following their easy guide, my reasoning against ajax sites is completely misguided. Below is my interpretation of the guide, but you can check it out in its entirety here.
Supporting ajax Crawlability Scheme
You need to let the bots know that you support ajax crawlability scheme, and you do this simply by adding a ! after the hash fragment. Simply adding ! after the # in your url completes your sites adoption of the scheme and your site is now considered ajax Crawlable.
Add _escaped_fragment_ Support to Your Server
You need to provide html snapshots of your url so the bots can see your content. Essentially we want the bots to see the url www.example.com/ajax.html?_escaped_fragment_=key=value instead of what users see www.example.com/ajax.html#!key=value. We accomplish this by using 1 of 3 methods;
Recreate your content using a headless browser
Recreate your content by replacing your client-side JavaScript with server-side code
Enable Crawlability in Pages Without Hash Fragments
In order to make pages without hash fragments crawlable, simply add this metaelement in the document’s head section. It tells the bots to crawl the ugly version of this url.
<meta name="fragment" content="!" />
Update Your Sitemap
Update your existing sitemap so that all of the crawlable urls that you want indexed are indicated there. See, I told ya’ll this was easy.
The metaelement allows authors to attach additional information (representing metadata) to their documents. This information can be used by the user agent for rendering content, it can provide meta information for indexing, it can be used to simulate http Response Headers, and it also can be used to reload the document. The additional information also represents various kinds of metadata that cannot be expressed using the title, base, link, style and scriptelements.
The metaelement belongs in a document’s head and has no content; its attributes define name/value pairs associated with the document. The metaelement information is machine-parsable (read: machine tags and all browsers expose meta information via the dom. These name/value pairs can be used by the server to further define the document type to the user agent.
The metaelement is a void element: an element whose content modelnever allows it to have contents under any circumstances; It requires exactly one of the attributes of name, http-equiv and charset must be specified. If the name or http-equivattributes are specified then the contentattribute must also be specified, otherwise omit content.
html5, whatwg and the dcmi are all working to create a standard lists of meta properties, however currently none exists.
name="" Attribute
The name=""attribute is the name in the name/value pair and represents document-level metadata. This representation specifies what aspect of metadata is being set. If the content=""attribute is omitted then the value of the name/value pair is an empty string. If not provided, the name of the name/value pair is taken from the http-equiv=""attribute.
The name=""attributemust be a defined metadata name or a registered metadata name. name IDL attributesmust reflect the respective content=""attributes of the same name.
w3c Defined Metadata Names
application-name: the value of the content=""attribute must be a string representing the name of the Web App the page represents. If document is not a Web App, don’t use it. Cannot have more than one per document. User Agents can use application name in ui instead of the titleelement because title could have status messages, etc. relevant to the status of the page at a particular time.
author: value of the content=""attribute must be a string giving the name of the author(s) of the document.
description: value of content=""attribute must be a string describing the page. Must be appropriate for use in a search engine. Document cannot have more than one.
generator: value of the content=""attribute must be a string identifying software used to generate the document. Do not use this value on hand-authored pages (notepad denied!).
keywords: value of content=""attribute must be a set of comma-separated strings, where each string is a relevant keyword to the document.
w3c Other Defined Metadata Names
keyword: actual name being defined; should not be similar to any other defined name (like differing only in case).
brief description: short, non-normative description of what the metadata name’s meaning is, including the format the value is required to be in.
specification: link to a more detailed description of metadata name’s semantics and requirements.
synonyms: list of names that have exactly the same processing requirements. do not use the named defined to be synonyms, they’re only intended to allow user agents to support legacy content. Synonms not in practice can be removed, only names that need to be processed as synonyms for compatibility with legacy content are to be registered this way.
status: has three possible values: proposed, ratified, and discontinued
name="status" content="proposed": name has not received wide peer review and approval; name has been proposed and is or soon will be in use.
name="status" content="ratified": name has received wide peer review and approval. its specification unambiguously defines how to handle pages using the name including when used incorrectly.
name="status" content="discontined": metadata name has received wide peer review and has been found wanting. May be in use on existing pages, but new pages should not used it. If anything, “brief description” and “specification” entries give details of what the author should use.
whatwg Registered Metadata Names (technically none so far)
baiduspider – synonym for robots targeting Baidu only.
googlebot – synonym for robots targeting Googlebot only.
ia_archive – synonym for robots targeting Archive and Alexa only.
msnbot – synonym for robots targeting Bing only.
robots – comma-separated list of operators telling search engine bots how to treat content.
slurp – synonym for robots targeting Yahoo! only.
teoma – synonym for robots targeting Teoma and Ask.com only.
viewport – allows documents to specify size, zoom factor and orientation of the viewport used as the base for document’s initial containing block. The following properties can be used in the value of the content=""attribute: width, height, initial-scale, minimum-scale, maximum-scale, user-scalable.
audience – aids search engine classification and aids directory compiliations by providing the audience most appropriate for the page. Values are case-insensitive and comma-separated (singular and plural values are equal).
bot- – represents all bots prefixed with bot-.
created – document creation datetime (ISO8601 date); must follow w3c ISO-8601 datetime profile with a granularity of “complete date” or finer.
creator – off-Web/pre-Web creator of a work for which an author authored a document, so the creator and author can be different people. One element represents one creator; multiple creators need to be represented by multiple creator elemetns.
datetime-coverage – value is a non-vague date or non-vague time (not a range) expressing which time frame is most relevant to the content.
datetime-coverage-end – identical to datetime-coverage except only representing the end. When used without datetime-coverage-start, it is interpreted as ending a range without a start.
datetime-coverage-start – identical to datetime-coverage except representing only the start; if used without datetie-coverage-end, is interpreted as starting a range with no end.
datetime-coverage-vague – identical to datetime-coverage except its value is not clear; use when datetime-coverage, datetime-coverage-end, datetime-coverage-start are all inappaproiate (example: Tuesdays).
DC – stands for Dublin Core, maintained by the dcmi, reserves all strings that begin with DC..
dir-content-pointer – helps search engines organize results by identifying similar sections of pages in a directory with a standard vocabulary. Useful when using different conventions for displaying or printing content. Recognized values are pointer types to which numbers may be suffixed: start, toc (table of contents), intro, abstract, main, bibliography, index, afterword, update, credit and author bio. Number suffixes tell the search engine/directory to arrange like itmes in numerical order within the results. Each directory and subdirectory has its own sequence.
expires – defines expiration date of the document which can be used in preparation for an upcoming event (when you have a pre-set date when the document will no longer be valid, like a sign-up form for an event). Search engines should remove this page from their main search results after the expiration date or by telling the user the result is out of date.
format-print – informs operating system/printer driver of the preferred print medium (like paper size). Recognized values are letter, A4, legal, A5, B5, monarch, envelope 10, envelope 6-3-4 as well as values with integers and decimals, like 8.5 x 11, paper (default color), weight (usually 20lb. stock). You can specify a medium of the given color or mixed by using white, yellow, pink, blue, green, violet or multicolor. Letterhead, p2 letterhead (letterhead for all pages minus first page), watermark and plain (not preprinted/not letterhead).
geographic-coverage – specify geographic relevance of content.
keywords-not – negative keywords that distinguish closely-related themes from a document’s theme. Supports Boolean not searches.
page-datetime – tells search engines recency or relevance to an event date.
page-version – Versions regardless of date may show consecutiveness and can replace vague dates; a version number can be more useful in this case. Versions 0 and 0.n signify beta versions, where .n is number of places and 1 or higher implies final-release versions.
publisher – provides the document’s publisher, which often differs from creator/author when the publisher is an institution.
referrer – controls the sharing of referrer information with linked resources and followed links at the meta level. The content attribute accepts three values, always, default (include referrer information in non-secure conext or for https resources with same origin) and never; The never value is redundant with link rel="nofollow" and supplants said link element, which provides more control.
resolutions – specifies high-resolution versions of images that the browsers should use in place of lower-resolution default images if a high-resolution screen is detected to be in use.
rights – used to assert intellectual property rights in source code.
rights-standard – enable search engines to compile the types of rights allocated to the document; the example belows implies that the Page code is cc By Attribution, Share alike
subj-... – To classify by subject a page’s content, a standard subject taxonomy that will be recognized by a search engine or directory will help. Because many such high-quality taxonomies exist, only a prefix is proposed. Over time, particular taxonomies, in print or online, may be recognized here and keywords assigned for each.
MSSmartTagsPreventParsing – ie6 beta feature allowed browser to add information that wasn’t supplied by the document; this prevents that.
meta Pragma Directives
The http-equivattribute is an enumerated attribute (taking one of a finite set of keywords), and if a meta http-equivelement is present within the document, the user agentmust run the algorithim appropriate for that State. keywords and appropriate algorithims below:
State Content Language maps to keyword content-language; Content language state (http-equiv="content-language"): this pragma sets the pragma-set default language; until successfully processed, there is no pragma-set default language.
note: this will trigger a warning in validators, use langattribute instead.
State Encoding Declaration maps to keyword content-type; Encoding declaration state (http-equiv="content-type") alternative form of setting charset=""attribute; is a character encoding declaration. Encoding declaration state’suser agent requirements are entirely handled by the parsing section of the specification.
State Default Style maps to keyword default-style; Default style state (http-equiv="default-style"): this pragma sets the name of the default alternative style sheet.
State Refresh maps to keyword refresh; Refresh state (http-equiv="refresh"): pragma acts as a timed redirect.
State Cookie Setter maps to keyword set-cookie although Cookie Setter is non-conforming; Cookie setter (http-equiv="set-cookie"): pragma sets http cookie. Is non-conforming, you should use real http Headers instead.
Pragma Directive http-equiv="" Attribute
The http-equiv=""attribute is the name in the name/value pair; tells the server to include said pair in the mime document header that is passed to the browser before actually sending the document. When the http-equiv=""attributee is used, the server adds these name/value pairs to the content header it sends to the browser.
The http-equiv=""attribute is restricted to these values: refresh, default-style and content-type in html5.
http-equiv="refresh" Pragma Directive
The http-equiv=""attribute whose value is refresh represents a pragma directive specifying either a number of seconds after which to reload the current page, or a number of seconds after which to reload a different page and the url for the replacement page.
meta http-equivelement attribute whose value is default-style represents a pragma directive that specifies the document’s preferred stylesheet. content=default-style-name where default-style-name is the name of the preferred stylesheet and must either match the value of the link title="name" that also has href=""attribute referencing the location of said stylesheet or, the names must match the value of the style title="name" whose contents are a css stylesheet.
meta http-equivelement attribute whose value is content-language represents a pragma directive specifying a document-wide default language; this is obselete, specify the language on the root element instead.
meta http-equivelement attribute whose value is content-type and has an accompanying content attribute and value represents a character encoding declaration.
meta http-equiv="content-type" indicates the meta element is in the encoding declaration state and represents a character encoding declaration.
meta http-equiv="content-type" content="meta-charset string" is a specially formatted string providing a character encoding name whose value is content-type and which has an accompanying content attribute and value is said to be in the encoding declaration state.
Non-standard meta http-equiv Values
Allow
Content-Encoding
Content-Language
Content-Length
Content-Type
Date
Expires
Last Modified
Location
Set-Cookie
WWW-Authenticate
content Attribute
The contentattribute is the value in the name/value pair. The value can be any valid string and should always be used in conjunction with a name or http-equivattribute. It gives value of the document metadata or pragma directive when the metaelement is used for these purposes. The content contains the actual metadata defined by the The nameattribute.
The charsetattribute specifies the character encoding used by the document (aka character encoding declaration). It has no effect on xml documents, and is only used to facilitate migration to/from xhtml. The charsetattribute represents a document’s character encoding declaration when an html document is serialized to string form. There must be no more than one meta element with charsetattribute per document.
The charsetattribute represents a character encoding declaration, where charset="name" specifies a character encoding name specified by the iana registry that has a Name or Alias field labeled as “preferred mime name“, or if none of the Alias fields are so labeled, a Name field in the registry.
scheme Attribute
The schemeattribute defines the scheme that should be used to interpret the property’s value, which should be defined within the profile specified by the profileattribute of the headelement. It provides additional information about the meta information; used in conjunction with the profileattribute of the headelement (which provides a pointer to instructions about the contents of the profile which are directly related to meta name attribute values). The value of scheme is a uri specifying the location of the profile information on the server.
The schemeattribute is obselete; use only one scheme per field or make the scheme declaration part of the value.
Universal Subtitles is an easy way to, you guessed it, add subtitles/captions to your videos. With an intuitive interface that guides you through 3 minimal steps, Universal Subtitles is incredibly easy to use. Actually it’s only downfall is that it’s JavaScript based, and there is no fallback if users are running without. Not having a non-JavaScript fallback is a major red flag for any client-side solution, don’t ever forget that. That said, its a great first step to adding Accessibility into your content, while also furthering your content’s reach and possibly getting user/community involvement.
By adding subtitles/captions to your videos, you are adding a layer of Accessibility to your content. In laymens terms, people with hearing disabilities have no clue what your video(s) are trying to get across to them. Congratulations, you have just added the equivalent to a handicapped-accessible entrance to your video’s content. Naysayers dismiss this percentage of web users, the same way they dismiss the non-JavaScript percentage: at such a small number, who cares right? Wrong. This is the World Wide Web people, that’s 6 billion+ and growing. The smallest percentages are actually quite a lot of potential users (read sales), as @slicknetpointed out on the ydn blog last year.
Adding subtitles/captions increases your content’s reach by…making your content more Accessible. These are really deep thoughts, I know; actually, they are so simple, it’s always quite baffling to me when I hear people rail against them. Look, now that you’ve added your layer of Accessibility, you’re also now providing content to people who are interested in what you are saying as well. Furthermore, you’re also providing this content in two more ways than before: text on screen, and (if you choose to), print. You just tripled your content without having to provide new content. get it? An added bonus is that one of the few areas of search that I think are still wide open for someone to gobble up, is video search. Go back and read that sentence about tripling your content again.
Lastly, Universal Subtitles has a widget (that could be more accessible) that you can use to allow users to play around with your video(s)/content. While the old guard will most “protect” their weak-ass “intellectual rights” and fight this to the bitter end, you can chose to embrace this and reap the benefits. For example, the demo I made for this post is a video about Firefox, an open source project that I hold near and dear to my heart. I have added subtitles/captions to it because I wanted to. Mozilla released the video “The Story of Firefox” to the public domain, and just like karma, it came back to them: they get free work, and all the benefits that I’ve listed above, simply by doing what is right.
Note: the demo works lovely in Firefox 4, unfortunately I used an ogv file and the uber lame Chrome is having problems with it. I’ll address this as well as the underlying widget’s JavaScript, css, html, here in another post shortly. So, I’m lame and you need to use Firefox at the moment.
