Flexibilização das imagens

Nós fizemos a atualização que foi necessária e requisitada pelo professor Iran. Abaixo segue apenas um exemplo, foi há muitos pictures:

        <div class="nomes">
            <!--Lista de animais de A a Z-->
            <ul>A
                <hr>
                <picture>
                    <source media="(min-width:992px)" src="img/imgs_categorias/aves/Azulao.jpg">
                    <source media="(min-width:650px)" src="img/imgs_categorias/aves/Azulao.jpg">
                    <li> <img src="img/imgs_categorias/aves/Azulao.jpg" title="Azulão" alt="Azulão">Azulão</li>
                </picture>
                <picture>
                    <source media="(min-width:992px)" src="img/imgs_categorias/aves/Arara_azul.jpg">
                    <source media="(min-width:650px)" src="img/imgs_categorias/aves/Arara_azul.jpg">
                    <li><img src="img/imgs_categorias/aves/Arara_azul.jpg" title="Arara azul" alt="Arara azul"> Arara-azul</li>
                </picture>
            </ul>