I love css Sprites so I was quite dismayed to read about problems with iPhone 4 Retina Display (High dpi) and problems with accessibility, both of which will stop a standardista dead in their tracks. Retina Display is a user-agent feature and as such should at least be used to progressively enhance the ux, not degrade it! User-Agent Features are seen as bothersome and/or afterthoughts in most circles, however they are vital for creating unique browsing experiences for each applicable unique user-agent setting. The accessibility issue is a no-brainer, it must be resolved; Accessibility should be a part of your work-flows and not an afterthought. One thing about the bad accessibility in particular stood out to me:
In conclusion, the only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative content. If sprite maps are required then consider using inline positioned sprite maps.
Responsive Design via css media-queries is a principle of progressive enhancement that is a staple of Front-End Engineering and for the most part solves all cross-browser and cross-platform issues. By applying rwd via media-queries, it occured to me that you could use the sprites still, but apply it to inlineimg‘s via clipproperty. Then to alter the clipproperty style settings via media-queries, swapping bigger images for bigger resolutions. It works like a charm, although I’m not sure how accessible they are. You can view the demo here
Image Search is one aspect of Web Development typically overlooked by the vast majority of developers. While it may seem a distant second to the primary goal of Search, it’s actually not that far off. Image naming conventions, when properly applied, can aid in a sites Search, Searchability and Findability.
Typical image naming conventions in Web Development include image-01.png or even worse blargherghdadurpdedoo.png; while they do serve as a unique identifier and therefore conform to their primary purpose, they can be utilized for much more by providing machine-readable text that can be understood by bots when crawling your site(s). Bots have no clue what the below image is:
Bots crawling your site will now index this image with reference to “Jordan Dunking vs. Lakers”, which provides an extremely more relevant and detailed description than “23432asaere”.
Apply the kiss Principle here: don’t overthink your file names, thereby (even if not intentional) spamming keywords via your file names. I like to rely on two or three word names for images.
Image Naming Rules
Separate words with hyphens (-)
Using at most two or three keywords
Use only alphanumeric characters and hyphens in file names, not underscores (_), spaces (, or special characters
Use descriptive Directory Naming Conventions in tandem with Image Naming Conventions
Added Benefits of Precise Image Naming Conventions
Image Naming Conventions also will aid in a sites Information Architecture, organizing files and directories to benefit your development team, as well as users and bots. Your team can also use them to track document versions, like so:
<img src="screenshot-issue-11-04-2009-001" />
Adding Precise Image Naming Conventions to Workflows
Adding image naming conventions to your workflow(s) is extremely easy and should not be overthought. Simply think about what an image is before you name it. If the image is part of a set, think about suffixing a number to the end of all the images in the set, or putting them all into a directory, that aptly names the set. It’s really that simple, and you’ll greatly benefit by making this part of your development process instead of a post development afterthought.
Instant Pages is a new feature by Google which enables prerendering, where the browser grabs and caches most (if not all) likely documents required where the user goes next.
In Chrome 13+, Prerendering allows author’s to dictate which assets/resources are most likely to be necessary for the continued ux.
Prerendering is actually an extension of Firefox’s prefetching; Prerendering fetches all of the necessary resources of the next document.
Note: unlike Firefox, Chrome does not support meta-http and http headertriggering methods.
As noted, Firefox supports prefetchingvia linkelement which instructs user agents to begin fetching the top-level resource at the url. There are comments about prefetching‘s weaknesses, but I’m going to chalk that up to the cadre of markup illiterate developers and their awesome enterprise code. When used properly, prefetching can lead to a continued ux too.
How to Trigger Prerendering
Trigger prerendering is apparently not so easy to do; it’s only useful to a site with a high degree of certainty of where their users will click next. Trigger prerendering incorrectly can cause the user’s selection load times to actually increase.
Authors can trigger prerendering by simply dropping an link rel="prerender"element into the markup and Chrome follows it, like so:
I’m kind of speechless at that statement. How is that possible? Since it is, I’m going to assume “sites” that practice the black arts will be able to sabatoge your determined prerendering strategy by “telling Chrome” to prerender the wrong documents. That is completely speculative and with no proof, however, the documentation’s explanation is so vague, it leaves me to wonder.
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.
link rel="prefetch" directs the browser to begin loading the image specified by href="" once the current document has completely loaded. When the user directs to the page (hopefully it’s next, but not necessarily) that has prefetched images, you have one less request necessary to make that page load.
