Part of Sustainable Virtual Design includes compressing images and media for swifter delivery. Standard WPO includes compression of “rich media” as one of its schemes.
- Combine images with CSS “sprites” using tools like Spritepad
- Compress images
- Serve images adjusted to size of end user display
- Specify image width and height in HTML
- Replace bitmap formats (JPEG, PNG) with vectors (outline fonts dingbats, SVG)
- Use “lazy loading” of images as needed
- Use WebP instead of JPEG for high-resolution bitmap images
https://developers.google.com/web/fundamentals/media/images/optimize-images-for-performance?hl=en
While image compressors such as Smush-It are out there, newer versions of Creative Suite produce saved JPEGS and PNGs that are similar in size to the earlier compressors. To wring the very last bits out of images, check out the advanced tools in this review:
http://www.creativebloq.com/design/image-compression-tools-1132865
Font compression has also become more important, as more sites use custom webfonts:
https://zoompf.com/blog/2014/08/bootstrap-fonts
The one place where images weren’t well optimized is WordPress. Since WordPress accounts for nearly 20% of all websites in 2015, plugins which shrink images are valuable:
http://premium.wpmudev.org/blog/10-best-image-optimization-plugins-to-speed-up-your-wordpress-site/
What about PDFs?
However, there are other kinds of “rich media” besides images, audio and video that are often ignored in WPO. One common format that hasn’t been well addressed is Portable Document Format, or PDF. Introduced many years ago, they allow (print) documents to retain their formatting and (apparent) typefaces when delivered to people with non-designer workstations. They are valuable in workflow because (1) the recipient doesn’t need a design tool to read them, just a free reader, and (2) their files are typically smaller than those produced by an authoring program like Adobe Illustrator.
While PDFs are not used to build web interfaces (despite Adobe’s hope back in the 1990s that the would replace it), many sites do use lots of downloadable PDFs. Bloated PDFs are also less likely to be found by standard WPO scans.
There are a couple of ways to reduce PDFs. The first, is to use Acrobat (not the free reader). Under Windows, if you open in Preview Mode, and click File->Save As… you’ll note that one of the options is “Reduced Size PDF”. Saving and significantly reduce file size. You can also go under “Advanced Tools” to find a compression option. On a Mac, there is a slightly different method which involves using the Finder. The options supported include downsizing images and removing personal information and comments.
More below at WikiHow:
http://www.wikihow.com/Compress-a-PDF-File
The other option is to use an online compression tool. Out of these, “Compress PDF” seems the most intuitive.
http://smallpdf.com/compress-pdf
In short, any WPO strategy applied to a website should consider the PDFs provided by that site.
Update 2016
One problem with online PDF compressors is that they may set defaults you don’t want, in particular removing tags required for accessible and SEO-friendly documents. Therefore, you might want to use the PDF Optimizer panel in Acrobat Pro, and make sure under “Discard Objects” that accessibility tags are still present.
Thanks to Mike Gifford at OpenConcept for this. If anyone discovers that an online PDF compressor strips tags, let me know!
Good Old PowerPoint
Like PDFs, PowerPoint documents are widely shared. Layout of PowerPoint is less sophisticated then Acrobat, but the relative ease of use make it a choice for many non-designers. Like Acrobat, a site may contain a bunch of large downloadable PowerPoints which escape the normal WPO tests. Also like Acrobat, there are a couple of things you can do to reduce file size substantially.
First, compress those images. Newer versions of PowerPoint (using the tabbed horizontal layout) have an option under Pictures, as shown here:
Image from: http://www.brainshark.com/Ideas-Blog/2013/June/how-to-compress-powerpoint-file-size.aspx
More than Acrobat, PowerPoint users embed large audio and video files as part of their presentation. To compress them, you can use another built-in option.
There are some other hacks for PowerPoint which might compress the file, which may be useful if you must save in an old format:
http://powerpoint.wiziq.com/topic/504-6-tips-to-reduce-the-size-of-your-powerpoint-file
Even more than Acrobat, it is important to compress PowerPoint for efficient transmission. Otherwise, uploading to a service like SlideShare compresses while ensuring universal access.
Do you know if anyone has tested the accessibility of PDF’s after they have been compressed like this? I can see them stripping out all of the accessibility tags.
This is an excellent point. Access and efficiency are often mutually exclusive – optimization typically makes a system more opaque, in that its components are harder to differentiate.
For Acrobat, this is something that can be controlled, accd. to Adobe. One of the options under “Discard Objects” panel in PDF Optimizer removes accessibility tags. So, the default probably leads them in.
“Discard Document Tags: Removes tags from the document, which also removes the accessibility and reflow capabilities for the text.”
https://helpx.adobe.com/acrobat/using/optimizing-pdfs-acrobat-pro.html
This would be a good question to ask in one of the “sustainable Ux” Slack channels, e.g. http://uxpala.slack.com