    
|
The Protocols and Formats Working Group (PFWG) today published the WAI-ARIA 1.0 User Agent Implementation Guide as a Candidate Recommendation. It describes how browsers and other user agents should support WAI-ARIA (the Accessible Rich Internet Applications specification), specifically, how to expose WAI-ARIA features to platform accessibility APIs. Comments and implementations are welcome by 17 January 2014. Learn about the Web Accessibility Initiative (WAI).
]]>|
|
|
|
 |
Exporting images for the Web from one’s favorite graphics software is something many of us have done hundreds of times. Our eyes fixate on an image’s preview, carefully adjusting the quality and optimization settings until we’ve found that sweet spot, where the file size and quality are both the best they can possibly be.
After exporting the image — usually using a feature called “Save for the Web” — and having gone to all that care and effort, we would be forgiven for thinking that our image is in the best shape possible. That’s not always the case, of course.
In fact, much more data is usually left in such files, data that browsers have to download despite not requiring or even using it, data that keeps our users waiting just a bit longer than necessary.
Thankfully, a number of popular tools can help us optimize images even further, but which should we use? We assumed, for a time at least, that our graphics editing software properly optimized our files, but what do we really know about our image optimization tools?
If you’re not currently using any image optimization tool, I would urge you to choose one. Any is better than none. Regardless of which you choose, you will likely speed up your website and keep users happy.
To inform our work, I ran the most popular image optimization tools over a varied sample of images (kindly donated by Daan Jobsis via his “Retina Revolution” article), and I’ve published the results on GitHub.
The report shows us how much data each tool saves and how much quality was lost statistically. However, how great a loss in quality is noticeable and how much is acceptable will vary from person to person, project to project and image to image.
I’ve been using ImageOptim for many years, with ImageAlpha and JPEGmini joining it more recently.
With this trio, we have a specialist in JPEGs, another in PNGs, and a great all-round application, ImageOptim, which also supports GIF and other formats. Each uses different techniques to deliver impressive savings, but they complement each other when combined to offer better savings still.
ImageOptim beats any single lossless optimizer by bundling all of them. It works by finding the best combination of compression parameters and removes unnecessary comments and color profiles.
ImageAlpha is unique in its lossy conversion of PNG24 to PNG8, delivering savings many times bigger than popular PNG optimizers such as Smush.it and TinyPNG. The conversion even maintains alpha-transparency in all browsers, including on iOS and even in IE 6.
JPEGmini is a “patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.” The creators claim it reduces a file’s size by up to 80%, while maintaining quality that is visually identical to the original.
The savings are quite remarkable, but you will need to purchase the software to use it without restriction.
In terms of performance, the comparative data is reassuring, and to date I’ve been happy with my decisions. But there’s a real problem: all of these tools are GUI applications for OS X.
This has some benefits because everything is local. You don’t need to upload and download files to a Web server, so there’s no risk of the service being temporarily unavailable. This also means that your images don’t need to leave your machine either.
But at some point ahead of every launch, I had to remember to open each application, manually process new images, then wait for the tool to finish, before doing the same in the next application.
This soon gets tedious: We need to automate! This is why (with James Stout and Kornel Lesiński) I’ve created ImageOptim-CLI, automated image optimization from the command line interface (CLI).
Though other image optimization tools are available from the command line, ImageOptim-CLI exists because the current benchmarks suggest that ImageOptim, ImageAlpha and JPEGmini currently outperform those alternatives over lossless and lossy optimizations.
I wanted to take advantage of this.
Given a folder or other set of images, ImageOptim-CLI automates the process of optimizing them with ImageAlpha, JPEGmini and ImageOptim. In one command, we can run our chosen images through all three optimizers — giving us automated, multi-stage image optimization right from the command line.
This gives us the levels of optimization of all three applications, with the convenience of the command line, opening up all kinds of possibilities for integration with other utilities:
Do you know of other ways to integrate image optimization in your workflow? If so, please share your ideas in the comments.
The CLI can be downloaded as a ZIP archive or cloned using Git, but the easiest way is by running this:
npm install -g imageoptim-cliRunning all three applications before closing them afterwards can be achieved with this:
imageoptim --image-alpha --jpeg-mini --quit --directory ~/Sites/MyProjectOr you can do it with the equivalent shorthand format:
imageoptim -a -j -q -d ~/Sites/MyProjectYou will find more installation and usage examples on the project page on GitHub.
Earlier this week, I visited Myspace and found that 4.1 MB of data was transferred to my machine. With the home page’s beautiful magazine-style layout, it’s no surprise that roughly 76% (or 3.1 MB) of that were images.
I was curious whether any data could be saved by running the images through ImageOptim-CLI. So, I recorded the video below to show the tool being installed and then run over Myspace’s home page.
As you can see, the total size of images before running the command was 3,186 KB, and ImageOptim-CLI was able to remove 986 KB of data, while preserving 99.93% of image quality.
There is a companion Grunt plugin for ImageOptim-CLI, called grunt-imageoptim, which offers full support for the optimization of folders and collections of images. It can also be paired with grunt-contrib-watch to run whenever any images are modified in your project.
Smashing Magazine has a great article for those who want to get up and running with Grunt.
Image optimization is an essential step in a designer’s workflow, and with so many tools to choose from, there’s bound to be one that suits your needs.
Data should bear heavily in your decision, so that you reap bigger rewards, but choose one that is convenient — using a weak tool every time is better than using than a strong tool sometimes. You’ll rarely make a decision in your career that doesn’t have some kind of trade-off, and this is no different.
If you’ve made it this far, I thank you for reading and welcome your questions, comments and ideas.
(al, ea)
© Jamie for Smashing Magazine, 2013.
]]>|
|
UMBC Training Centers received a $5,000 grant financed by the Economic Alliance of Greater Baltimore (EAGB) that will be used to defer tuition costs for students in the Cyber Operations Program. According to Tom Sadowski, President and CEO of EAGB:
“This contribution reflects EAGB’s commitment to growing the cybersecurity industry and talent base within the Greater Baltimore region. There are thousands of cybersecurity jobs available for highly motivated and trained individuals. The students that complete the Certificate in Cyber Operations program at UMBC Training Centers Cybersecurity Academy are ready to analyze complex network architectures, determine threat exposure and implement appropriate defenses.”
The Certificate in Cyber Operations, starting on January 21, 2014, is an intensive 9-month, part-time program. Cyber Operations features a rigorous curriculum that delivers a focused set of skills reinforced by multiple industry certifications, including CompTIA Network+, CompTIA Security+, Cisco Certified Network Associate (CCNA) and Certified Ethical Hacker. This program is closely aligned with the recent National Institute of Standards and Technology release of the National Initiative for Cybersecurity Education framework.
]]>
UMBC Training Centers received a $5,000 grant financed by the Economic Alliance of Greater Baltimore (EAGB) that will be used to defer tuition costs for students in the Cyber Operations Program. According to Tom Sadowski, President and CEO of EAGB:
“This contribution reflects EAGB’s commitment to growing the cybersecurity industry and talent base within the Greater Baltimore region. There are thousands of cybersecurity jobs available for highly motivated and trained individuals. The students that complete the Certificate in Cyber Operations program at UMBC Training Centers Cybersecurity Academy are ready to analyze complex network architectures, determine threat exposure and implement appropriate defenses.”
The Certificate in Cyber Operations, starting on January 21, 2014, is an intensive 9-month, part-time program. Cyber Operations features a rigorous curriculum that delivers a focused set of skills reinforced by multiple industry certifications, including CompTIA Network+, CompTIA Security+, Cisco Certified Network Associate (CCNA) and Certified Ethical Hacker. This program is closely aligned with the recent National Institute of Standards and Technology release of the National Initiative for Cybersecurity Education framework.
]]>