Google is removing my images after I optimized my site speed

[virtualreality]

I used Google's PageSpeed Tools and was able to optimized my pages from score 55 to 92. One of the heavy elements on my site was my galleries so I created thumbnails which replaced the larger images.

So my code looks something like this:
<li><a rel="images/largeimage.jpg"><img src="images/thumb.jpg"/></a></li>

My larger images are now viewable only when you click on the small thumbnails. But I noticed a problem - in my WMT the number if indexed images significantly dropped because of this change. I wonder why. I see that the large images are not anymore in <img> tag but that's because I had to optimize my page speed accordion to Google's recommendations. That's why I am using an image sitemap where images are correctly listed. So, I dont get it why Google will remove my images from index after optimizing my site according to what they want?

[keyplyr]

I think everything will work out fine. You moved the large images off the page. Now they will be reindexed. The GSC reflects that is in process. It may take a couple weeks, but the large images should be reindexed.

Since the large images are no longer on a page with associated content, adding an alt tag may help in getting them indexed the way you want.

<li><a alt="description" rel="images/largeimage.jpg"><img src="images/thumb.jpg"></a></li> 

[phranque]

did you have alt attributes on your large images when they were in the gallery?
does the image gallery page contain any descriptive content?
you should consider that you have probably removed a lot of relevant meta data and contextual content for the large image urls by moving those images "off the page".

[Robert Charlton]

It's also likely that thumbnail images are going to be less popular among image searchers that full-sized images, and as such your image rankings and traffic are likely to drop.

If I understand correctly what you've done, you've effectively started the image indexing process again from zero... with much smaller images than before.

[keyplyr]

I do the same, just using a different code approach. The thumbs are not indexed, but all the large ones are.

It will work out just give it time.

[virtualreality]

I think there is a problem because even the sitemap generator is not indexing my images anymore.

[not2easy]

When you replaced the larger images with thumbnails, is there a reason not to have created a separate page to hold the lager image with its description and related information? If the thumbnails linked to a page I'm sure you would see the larger images indexed.

IF you had a good number of large images on one page it would have affected your page loading speed, but each one-image page should load in a reasonably fast time if there aren't a lot of other scripts and resources loaded with it. Ideally you could have optimized the images themselves to speed up loading, though a page of large images isn't going to reach a competitive speed.

[keyplyr]

I think there is a problem because even the sitemap generator is not indexing my images anymore.

You can do this manually. Just use the last image sitemap and change the file paths yourself.

[phranque]

So my code looks something like this:
<li><a rel="images/largeimage.jpg"><img src="images/thumb.jpg"/></a></li>

you should try "<a href="...

[keyplyr]

Good catch phranque. Somehow I totally missed that :)

[virtualreality]

phranque, very good point but the way my gallery is set up it needs to be in <a rel=. I tested and changed it to <a href= but then the image open in a new window instead of the gallery placeholder.

[phranque]

regardless of the technical implementation of your gallery, google is more interested in the html specification used by everyone else.

https://www.w3.org/TR/html5/links.html#attr-hyperlink-href

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.

https://www.w3.org/TR/html5/links.html#attr-hyperlink-rel

The rel attribute on a and area elements controls what kinds of links the elements create. The attribute's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.

https://www.w3.org/TR/html5/links.html#linkTypes

if you are using these attributes for your own purposes, how can you expect google to understand the semantics of your document?

[inxz]

For quick fix you could try using both (rel and href) at the same time to see if it works.

For long term solution - read what @phranque wrote:
"if you are using these attributes for your own purposes, how can you expect google to understand the semantics of your document?"