IN RSD your images WILL NOT get...

User 2823310 Photo


Registered User
312 posts

Nifty little script Gary, changing out the src with the srcset on initiation, that just may be a decent temporary patch. Might take a bit of resource going through all the images but still a great idea. Did you try running it through your google webmaster fetch, to see if they read the src after the script and not from the dom?

That's what you might try for the second site Anne an update from the index status / advanced and try a fetch in crawl / fetch as google. It might not have been crawled again to index the images assuming the first sites index isn't from an earlier version that did have the proper src and the spider does read the html after the script load. It should though with the window onload initiation in it.

The tutorial site is coming up page 3 for a serp with google search here, pretty good out of 9 million.
User 244626 Photo


Registered User
807 posts

Hello Anne ! You certainly have a lot of really nice images.

The reason the script does not work on the second site is that it will only work if you choose not to have multiple image sizes or resolutions for your single picture element or picture link element. If you choose to only have one image, then the script will find the "srcset" in the img tag and copy the url back to the "src" (also in the img tag).

But when you choose to have multiple image sizes and resolutions (between different breakpoints), the "srcset" is moved to a "source" tag located above the "img" tag along with the other "source" "srcsets". The script can no longer find the "srcset" in the img tag.

See this example from your second site which has lots of different sizes of the same picture at different breakpoints.


<picture><!--[if IE 9]><video style="display: none;"><![endif]-->

<source srcset="http://www.custom-made-jewelry.com/images/custom-made-jewelry-main-image-380.jpg" media="(max-width: 380px)">
<source srcset="http://www.custom-made-jewelry.com/images/custom-made-jewelry-main-image-480.jpg" media="(max-width: 480px)">
<source srcset="http://www.custom-made-jewelry.com/images/custom-made-jewelry-main-image-780.jpg" media="(max-width: 650px)">
<source srcset="http://www.custom-made-jewelry.com/images/custom-made-jewelry-main-image-780.jpg" media="(max-width: 780px)">
<source srcset="http://www.custom-made-jewelry.com/images/custom-made-jewelry-main-image-1035.jpg" media="(max-width: 1035px)">
<source media="screen" srcset="http://www.custom-made-jewelry.com/images/custom-made-jewelry-main-image.jpg"><!--[if IE 9]></video><![endif]-->

<img alt="Custom Made Jewelry Online" src="nodata...image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</picture>


I was unable to find a way to write a jquery script for RSD 1.5 for both situations do to the changing of the "srcset" location.

I was able to find a way to write a jquery script for RSD 2.0 and up for both situations. I added a attribute to the picture element called "data-seo". For the value of "data-seo" I copied the url of a "srcset" link to it. A nice bonus of doing this is that I can choose which "srcset" link I want. Lets say I have a 320 px, 640 px, and a 1040 px for the different breakpoints (same picture). I copy the url for the 640 px to the data-seo attribute. Now my new script searches for all images with data-seo attributes and copys from the attribute "data-seo" url back to the "src" located in the image tag for that picture. This gives me global control over all images, whether they have one "srcset" or multiple "srcsets". It also allows me to skip images I deem unimportant by just excluding the "data-seo" attribute. And finally, the total control over which image from the multiple "srcsets" I want indexed.

The reason this cannot be applied to RSD 1.5 is that there is not a option to add attributes to any element within the program.

This is nothing more than a patch. It works to get your images indexed. It has its drawbacks. And I still am looking for Coffeecup to come up with something great....like they always do, to address this much needed feature.
I don't design the sites, I make them work.
User 2823310 Photo


Registered User
312 posts

Another good one...

Hey how about if you just wanted to add it to some images but not all
(without the multiple images) just by adding a class.
Say add the class "fix" to an image
then use this script in the FOOTER
<script>
var img = $('.fix img[srcset]');
img.each(function(){
this.src = $(this).attr('srcset');
});
</script>

or for every image you could just put this in
<script>
var img = $('img[srcset]');
img.each(function(){
this.src = $(this).attr('srcset');
});
</script>


hmmm, I wonder if you could add a data-class and use that to find the set, then attr the src?
Might be tricky to chain the data-class & the img srcset though...
I might try that when I get an extra minute or two.
User 244626 Photo


Registered User
807 posts

Alter Eagle,

Here is the final script I came up for RSD 2.0 and above....


