Should You Use .svg Images in WordPress Posts?

Graphics make blog posts and web pages better. A picture is worth a thousand words—but including pictures on the web is harder than it should be. There is a whole alphabet soup of formats, graphic features such as transparency, different resolutions and the dreaded browser compatibility. Wouldn’t it be nice if creating and publishing graphics was as straight-forward as publishing text?

New and Improved: .svg or Scalable Vector Graphics

.svg images WordPress

.svg images in WordPress are here! This is the official .svg logo (in .svg format) served up from this blog’s media library using the Safe SVG plugin.

I’ve been tracking .svg for some time. .svg format stands for “scalable vector graphic,” which is described in a W3C specification. The format provides a modularized language for describing two-dimensional vector and mixed vector/raster images.

As of February 2017, .svg delivers numerous advantages for designers and developers alike. .svg images are supported by most browsers. The files are tiny compared to it’s .png and .jpeg brethren. And there are multiple tools, including my favorite graphic design tool, Sketch 3, that save files to the .svg format.

The advantages of .svg come from an industry standard format that comprises (1) vector graphic shapes (e.g., paths consisting of straight lines and curves), (2) raster images and (3) text that display beautifully in all modern browsers. In other words, the .svg image file contains instructions for rendering images at any resolution rather than compressed rasters. And for the designer and webmaster, this means you have a single tiny file to manage rather than exporting 1x, 2x and 4x versions from a graphic tool which need to be managed in a CDN or media library and delivered to desktop, mobile and retina displays based on the viewport setting…very, very complex.

With the advantages of broad compatibility, tiny files and simplicity, it’s time to make a switch. Or is it?

.svg Images in WordPress…Not For the Masses…Not Yet

As of February 2017, WordPress doesn’t officially support .SVG images. Sure it’s easy to enable SVG in your WordPress instance through a function or a plugin. But if it’s easy to support the .svg image format, why isn’t support included in WordPress core?  The answer: security.

It turns out that the .svg format is more of a document format than an image format. That means you can embed all sorts of things in a .svg file. This includes JavaScript. So that seemingly benign graphic could easily contain a not-so-benign script that hijacks visitors, data and web experiences. Not so good. And with 25% of the web running on WordPress, the core development team prioritizes security and reliability over simplicity. The four years of engineering debate is visible to all in WordPress Trac ticket 24251.

.svg Images in Controlled WordPress Sites: Bring On .svg!

In sites where only skilled web designers and publishers with a strict file chain of custody procedure, the advantages of .svg can be realized today. For security, I strongly recommend that you think twice about deploying .svg support by hacking the functions.php file and or using the less secure plugins that you can easily find in the WordPress Plugin Directory.

Instead, focus first on training and procedures to mitigate potential risks from .svg. Just as you wouldn’t let anybody upload JavaScript to your site, you shouldn’t let just anyone upload .svg files to your site. The first and safest approach is to let savvy designers include .svg files in theme assets:

  1. Produce your own .svg files or review code in files provided by others
  2. Run the .svg file through a sanitizer, like DOMpurify
  3. Save the resulting code locally.
  4. Add the .svg file to your CDN or production file system
  5. Directly reference the sanitized file with CSS or HTML code <img src="/blah/file.svg" />

How About Media Libraries?

Enabling the media library opens more risk. If you are ready to limit access to the media libary using WordPress user roles, the risks should be manageable. There is one .svg plugin I can recommend today: Safe SVG by Daryll Doyle. It not only enables the .svg mime type for the media library, but it sanitizes .svg files on upload. The plugin is young but works. And developer Daryll Doyle is actively developing Safe SVG. He deserves our support!

.svg has a bright future for web publishers who value great user experiences with content and compatible graphics files that are simple to manage. Let’s embrace a secure future for SVG and WordPress.

Create Web Content That Gets Noticed With These 5 Tools

We all know that content management systems makes it fast and easy to publish to the web. Fast and easy, however, isn’t the same as optimal. Optimal is harder to achieve—and squishier to define. On the web it means you have to think about multiple variables: your audience, text, images, search engines, standards, guidelines, technology and a lot more. The good news: it’s pretty easy to get started.

Your reader comes first. Period.

This should be obvious. You are publishing content for your audience. You are trying to inform, educate, persuade and amuse your audience. But when traffic or ranking on search engines is lower than you’d like, it’s tempting to make changes that negatively impact your audience in the hope of a short term traffic boost. My advice: don’t do it. Earning a loyal audience and avoiding penalties are two good reasons to take the high road.

Earning a loyal audience

If you’re like most web site owners, you want the audience to visit more than one page. Perhaps you want them to buy something or register for update or browse other content on your site or return again in the future. That first visit is your chance to earn trust and loyalty. If you think it’s hard to get somebody to your site, just wait until you learn how hard it is to keep them on your site or to convert from an anonymous visitor into a potential customer. Yes you need to get people to your site, but success requires planning for a journey, not just a single step.

Avoiding search engine penalties

