Blurred images ONLY after rendering.

1,355 views
Skip to first unread message

sergioav...@gmail.com

unread,
Oct 12, 2017, 7:37:38 PM10/12/17
to Google Web Designer beta
Hi! We are experiencing problems while using a flawless png in one of our adds. By the time we test it on Chrome and Firefox we see very blurred images.
Please Help.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 1.9.0.0619">
<meta name="template" content="Banner 3.0.0">
<meta name="environment" content="gwd-adwords">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="gwdpage_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-page">
<link href="gwdpagedeck_style.css" rel="stylesheet" data-version="9" data-exports-type="gwd-pagedeck">
<link href="gwddoubleclick_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-doubleclick">
<link href="gwdimage_style.css" rel="stylesheet" data-version="9" data-exports-type="gwd-image">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css" id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
position: absolute;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
transform: translateZ(0px);
}
.gwd-page-size {
width: 120px;
height: 600px;
}
.gwd-img-8d4d {
position: absolute;
width: 95px;
height: 30px;
transform-origin: 47.014px 20.5264px 0px;
top: 283px;
opacity: 1;
left: 133px;
}
@keyframes gwd-gen-6tv3gwdanimation_gwd-keyframes {
0% {
opacity: 1;
left: 133px;
animation-timing-function: linear;
}
2.29% {
opacity: 1;
left: 12px;
animation-timing-function: linear;
}
17.2% {
opacity: 1;
left: 12px;
animation-timing-function: linear;
}
22.93% {
opacity: 0;
left: 12px;
animation-timing-function: linear;
}
100% {
opacity: 0;
left: 12px;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-6tv3gwdanimation {
animation: gwd-gen-6tv3gwdanimation_gwd-keyframes 8.721s linear 0s 1 normal forwards;
}
.gwd-img-17z9 {
position: absolute;
width: 80px;
height: 20px;
transform-origin: 40.3899px 9.85179px 0px;
top: 157px;
left: 25px;
transform-style: preserve-3d;
transform: translate3d(0px, -190px, 0px);
opacity: 1;
}
.gwd-img-1y29 {
position: absolute;
width: 878px;
height: 372px;
left: -384px;
top: 314px;
transform-style: preserve-3d;
transform: translate3d(9px, 136px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
}
.gwd-img-44kc {
position: absolute;
width: 446px;
height: 395px;
left: -161px;
top: 109px;
opacity: 0;
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
}
@keyframes gwd-gen-3lwqgwdanimation_gwd-keyframes {
0% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
animation-timing-function: linear;
}
41.25% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
animation-timing-function: linear;
}
48.53% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
animation-timing-function: linear;
}
49.04% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
animation-timing-function: linear;
}
56.32% {
transform: translate3d(3px, -11px, 0px) scale3d(0.519893, 0.513318, 1);
opacity: 1;
animation-timing-function: linear;
}
90.29% {
transform: translate3d(3px, -11px, 0px) scale3d(0.519893, 0.513318, 1);
opacity: 1;
animation-timing-function: linear;
}
100% {
transform: translate3d(3px, -11px, 0px) scale3d(0.519893, 0.513318, 1);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-3lwqgwdanimation {
animation: gwd-gen-3lwqgwdanimation_gwd-keyframes 4.121s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-18lxgwdanimation_gwd-keyframes {
0% {
transform: translate3d(9px, 136px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
51.47% {
transform: translate3d(9px, 136px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
58.75% {
transform: translate3d(9px, -64px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
90.29% {
transform: translate3d(9px, -64px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
100% {
transform: translate3d(9px, -64px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-18lxgwdanimation {
animation: gwd-gen-18lxgwdanimation_gwd-keyframes 4.121s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1gpfgwdanimation_gwd-keyframes {
0% {
transform: translate3d(0px, -190px, 0px);
opacity: 1;
animation-timing-function: linear;
}
51.47% {
transform: translate3d(0px, -190px, 0px);
opacity: 1;
animation-timing-function: linear;
}
58.75% {
transform: translate3d(0px, 0px, 0px);
opacity: 1;
animation-timing-function: linear;
}
90.29% {
transform: translate3d(0px, 0px, 0px);
opacity: 1;
animation-timing-function: linear;
}
100% {
transform: translate3d(0px, 0px, 0px);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-1gpfgwdanimation {
animation: gwd-gen-1gpfgwdanimation_gwd-keyframes 4.121s linear 0s 1 normal forwards;
}
.gwd-img-12k6 {
position: absolute;
width: 80px;
height: 14px;
transform-origin: 39.8243px 7.68174px 0px;
left: 21px;
top: 243px;
opacity: 0;
transform: translate3d(0px, 0px, 0px);
}
@keyframes gwd-gen-1skggwdanimation_gwd-keyframes {
0% {
opacity: 0;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: step-end;
}
68.36% {
opacity: 1;
left: 124px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
73.11% {
opacity: 1;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
96.84% {
opacity: 1;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
100% {
opacity: 0;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-1skggwdanimation {
animation: gwd-gen-1skggwdanimation_gwd-keyframes 6.321s linear 0s 1 normal forwards;
}
.gwd-img-xvak {
position: absolute;
width: 159px;
height: 144px;
transform-origin: 79.6608px 72.1129px 0px;
top: 228px;
left: -20px;
opacity: 0;
}
@keyframes gwd-gen-ezpfgwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
65.02% {
opacity: 0;
animation-timing-function: linear;
}
69.14% {
opacity: 1;
animation-timing-function: linear;
}
89.71% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 0;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-ezpfgwdanimation {
animation: gwd-gen-ezpfgwdanimation_gwd-keyframes 9.721s linear 0s 1 normal forwards;
}
.gwd-img-16ut {
position: absolute;
width: 263px;
height: 247px;
top: 182px;
transform-style: preserve-3d;
transform: translate3d(5px, 8px, 0px) scale3d(0.37, 0.37, 0.37);
left: -195px;
opacity: 1;
}
@keyframes gwd-gen-gnmpgwdanimation_gwd-keyframes {
0% {
left: -195px;
opacity: 1;
animation-timing-function: linear;
}
68.36% {
left: -195px;
opacity: 1;
animation-timing-function: linear;
}
73.11% {
left: -76px;
opacity: 1;
animation-timing-function: linear;
}
96.84% {
left: -76px;
opacity: 1;
animation-timing-function: linear;
}
100% {
left: -76px;
opacity: 0;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-gnmpgwdanimation {
animation: gwd-gen-gnmpgwdanimation_gwd-keyframes 6.321s linear 0s 1 normal forwards;
}
@keyframes gwd-empty-animation {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
#page1.Comienzo .gwd-gen-ezpfgwdanimation {
animation: gwd-gen-ezpfgwdanimation_gwd-keyframes_Comienzo 9.721s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-ezpfgwdanimation_gwd-keyframes_Comienzo {
0% {
opacity: 0;
animation-timing-function: linear;
}
65.02% {
opacity: 0;
animation-timing-function: linear;
}
69.14% {
opacity: 1;
animation-timing-function: linear;
}
89.71% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 0;
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-gnmpgwdanimation {
animation: gwd-gen-gnmpgwdanimation_gwd-keyframes_Comienzo 6.321s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-gnmpgwdanimation_gwd-keyframes_Comienzo {
0% {
left: -195px;
opacity: 1;
animation-timing-function: linear;
}
68.36% {
left: -195px;
opacity: 1;
animation-timing-function: linear;
}
73.11% {
left: -76px;
opacity: 1;
animation-timing-function: linear;
}
96.84% {
left: -76px;
opacity: 1;
animation-timing-function: linear;
}
100% {
left: -76px;
opacity: 0;
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-1skggwdanimation {
animation: gwd-gen-1skggwdanimation_gwd-keyframes_Comienzo 6.321s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1skggwdanimation_gwd-keyframes_Comienzo {
0% {
opacity: 0;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: step-end;
}
68.36% {
opacity: 1;
left: 124px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
73.11% {
opacity: 1;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
96.84% {
opacity: 1;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
100% {
opacity: 0;
left: 21px;
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-3lwqgwdanimation {
animation: gwd-gen-3lwqgwdanimation_gwd-keyframes_Comienzo 4.121s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-3lwqgwdanimation_gwd-keyframes_Comienzo {
0% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
animation-timing-function: linear;
}
41.25% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
animation-timing-function: linear;
}
48.53% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
animation-timing-function: linear;
}
49.04% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
animation-timing-function: linear;
}
56.32% {
transform: translate3d(3px, -11px, 0px) scale3d(0.519893, 0.513318, 1);
opacity: 1;
animation-timing-function: linear;
}
90.29% {
transform: translate3d(3px, -11px, 0px) scale3d(0.519893, 0.513318, 1);
opacity: 1;
animation-timing-function: linear;
}
100% {
transform: translate3d(3px, -11px, 0px) scale3d(0.519893, 0.513318, 1);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-18lxgwdanimation {
animation: gwd-gen-18lxgwdanimation_gwd-keyframes_Comienzo 4.121s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-18lxgwdanimation_gwd-keyframes_Comienzo {
0% {
transform: translate3d(9px, 136px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
51.47% {
transform: translate3d(9px, 136px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
58.75% {
transform: translate3d(9px, -64px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
90.29% {
transform: translate3d(9px, -64px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 1;
animation-timing-function: linear;
}
100% {
transform: translate3d(9px, -64px, 0px) scale3d(0.12, 0.12, 0.12);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-1gpfgwdanimation {
animation: gwd-gen-1gpfgwdanimation_gwd-keyframes_Comienzo 4.121s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1gpfgwdanimation_gwd-keyframes_Comienzo {
0% {
transform: translate3d(0px, -190px, 0px);
opacity: 1;
animation-timing-function: linear;
}
51.47% {
transform: translate3d(0px, -190px, 0px);
opacity: 1;
animation-timing-function: linear;
}
58.75% {
transform: translate3d(0px, 0px, 0px);
opacity: 1;
animation-timing-function: linear;
}
90.29% {
transform: translate3d(0px, 0px, 0px);
opacity: 1;
animation-timing-function: linear;
}
100% {
transform: translate3d(0px, 0px, 0px);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-6tv3gwdanimation {
animation: gwd-gen-6tv3gwdanimation_gwd-keyframes_Comienzo 8.721s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-6tv3gwdanimation_gwd-keyframes_Comienzo {
0% {
opacity: 1;
left: 133px;
animation-timing-function: linear;
}
2.29% {
opacity: 1;
left: 12px;
animation-timing-function: linear;
}
17.2% {
opacity: 1;
left: 12px;
animation-timing-function: linear;
}
22.93% {
opacity: 0;
left: 12px;
animation-timing-function: linear;
}
100% {
opacity: 0;
left: 12px;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .event-1-animation {
animation: gwd-empty-animation 10s linear 0s 1 normal forwards;
}
#page1.Comienzo .event-1-animation {
animation: gwd-empty-animation-Comienzo 10s linear 0s 1 normal forwards;
}
@keyframes gwd-empty-animation-Comienzo {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
.gwd-img-78pu {
position: absolute;
width: 120px;
height: 600px;
opacity: 1;
left: 0px;
top: 0px;
}
@keyframes gwd-gen-175ngwdanimation_gwd-keyframes {
0% {
opacity: 1;
animation-timing-function: linear;
}
35.54% {
opacity: 1;
animation-timing-function: linear;
}
47.38% {
opacity: 0;
animation-timing-function: linear;
}
88.15% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-175ngwdanimation {
animation: gwd-gen-175ngwdanimation_gwd-keyframes 4.221s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-175ngwdanimation_gwd-keyframes_Comienzo {
0% {
opacity: 1;
animation-timing-function: linear;
}
35.54% {
opacity: 1;
animation-timing-function: linear;
}
47.38% {
opacity: 0;
animation-timing-function: linear;
}
88.15% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
#page1.Comienzo .gwd-gen-175ngwdanimation {
animation: gwd-gen-175ngwdanimation_gwd-keyframes_Comienzo 4.221s linear 0s 1 normal forwards;
}
</style><script data-source="googbase_min.js" data-version="4" data-exports-type="googbase" src="googbase_min.js"></script><script data-source="gwd_webcomponents_min.js" data-version="5" data-exports-type="gwd_webcomponents" src="gwd_webcomponents_min.js"></script>
<script
data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" src="gwdpage_min.js"></script><script data-source="gwdpagedeck_min.js" data-version="9" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script><script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script
data-source="gwddoubleclick_min.js" data-version="14" data-exports-type="gwd-doubleclick" src="gwddoubleclick_min.js"></script><script data-source="gwdimage_min.js" data-version="9" data-exports-type="gwd-image" src="gwdimage_min.js"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
<script type="text/javascript" gwd-events="handlers">
gwd.auto_Page1Event_1 = function(event) {
// GWD Predefined Function
gwd.actions.timeline.gotoAndPlay('page1', 'Comienzo');
};
</script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('page1', 'event-1', gwd.auto_Page1Event_1, false);
gwd.actions.timeline.captureAnimationEnd(document.body);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('page1', 'event-1', gwd.auto_Page1Event_1, false);
gwd.actions.timeline.releaseAnimationEnd(document.body);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
</head>

<body>
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration></gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
<div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="120px" data-gwd-height="600px">
<div class="gwd-page-content gwd-page-size">
<img is="gwd-image" source="assets/Fondo.png" id="FONDOOK" class="gwd-img-78pu gwd-gen-175ngwdanimation">
<img is="gwd-image" source="assets/SaboreaElAhorro.png" id="SABOREA" class="gwd-img-8d4d gwd-gen-6tv3gwdanimation">
<img is="gwd-image" source="assets/350ml.png" id="Litraje" class="gwd-img-17z9 gwd-gen-1gpfgwdanimation">
<img is="gwd-image" source="assets/TodoElSabor.png" id="TodoElSabor" class="gwd-img-1y29 gwd-gen-18lxgwdanimation" scaling="contain">
<img is="gwd-image" source="assets/BotellaCC350SA.png" id="Botella" class="gwd-img-44kc gwd-gen-3lwqgwdanimation">
<img is="gwd-image" source="assets/ASolo.png" id="ASolo" class="gwd-img-12k6 gwd-gen-1skggwdanimation">
<img is="gwd-image" source="assets/Precio_1.png" id="Precio" class="gwd-img-16ut gwd-gen-gnmpgwdanimation">
<img is="gwd-image" source="assets/RedDisk.png" id="RedDisk" class="gwd-img-xvak gwd-gen-ezpfgwdanimation">
<gwd_animation_label_element data-label-name="Comienzo" data-label-time="0" data-label-animation-class-name="Comienzo"></gwd_animation_label_element>
<div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="10000"></div>
</div>
</div>
</div>
</gwd-doubleclick>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');

/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {

}

/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}

/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}

window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>

</html>

yor...@mobiusads.com

unread,
Oct 13, 2017, 8:13:06 AM10/13/17
to Google Web Designer beta
Hi,

I have similar issues every now and then and from what I found the scaling of the images is the reason for the blur in some browsers.

The only workaround I found is to use SVG, but this is not possible in every situation.

Best,

Yordan

Kent Myers

unread,
Oct 13, 2017, 11:55:20 AM10/13/17
to Google Web Designer beta
I cannot tell from the HTML code pasted in the message (would need the source files, if you can share) but some similar issues have been solved by ensuring the image is placed on a whole pixel value (not a fraction) and confirmed by inspecting the position when previewed in a browser.

Hope that helps,

Kent
Google Web Designer team

sergioav...@gmail.com

unread,
Oct 13, 2017, 12:01:15 PM10/13/17
to Google Web Designer beta
Solved!

"your image may be too big to scale down in a single step. This is because canvas typically uses bi-linear interpolation (for performance reasons) while the image element is often granted bi-cubic interpolation in the process of down-scaling (interpolation is used as a low-pass filter when down-scaling)".

Reply all
Reply to author
Forward
0 new messages