Welcome to WebmasterWorld Guest from 54.227.48.147

Forum Moderators: martinibuster

Converting 3,000 article images to AMP

     
6:08 pm on Nov 21, 2017 (gmt 0)

Junior Member from US 

5+ Year Member Top Contributors Of The Month

joined:June 9, 2008
posts: 152
votes: 16


I have a site with several thousand articles. Many of them have images embedded in the articles with the typical img src tag. Google AMP requires amp-img instead of img.

The Google tutorial simply suggests changing the img tag. Well, manually changing thousands of articles isn't a nice thought. And I need to keep the img tags anyway for the desktop version of the site.

Has anyone run into this problem or have a suggestion on an easier way to convert or duplicate images?
8:03 pm on Nov 25, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:1584
votes: 424


There are a few questions that you are raising here. Let me begin by stating that the main goal of AMP is to provide the fastest possible first page load. This is achieved in part by pre-caching the pages on Google's server. Any interaction a users has with an AMP after the first page load will not be served from the cache, so those pages do not need to be amp compliant, but still can use AMP code.

And I need to keep the img tags anyway for the desktop version of the site.

1- There are several ways to implement AMP, and which strategy to choose will largely depend on what is on your pages. If you only have static content and the constraints of AMP don't cause any problems for you then AMP only is probably the way to go. AMP is responsive (your CSS needs to be responsive), so it will display on desktop as it will on mobile. Now if you have JS scripts running client side then you will need to create an AMP page along side a canonical non-AMP page. Here again, I am saying desktop page, because even with mobile you may want to have a page that provides all the JS add ons. So:
Strategy 1- AMP only
Strategy 2- AMP with Canonical non-amp pages

Other strategies exist but I think this should suffice for your needs.

[Does anyone have any...] suggestion on an easier way to convert or duplicate images?

There is no need to duplicate the images. If you chose AMP + Canonical you will simply have to each page two version one with AMP-HTML the other with standard HTML but image file itself will be the same and does not need to change. You may want to optimize your images for screen size but again you should be doing this for both version regardless. If you have an AMP-only page then the AMP-img will display on both desktop and mobile so again no worries in terms duplication.

As for converting code of thousands of pages. You will need to change a lot more than just an image tag to convert to amp. If it is only changing an image tag you could run a find and replace using SED on your Linux server (assuming you are running a linux server).

I hope this helps
2:44 am on Nov 26, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:7998
votes: 578


From an edit point of view (if working with source code) Notepad ++ will serve well at folder or cross site levels. Be warned, is very powerful and unintended results are possible.
4:38 pm on Nov 28, 2017 (gmt 0)

Junior Member from US 

5+ Year Member Top Contributors Of The Month

joined:June 9, 2008
posts: 152
votes: 16


Thanks for your replies. Let me give you a simple example of the problem. I have a CMS (ExpressionEngine) that displays content dynamically from MySQL. Some of the images reside in their own database fields and others are embedded in the articles.

Imagine an article with an embedded image that looks something like this:

"<img src="file_name.png" />The annual Caribbean hurricane hits Guadeloupe harder than most Caribbean islands. The season officially begins June 1 and goes through Nov. 30."

I have one template for desktop visitors using the above. I have an AMP template that displays the same article and validates with AMP except for the image because it has img instead of amp-img. My options seem to be:

1. Run a search and replace on all of my embedded images from img to amp-img, but then they won't display for desktop visitors.

2. Use CSS to set visibility to none for the embedded AMP images, but that triggers a validator error.

3. Somehow create duplicates in the database for all of the articles and replace the imag tag.
5:46 pm on Nov 28, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 1584
votes: 424


I have a CMS ... that displays content dynamically from MySQL. Some of the images reside in their own database fields and others are embedded in the articles.

Am I reading this correctly? Does your CMS include both HTML code and data in the same field in the database?

If that is the cases then there is no right way to fix it. You will need to hack a solution.

Do you have any dynamic content on any of the pages? That is, does your site use any Javascript or AJAX calls? Or is the page that the user see rendered fully on your server?
9:33 pm on Dec 4, 2017 (gmt 0)

Junior Member from US 

5+ Year Member Top Contributors Of The Month

joined:June 9, 2008
posts: 152
votes: 16


The CMS database includes HTML code for embedded images in the field for the article, but it doesn't include any other HTML from the surrounding presentation.

The CMS uses PHP to pull the content from the database to render the page to the user (if I understand you correctly).