function init() {
$('.responsive-picture').each(function(){
// grab a reference to the current class
var $el = $(this);
// get the url from its data-seo attribute
var url = $el.data('seo');
// create a new Image element to load into
var img = new Image();
// load callback for the new image
img.onload = function() {
// find the first image inside the class responsive-picture
// and change its src to the url we just loaded
$el.find('img')[0].src = url;
}
// set the src of our temp Image to start loading
img.src = url;
})}
window.onload = init;
;


It requires that you copy the url from one of your srcsets to the data-seo attribute. If you do not add or use a data-seo attribute it does not change the src for that image.

Again, the trick is the location of the srcset changes when adding more than one image to the group so the script needs to look at various conditions (tags). I was staying away from adding a class as Bootstrap Builder requires some pretty hefty class structure sometimes for components and we are limited or capped at 6?
I don't design the sites, I make them work.
User 2823310 Photo


Registered User
312 posts

Man that is some impressive coding, not easy to chain that right to get around how the data is added to the nested divs. At least the users have some options for a patch now until it gets repaired... if it does.

By the looks at how some of the designers sites rank this may have a higher impact on the crawl algorithms than I originally thought too, so a big flashing applause marquee for pointing this out.

User 2706435 Photo


Ambassador
443 posts

What is CC doing that is wrong?

I skimmed over alot of the coding posts, but this is what Google says:
https://webmasters.googleblog.com/2016/ … -apps.html
Design for Multiple Devices
Best Practice:

Use “srcset” attribute to fetch different resolution images for different density screens to avoid downloading images larger than the device’s screen is capable of displaying.


Base64 images are clearly supported by Google;
https://developers.google.com/web/funda … ive/images

So, what am I missing?
User 244626 Photo


Registered User
807 posts

Google, Bing, and Yahoo do not index the "srcset" but do index the "src" of a image.

On export the "src" of the picture element or picture element link is changed to a Base64 Encode of 1x1px Transparent GIF.

See this code.... https://css-tricks.com/snippets/html/ba … arent-gif/

It occurs on everyones website using RSD 1.5 and RSD 2.0 and up including Foundation Framer and Bootstrap Builder.

There is nothing wrong with using the "srcset" however we are objecting to the changing of the "src" to a tiny gif for all our images.

You can see what Google, Bing, and Yahoo are indexing for your site by doing a site specific search.

site:yourwebsite.com and then click on the image tab when the results come up.

Some reports on the internet say that 33% of all click referrals can come from image searches. I bought something today using image search.
I don't design the sites, I make them work.
User 232214 Photo


COO
827 posts

Hey everybody,

We pushed new versions of Responsive Site Designer, Bootstrap Builder and Foundation Framer live today with a different approach for the picture element. Following our research, we decided to follow the specified implementation :P

In short we concluded that:

1. that both issues cannot be fixed at the same time,
2. considering the increased browser support of the responsive images, the best solution looks to use src.
3. the double downloand 'might' only affects Opera and IE11 and older browsers — 'might because depending when picturefill kicks in, the double download is cancelled.

Go ahead, get the latest of the best and let us know how it goes!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2765857 Photo


Registered User
608 posts

Bob Visser wrote:
Hey everybody,

We pushed new versions of Responsive Site Designer, Bootstrap Builder and Foundation Framer live today with a different approach for the picture element. Following our research, we decided to follow the specified implementation :P

In short we concluded that:

1. that both issues cannot be fixed at the same time,
2. considering the increased browser support of the responsive images, the best solution looks to use src.
3. the double downloand 'might' only affects Opera and IE11 and older browsers — 'might because depending when picturefill kicks in, the double download is cancelled.

Go ahead, get the latest of the best and let us know how it goes!


Bob I have been reading about this and very glad that CC has the new updates to take care of the problem. Question I do have is: I see it is for RSD 2.5 BUT what about someone (like me) that also have a site made with RSD 1.5 are we only able it keep it a srcset??? If I open 1.5 in 2.5 all folders with images are lost so was planning to stay 1.5 until I get a chance to change to FF.
Ray
Ray aka Kreations
Since 1994 Chocolate bar wrappers for all occasions.
Since 1972 helping clients help "Discover Their Dream Vacation"
User 53435 Photo


Registered User
59 posts

Will the new version convert all the images/pages to the new format?
Or is a complete site rebuild required?


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.