Preventing Pinterest “pinning” of your content

While many people are happy when images from their websites get “pinned” on Pinterest, there are many times that you might not be so pleased. You may have a need to prevent images from being shared for copyright or similar reasons, or simply not want the extra website traffic.

Thankfully, you can stop this with the addition of a simple HTML META tag. Also, if you already use CloudFlare, they can add it for you at runtime!

<meta name="pinterest" content="nopin" />


Content-Security-Policy HTTP Header

There’s yet another new means to ‘help’ client User-Agents with preventing XSS on your websites.

In it’s simplest form you can simply use the following HTTP Header(s), the second one is for earlier versions of Webkit (Chrome/Safari):

Content-Security-Policy: default-src 'self'
Webkit-CSP: default-src 'self'

You can also add to the above to permit assets to load from other sources.
For example, if you were to permit javascript files from you could include:

Content-Security-Policy: default-src 'self'; script-src

Additionally, while failures are noted in the client’s browser console (that most users are not aware of), you can have them sent back to your server by adding a ‘report-uri’ attribute with an appropriate handler:

Content-Security-Policy: default-src 'self'; report-uri


MSIE7+ image resizing interpolation

MSIE7 and later by default use an image resizing algorithm that means that scaled down images can look blocky and rasterized. To solve this and make them smoother, we simply enable a much better resizing algorithm that is available in MSIE that produces results similar to what you’d expect from most image editing software.

/* bicubic resizing for non-native sized IMG */
<style type="text/css">
img { -ms-interpolation-mode: bicubic; }

Data URL’s (aka HTML Inline Images)

Here’s a useful trick for minimizing server HTTP connections, unfortunately it’s not universally supported so you will need to provide alternate methods for non-supporting browsers (such as MSIE).

This works by placing the content of the image into the URL itself, as such there’s no need to open up a new server connection and no extra caching at any tier.

<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″ alt=”embedded folder icon” width=”16″ height=”14″ />

Open Source Image Editing Software

I’m usually a considered by most to be just a “programmer”, but occasionally the need comes up for someone to edit or create an image for a project. I might not be a designer, but I still need similar tools to accomplish this, but can’t justify the cost of Adobe Photoshop & Illustrator.

Here are some great (if not better) alternatives that are FREE and available on a variety of operating systems, not just Windows and Apple Macintosh.

GIMP – is an acronym for GNU Image Manipulation Program. It is suitable for a variety of image manipulation tasks, including photo retouching, image composition, and image construction.

Currently Supports:

  • GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP and many others.

It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

Inkscape – is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets it apart is it’s native use of Scalable Vector Graphics (SVG), an open XML-based W3C standard.

Currently supports:

  • opening only SVG and SVGZ (gzipped SVG) formats.
  • save as SVG, SVGZ, Postscript/EPS/EPSi, Adobe Illustrator (*.ai), LaTeX (*.tex), and POVRay (*.pov).
  • import most raster formats (JPG, PNG, GIF, etc.) as bitmap images, but it can only export PNG bitmaps.
  • With the help of extensions, Inkscape can open/save as PDF, EPS, AI, Dia, Sketch and some others.

Together this suite can tackle most work that previously required costly software that isn’t available on many Operating Systems.

Happy drawing!

MSIE6 background-image caching (or lack of it…) and flickering

This has been an annoyance of this (IMHO very buggy) browser since it was first beta tested. Earlier (5.x) and newer (7.x) versions do not exhibit this problem.
For some reason Microsoft developers broke the caching mechanism for background images, particularly when defined in CSS. This makes for slow screen painting as well as wasted network traffic as each occurrence of the image becomes a new HTTP request to the webserver. This also causes a notable delay in those images painting on the screen and ‘flicker’ when the images are used in CSS rollover effects. Since the image obviously isn’t changed it results in many ‘HTTP 304 Not Modified‘ entries in the server logs.


1. You CAN/SHOULD set the Expiry for the images, however this can be problematic. Since I typically run Apache HTTPD, those instructions follow:

a) Set an explicit expiry time based on MIME types in the http.conf file.

[instructions in separate post]

b) Enable .htaccess for the server and allow its usage in individual folders on the server.

[instructions in separate post]

c) Use client-side technologies to hack around the problem…. you can use many CSS tricks, but I’ve found that JavaScript is the easiest (most compatible) method.

Add the following to a method executed in the onload event of the page…

<script type=”text/javascript”>
try {
document.execCommand(‘BackgroundImageCache’, false, true);
} catch(e) {}
NOTE: MSIE will execute the Javascript, Mozilla and other browsers will throw an exception and wind up in the catch block… which ignores the problem.

With the use of conditional comments, this can be added to an MSIE specific JS file, or even better an MSIE specific CSS file containing the following:

html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));