diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js
index 6b8d24bbf0..f036b398c2 100644
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -9,9 +9,9 @@ goog.require('ol.style.Style');
 
 
 var iconInfo = [
-  {size: [55, 55], offset: [0, 0]},
-  {size: [55, 55], offset: [110, 86]},
-  {size: [55, 86], offset: [55, 0]}
+  {size: [55, 55], offset: [0, 0], opacity: 1.0},
+  {size: [55, 55], offset: [110, 86], opacity: 0.75},
+  {size: [55, 86], offset: [55, 0], opacity: 0.5}
 ];
 
 var i;
@@ -22,7 +22,8 @@ for (i = 0; i < iconCount; ++i) {
   icons[i] = new ol.style.Icon({
     src: 'data/Butterfly.png',
     size: iconInfo[i].size,
-    offset: iconInfo[i].offset
+    offset: iconInfo[i].offset,
+    opacity: iconInfo[i].opacity
   });
 }
 
diff --git a/src/ol/render/webgl/webglimage.glsl b/src/ol/render/webgl/webglimage.glsl
index ade5cb7446..5098ac2a3f 100644
--- a/src/ol/render/webgl/webglimage.glsl
+++ b/src/ol/render/webgl/webglimage.glsl
@@ -4,11 +4,13 @@
 
 //! COMMON
 varying vec2 v_texCoord;
+varying float v_opacity;
 
 //! VERTEX
 attribute vec2 a_position;
 attribute vec2 a_texCoord;
 attribute vec2 a_offsets;
+attribute float a_opacity;
 
 uniform mat4 u_projectionMatrix;
 uniform mat2 u_sizeMatrix;
@@ -17,6 +19,7 @@ void main(void) {
   vec2 offsets = u_sizeMatrix * a_offsets;
   gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);
   v_texCoord = a_texCoord;
+  v_opacity = a_opacity;
 }
 
 
@@ -24,5 +27,7 @@ void main(void) {
 uniform sampler2D u_image;
 
 void main(void) {
-  gl_FragColor = texture2D(u_image, v_texCoord);
+  vec4 texColor = texture2D(u_image, v_texCoord);
+  gl_FragColor.rgb = texColor.rgb;
+  gl_FragColor.a = texColor.a * v_opacity;
 }
diff --git a/src/ol/render/webgl/webglimageshader.js b/src/ol/render/webgl/webglimageshader.js
index 1d792306b6..f50e358d84 100644
--- a/src/ol/render/webgl/webglimageshader.js
+++ b/src/ol/render/webgl/webglimageshader.js
@@ -21,14 +21,14 @@ goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Fragment);
  * @const
  * @type {string}
  */
-ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n  gl_FragColor = texture2D(u_image, v_texCoord);\n}\n';
+ol.render.webgl.imagereplay.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  gl_FragColor.a = texColor.a * v_opacity;\n}\n';
 
 
 /**
  * @const
  * @type {string}
  */
-ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform sampler2D g;void main(void){gl_FragColor=texture2D(g,a);}';
+ol.render.webgl.imagereplay.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform sampler2D i;void main(void){vec4 texColor=texture2D(i,a);gl_FragColor.rgb=texColor.rgb;gl_FragColor.a=texColor.a*b;}';
 
 
 /**
@@ -57,14 +57,14 @@ goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.Vertex);
  * @const
  * @type {string}
  */
-ol.render.webgl.imagereplay.shader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\n\nuniform mat4 u_projectionMatrix;\nuniform mat2 u_sizeMatrix;\n\nvoid main(void) {\n  vec2 offsets = u_sizeMatrix * a_offsets;\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);\n  v_texCoord = a_texCoord;\n}\n\n\n';
+ol.render.webgl.imagereplay.shader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\n\nuniform mat4 u_projectionMatrix;\nuniform mat2 u_sizeMatrix;\n\nvoid main(void) {\n  vec2 offsets = u_sizeMatrix * a_offsets;\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + vec4(offsets, 0., 0.);\n  v_texCoord = a_texCoord;\n  v_opacity = a_opacity;\n}\n\n\n';
 
 
 /**
  * @const
  * @type {string}
  */
-ol.render.webgl.imagereplay.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 b;attribute vec2 c;attribute vec2 d;uniform mat4 e;uniform mat2 f;void main(void){vec2 offsets=f*d;gl_Position=e*vec4(b,0.,1.)+vec4(offsets,0.,0.);a=c;}';
+ol.render.webgl.imagereplay.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;uniform mat4 g;uniform mat2 h;void main(void){vec2 offsets=h*e;gl_Position=g*vec4(c,0.,1.)+vec4(offsets,0.,0.);a=d;b=f;}';
 
 
 /**
@@ -89,35 +89,41 @@ ol.render.webgl.imagereplay.shader.Locations = function(gl, program) {
    * @type {WebGLUniformLocation}
    */
   this.u_image = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_image' : 'g');
