How do I replace animated GIFs with static ones for responsive websites?

To many animated GIFs on a single page can cause slow playback on devices with less processing power (like some smartphones). You might want to keep your animated GIFs for desktop users, but replace them for smartphone users. You can do this with CSS media queries.

Create a Static GIF

In the Animation/Timeline window, select every frame except the first one and hit the trash icon.

ps-animation-trash-not1

You’re now ready to save. Select “Save for Web and Devices” from the File menu. Select GIF, and the desired number of colors. Be sure to check the Transparency and Matte options. The Animation options at the bottom of the dialog should indicate a gif with only 1 frame (1 of 1). Click “Save” and save the file as a new name, probably something like “animat-icon-name-static.gif”.

ps-export-no-animation


Use the Media Query

Media queries shift website layout and assets based on browser dimension. You could assume that devices under 715 pixels in width are most likely smartphones, so you set up your query to target that size.

<div class="icon-image"></div>

.icon-image {
    width: 128px;
    height: 128px;
    background-image: url('path-to-your-folder/animat-icon-name.gif');
    background-size: 100%;
    background-position: center center;
}

@media (max-width: 715px) {
.icon-image {
    background-image: url('path-to-your-folder/animat-icon-name-static.gif');
}

}
Tip: Every website is different, so be sure to test your icons, animated or static, to make sure they work well for your users.