Search engines have the power to reward and to punish publishers. Remember, they’re competing for users and trust just like you are. The are continuously tweaking and improving algorithms to present the best and most relevant information to users with each and every search. So when a page or an entire site is employing tactics that inflate the relevance of your content, you may get a short term improvement in your rankings and visits.

Users and search engines are smart. Users will abandon pages with weak content (called pogo-sticking). Search engines will take notice of sketchy practices and issue algorithmic or manual penalties. If your site relies on search engine traffic for revenue, getting penalized will be very painful. Future traffic could drop by 20% or more. And even after you clean up the user un-friendly tactics, it will take weeks or months to regain the trust of a scorned search engine vendor.  Those are significant costs and effective deterrents for mainstream site owners.

The flip side of penalties are rewards.  Following Quality Guidelines will not only let your avoid penalties, it will reward you with engaged readers and higher rankings in search engine results pages. Surprisingly few people have read Google’s quality guidelines. Fewer have put them into action. And even fewer still embrace these guidelines consistently across their site and content. That is your opportunity. Below are five tools that help authors succeed at publishing content that gets noticed by readers and search engines alike.

5 Tools for creating irresistible content that gets noticed

Below are several of my favorite tools that help you create elated and sticky users and sites that are easy for search engines to crawl, parse, index and rank highly in search results. These tools focus on “on-page optimizations” which means that each page you create is ready for consumption by readers and search engines. “Off page optimization tools” which focus on building site-wide credibility and links are beyond the scope of this article. All of the recommended on-page optimization tools have free versions. Some have extremely useful professional editions that are worth evaluating.

1. Yoast SEO

Yoast SEO is an excellent plug-in for WordPress and Drupal that helps authors follow on-page search engine optimization best practices.

Get Noticed: Yoast SEO

 

Incorporating this tool into the writing/editing/publishing workflow is super easy for everyone from authors to content strategists, blog editors and WordPress administrators. Use this tool before publishing posts to validate that the content is set up for success across multiple dimensions. Yoast SEO uses the idea of a “focus keyword” as an organizing principal. It then provides guidance to authors for improving the content for robotic search engines crawlers such as increasing article length, incorporating useful hyperlinks and subheadings and crafting optimized meta descriptions. Now it’s even better because of 2016 improvements for post readability. Yoast SEO provides helpful and light-handed readability suggestions by scanning your content for long sentences, passive voice and use of transition words.

Yoast SEO also does a ton behind the scenes optimizations too. Webmaster best practices such as maintaining sitemap.xml and robots.txt files happen without direct intervention from authors, editors, administrators or theme designers.

2. ImageOptim

ImageOptim is a free and open source MacOS app that strips images of extra pixels and unneeded meta data. This is extremely important because photographs, stock images and even images created in tools like Photoshop include a lot of information that isn’t needed by image consumers. Extra information results in bloated files that download slowly. The result is small image files that render beautifully and transfer across the internet quickly.

Get Noticed: ImageOptim

Adding ImageOptim to your workflow is super simple. Once you’ve downloaded and install the app, add the icon to your Mac’s dock. Before adding new images to your post, drag it onto the docked icon. The reduced-size file replaces the original. Lossy compression is a available as a user preference if you want to reduce file size even further.

3. Web Developer Extension for Chrome

Web Developer is a Swiss Army Knife of web development tools used by just about every experienced web developer and publisher—and you should start using it too. Your initial focus should be on using the extension to run validation tests using the W3C validation engines for your HTML and CSS code plus any links that are on your page.

Get Noticed: Web Developer for Chrome

Many HTML and CSS errors are benign. Others cause pages to render poorly. Poorly formatted pages discourage users and diminish trust. The same is true of hyperlinks. Nothing frustrates a visitor more than clicking on a link and not getting the desired payload.

4. SEOQuake Browser Extension for Chrome

SEOQuake presents a consolidated audit of SEO metrics and ranking factors for published pages.

Get Noticed: SEOQuake

It gives you information about how easy your pages are to be indexed along with useful information on effective keywords. Not only does SEOQuake help you evaluate your own site and pages, but it’s highly useful for evaluating how effective your competitors are at creating irresistible pages.

5. Google PageSpeed Insights

Google PageSpeed Insights is a web application focused on the all-important page load time. You provide it with a URL and it identifies fixable elements on your pages for improving performance on desktop and mobile devices. Research studies suggest that in 2016 users prefer pages to load on any device in 3 seconds or fewer and that pages that take more than 5 seconds to load risk abandonment. What’s more, Google uses page load time as a ranking factor.

Get Noticed: PageSpeed Insights

The tool presents a numeric score for your pages, but the real value is in the detail. Drill in to learn where PageSpeed bottlenecks are and how to fix them. The report is a gold mine of issues that are generally easy for authors to fix, like compressing images with ImageOptim.

There’s a lot more you can do but I strongly recommend start with a “high road” philosophy and this initial set of tools. Take the time to learn their features. Figure out how to incorporate the tools into your publishing workflow. And, when you have a few moments, you should also run these tools on previously published pages.