+      program, goog.DEBUG ? 'u_image' : 'i');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_projectionMatrix = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_projectionMatrix' : 'e');
+      program, goog.DEBUG ? 'u_projectionMatrix' : 'g');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_sizeMatrix = gl.getUniformLocation(
-      program, goog.DEBUG ? 'u_sizeMatrix' : 'f');
+      program, goog.DEBUG ? 'u_sizeMatrix' : 'h');
 
   /**
    * @type {number}
    */
   this.a_offsets = gl.getAttribLocation(
-      program, goog.DEBUG ? 'a_offsets' : 'd');
+      program, goog.DEBUG ? 'a_offsets' : 'e');
+
+  /**
+   * @type {number}
+   */
+  this.a_opacity = gl.getAttribLocation(
+      program, goog.DEBUG ? 'a_opacity' : 'f');
 
   /**
    * @type {number}
    */
   this.a_position = gl.getAttribLocation(
-      program, goog.DEBUG ? 'a_position' : 'b');
+      program, goog.DEBUG ? 'a_position' : 'c');
 
   /**
    * @type {number}
    */
   this.a_texCoord = gl.getAttribLocation(
-      program, goog.DEBUG ? 'a_texCoord' : 'c');
+      program, goog.DEBUG ? 'a_texCoord' : 'd');
 };
diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js
index c314d2585e..c5f8d144f0 100644
--- a/src/ol/render/webgl/webglreplay.js
+++ b/src/ol/render/webgl/webglreplay.js
@@ -91,6 +91,12 @@ ol.render.webgl.ImageReplay = function(tolerance) {
    */
   this.locations_ = null;
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.opacity_ = undefined;
+
   /**
    * @type {number|undefined}
    * @private
@@ -182,6 +188,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
   goog.asserts.assert(goog.isDef(this.height_));
   goog.asserts.assert(goog.isDef(this.imageHeight_));
   goog.asserts.assert(goog.isDef(this.imageWidth_));
+  goog.asserts.assert(goog.isDef(this.opacity_));
   goog.asserts.assert(goog.isDef(this.originX_));
   goog.asserts.assert(goog.isDef(this.originY_));
   goog.asserts.assert(goog.isDef(this.width_));
@@ -190,6 +197,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
   var height = this.height_;
   var imageHeight = this.imageHeight_;
   var imageWidth = this.imageWidth_;
+  var opacity = this.opacity_;
   var originX = this.originX_;
   var originY = this.originY_;
   var width = this.width_;
@@ -200,9 +208,9 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     x = flatCoordinates[i];
     y = flatCoordinates[i + 1];
 
-    n = numVertices / 6;
+    n = numVertices / 7;
 
-    // 4 vertices per coordinate, with 6 values per vertex
+    // 4 vertices per coordinate, with 7 values per vertex
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
@@ -210,6 +218,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = -2 * (height - anchorY);
     this.vertices_[numVertices++] = (originX + width) / imageWidth;
     this.vertices_[numVertices++] = (originY + height) / imageHeight;
+    this.vertices_[numVertices++] = opacity;
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
@@ -217,6 +226,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = -2 * (height - anchorY);
     this.vertices_[numVertices++] = originX / imageWidth;
     this.vertices_[numVertices++] = (originY + height) / imageHeight;
+    this.vertices_[numVertices++] = opacity;
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
@@ -224,6 +234,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = 2 * anchorY;
     this.vertices_[numVertices++] = originX / imageWidth;
     this.vertices_[numVertices++] = originY / imageHeight;
+    this.vertices_[numVertices++] = opacity;
 
     this.vertices_[numVertices++] = x;
     this.vertices_[numVertices++] = y;
@@ -231,6 +242,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ =
     this.vertices_[numVertices++] = 2 * anchorY;
     this.vertices_[numVertices++] = (originX + width) / imageWidth;
     this.vertices_[numVertices++] = originY / imageHeight;
+    this.vertices_[numVertices++] = opacity;
 
     this.indices_[numIndices++] = n;
     this.indices_[numIndices++] = n + 1;
@@ -371,6 +383,7 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) {
   this.imageHeight_ = undefined;
   this.imageWidth_ = undefined;
   this.indices_ = null;
+  this.opacity_ = undefined;
   this.originX_ = undefined;
   this.originY_ = undefined;
   this.vertices_ = null;
@@ -415,15 +428,19 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
 
   gl.enableVertexAttribArray(locations.a_position);
   gl.vertexAttribPointer(locations.a_position, 2, goog.webgl.FLOAT,
-      false, 24, 0);
+      false, 28, 0);
 
   gl.enableVertexAttribArray(locations.a_offsets);
   gl.vertexAttribPointer(locations.a_offsets, 2, goog.webgl.FLOAT,
-      false, 24, 8);
+      false, 28, 8);
 
   gl.enableVertexAttribArray(locations.a_texCoord);
   gl.vertexAttribPointer(locations.a_texCoord, 2, goog.webgl.FLOAT,
-      false, 24, 16);
+      false, 28, 16);
+
+  gl.enableVertexAttribArray(locations.a_opacity);
+  gl.vertexAttribPointer(locations.a_opacity, 1, goog.webgl.FLOAT,
+      false, 28, 24);
 
   gl.uniformMatrix4fv(locations.u_projectionMatrix, false, transform);
   gl.uniformMatrix2fv(locations.u_sizeMatrix, false,
@@ -461,6 +478,8 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   // FIXME getImageSize does not exist for circles
   var imageSize = imageStyle.getImageSize();
   goog.asserts.assert(!goog.isNull(imageSize));
+  var opacity = imageStyle.getOpacity();
+  goog.asserts.assert(goog.isDef(opacity));
   var origin = imageStyle.getOrigin();
   goog.asserts.assert(!goog.isNull(origin));
   var size = imageStyle.getSize();
@@ -482,6 +501,7 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   this.height_ = size[1];
   this.imageHeight_ = imageSize[1];
   this.imageWidth_ = imageSize[0];
+  this.opacity_ = opacity;
   this.originX_ = origin[0];
   this.originY_ = origin[1];
   this.width_ = size[0];