Skip to main content
C
chuckeroo
Participating Frequently
July 27, 2020
Answered

Gif to HTML5 conversion?

  • July 27, 2020
  • 2 replies
  • 34677 views

I have an animated gif file I exported from Photoshop. The client is now asking for an HTML5 file -- How can I do that from Photoshop or any other Adobe CC app? I have done many gif like this and never had this request before. I am not super proficient in XD, DreamWeaver, etc. If it is simple enough to just import and export from one fo these without a lot of tweaking I am sure I could do it. Thanks for your help and advice.

Correct answer rayek.elfin

HTML5 is generally a rather vague umbrella term used to indicate an animation (interactive or otherwise), a game, or web app running in the browser that uses a variety of web technologies, which inlcude (in this case animation):

  • the use of HTML DOM elements which are moved/animated using Javascript and/or CSS animations;
  • the use of SVG files with animated elements, again moved/animated using either Javascript, CSS, or both;
  • the use of the CANVAS html element to draw animated objects, which relies on Javascript;
  • the use of WebGL 3d to render animated 2d and/or 3d objects in the browser;
  • the use of WebAssembly and WebGL to draw 2d and 3d animated elements in the browser;
  • the combined use of any of the above.

 

Which method(s) to use depends on the type of animation, game, project, or your own preferences.

 

Since it is a simple animated GIF you made in Photoshop, I assume it is a simple 2d animation. And based on your post, I also assume you have little or no experience with web development or coding.

 

In that case options would be:

 

Other options would include libraries such as GSAP (which requires programming knowledge), or even HTML5 game creators like Construct 3 (which also includes an animation timeline). And there are many other developer tools and libraries available online and offline for free and money that could be used as well.

 

It is not possible to directly convert your existing Photoshop animation to any of these tools, though. Photoshop has no option to export to one of the earlier mentioned HTML 5 options. The best that you can achieve is to import the layered PSD (if supported by the tool) or export all your layers as separate assets, and re-do your animation in the tool of your choice.

 

(There might be Photoshop plugins to help you with this process as well, perhaps even direct converters. I have not Googled that, because in my experience similar plugins cost an arm and a leg, and are too limited anyway.)

 

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 27, 2020

HTML5 canvas is a web API that runs in your browser. 

I have no way to convert animated GIF (image)  to HTML5 canvas (code). 

All I can suggest is recreating the HTML5 canvas project in Animate CC.  See link below.

https://helpx.adobe.com/animate/using/creating-publishing-html5-canvas-document.html

 

Nancy O'Shea— Product User & Community Expert
rayek.elfin
rayek.elfinCorrect answer
Legend
July 27, 2020

HTML5 is generally a rather vague umbrella term used to indicate an animation (interactive or otherwise), a game, or web app running in the browser that uses a variety of web technologies, which inlcude (in this case animation):

  • the use of HTML DOM elements which are moved/animated using Javascript and/or CSS animations;
  • the use of SVG files with animated elements, again moved/animated using either Javascript, CSS, or both;
  • the use of the CANVAS html element to draw animated objects, which relies on Javascript;
  • the use of WebGL 3d to render animated 2d and/or 3d objects in the browser;
  • the use of WebAssembly and WebGL to draw 2d and 3d animated elements in the browser;
  • the combined use of any of the above.

 

Which method(s) to use depends on the type of animation, game, project, or your own preferences.

 

Since it is a simple animated GIF you made in Photoshop, I assume it is a simple 2d animation. And based on your post, I also assume you have little or no experience with web development or coding.

 

In that case options would be:

 

Other options would include libraries such as GSAP (which requires programming knowledge), or even HTML5 game creators like Construct 3 (which also includes an animation timeline). And there are many other developer tools and libraries available online and offline for free and money that could be used as well.

 

It is not possible to directly convert your existing Photoshop animation to any of these tools, though. Photoshop has no option to export to one of the earlier mentioned HTML 5 options. The best that you can achieve is to import the layered PSD (if supported by the tool) or export all your layers as separate assets, and re-do your animation in the tool of your choice.

 

(There might be Photoshop plugins to help you with this process as well, perhaps even direct converters. I have not Googled that, because in my experience similar plugins cost an arm and a leg, and are too limited anyway.)

 

    C
    chuckerooAuthor
    Participating Frequently
    July 27, 2020

    Yes, sorry, it is a simple 2D animation. I have zero experience in Adobe Animate. With a little bit of research, I have found some supposed free online gif to HTML converters, will these work? But yes, knowing exactly what the HTML requiremets are would help. I have yet to be provided that info but your repsonse will help ask at least some of the right questions.

    rayek.elfin
    rayek.elfin
    Legend
    July 27, 2020

    No, those converters will merely encode your bitmap GIF to BASE64 code, which is a conversion from binary bitmap to an encoded text string that browsers can read. In layman terms: it converts your graphic to a text file, which can be embedded directly in the html code (instead of linking the external image).

     

    It would be the worst conversion possible for an animated GIF, and some browsers have trouble with very large base64 encoded images. There is just no sense behind it in this case. For smaller embedded logos, perhaps. Definitely avoid here.

     

    Chime back in here when you are provided with the client's HTML5 requirements. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices