{"id":2335,"date":"2023-06-21T15:58:52","date_gmt":"2023-06-21T15:58:52","guid":{"rendered":"https:\/\/www.appyweb.es\/diccionario\/?page_id=2335"},"modified":"2024-04-11T15:52:47","modified_gmt":"2024-04-11T15:52:47","slug":"img","status":"publish","type":"page","link":"https:\/\/www.appyweb.es\/diccionario\/img\/","title":{"rendered":"Img"},"content":{"rendered":"<figure id=\"attachment_14678\" aria-describedby=\"caption-attachment-14678\" style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14678\" src=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Img.jpg\" alt=\"Img\" width=\"1000\" height=\"600\" srcset=\"https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Img.jpg 1000w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Img-300x180.jpg 300w, https:\/\/www.appyweb.es\/diccionario\/wp-content\/uploads\/2024\/04\/Img-768x461.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption id=\"caption-attachment-14678\" class=\"wp-caption-text\">Personas colocando en un html imagenes, textos, configuraciones, etc.<\/figcaption><\/figure>\n<p>Es un elemento o etiqueta que se utiliza en el c\u00f3digo HTML para indicar que se a\u00f1adir\u00e1 un archivo de imagen. <strong>La etiqueta img permite que se muestren las im\u00e1genes<\/strong>, pero en caso de que el archivo est\u00e9 da\u00f1ado tambi\u00e9n es capaz de describir el gr\u00e1fico con algunos atributos, lo que es ideal para ordenadores con navegadores no gr\u00e1ficos, como los utilizados por personas con discapacidad visual.<\/p>\n<h2>\u00bfQu\u00e9 es img?<\/h2>\n<p>Se trata de <strong>un elemento que representa a una imagen en el c\u00f3digo HTML<\/strong>, este se utiliza entre corchetes angulares al momento de insertar el archivo. Sin embargo, a diferencia de otros elementos no es necesario utilizar el mismo c\u00f3digo al final del mismo. De esta forma, la imagen es un recurso externo que ser\u00e1 incrustado en el cuerpo de la p\u00e1gina, es necesario <a href=\"https:\/\/www.appyweb.es\/diseno-web\/\">que el dise\u00f1ador web<\/a> se asegure de que el recurso externo est\u00e1 especificado con un atributo <em>src<\/em>.<\/p>\n<p>Es importante que esta etiqueta solo se utilice con im\u00e1genes que tendr\u00e1n un significado relacionado con el contenido, ya que usualmente es utilizado de forma inadecuada para a\u00f1adir separadores especiales en archivos gr\u00e1ficos. Sin embargo, existen herramientas de organizaci\u00f3n de contenidos que permiten insertar estos separadores sin necesidad de incluir este elemento.<\/p>\n<h2>\u00bfCu\u00e1les son los atributos que se pueden utilizar con IMG?<\/h2>\n<p>Como se mencion\u00f3 en la introducci\u00f3n, este elemento puede ser apoyado por otros atributos en caso de que el archivo est\u00e9 da\u00f1ado, pero tambi\u00e9n existen otras opciones que <strong>permiten modificar el texto alrededor de la imagen<\/strong>, entre otras funcionalidades que pueden ser muy \u00fatiles para el <a href=\"https:\/\/www.appyweb.es\/diseno-grafico\/\">dise\u00f1o gr\u00e1fico de un proyecto digital<\/a>, los tributos m\u00e1s utilizados en este caso son los siguientes.<\/p>\n<ul>\n<li><strong>Alt<\/strong>: Es una descripci\u00f3n alternativa del elemento gr\u00e1fico, se muestra en caso de que la imagen no pueda ser vista, por ejemplo en los navegadores sin soporte o en navegadores para usuarios de discapacidad visual.<\/li>\n<li><strong>Src<\/strong>: Incluye la URL de la imagen, acompa\u00f1a obligatoriamente al elemento <em>img<\/em>.<\/li>\n<li><strong>Height<\/strong>: Con \u00e9ste se puede indicar la <strong>altura de la imagen en valores de p\u00edxeles en CSS<\/strong> para HTML 5 y en porcentaje para HTML 4.<\/li>\n<li><strong>Width<\/strong>: Indica el ancho de la imagen en p\u00edxeles, cumpliendo con las condiciones nombradas en el atributo anterior.<\/li>\n<li><strong>Longdesc<\/strong>: Permite ampliar la descripci\u00f3n de la imagen, a\u00f1adiendo una URL para complementar el texto con el atributo alt.<\/li>\n<\/ul>\n<h2>\u00bfQu\u00e9 tipo de imagen soporta este elemento?<\/h2>\n<p>Normalmente, HTML no ofrece una lista de formatos de imagen que se pueden incluir con este elemento, sin embargo los m\u00e1s utilizados son los siguientes.<\/p>\n<ul>\n<li>Jpg o jpeg.<\/li>\n<li>GIF.<\/li>\n<li>PNG.<\/li>\n<li>APNG.<\/li>\n<li>SVG.<\/li>\n<li>BMP.<\/li>\n<\/ul>\n<h2>Ejemplo de IMG<\/h2>\n<p>Normalmente, s\u00f3lo podr\u00e1s observar este elemento si le echas un vistazo al c\u00f3digo HTML de un documento o p\u00e1gina web en Internet, se ver\u00e1 de la siguiente forma.<\/p>\n<ul>\n<li><em>&lt;img src=\u00bblogo.png\u00bb alt=\u00bblogo\u00bb&gt;<\/em><\/li>\n<\/ul>\n<p>En este caso, se incluyen los atributos alt y src, el src, que indica el enlace del archivo y el alt que incluye la descripci\u00f3n de la imagen. En este caso, ambos <strong>atributos tambi\u00e9n son importantes para el posicionamiento web<\/strong>, ya que los robots de los buscadores pueden utilizar el texto alternativo para relacionar con las palabras clave y el enlace para evaluar el elemento.<\/p>\n<p><script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[ \n{\"@type\":\"Question\",\"name\":\"\u00bfQu\u00e9 es img?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<\/p>\n<p>Se trata de <strong>un elemento que representa a una imagen en el c\u00f3digo HTML<\/strong>, este se utiliza entre corchetes angulares al momento de insertar el archivo. Sin embargo, a diferencia de otros elementos no es necesario utilizar el mismo c\u00f3digo al final del mismo. De esta forma, la imagen es un recurso externo que ser\u00e1 incrustado en el cuerpo de la p\u00e1gina, es necesario <a href='https:\/\/www.appyweb.es\/diseno-web\/'>que el dise\u00f1ador web<\/a> se asegure de que el recurso externo est\u00e1 especificado con un atributo <em>src<\/em>.<\/p>\n<p>Es importante que esta etiqueta solo se utilice con im\u00e1genes que tendr\u00e1n un significado relacionado con el contenido, ya que usualmente es utilizado de forma inadecuada para a\u00f1adir separadores especiales en archivos gr\u00e1ficos. Sin embargo, existen herramientas de organizaci\u00f3n de contenidos que permiten insertar estos separadores sin necesidad de incluir este elemento.<\/p>\n<p>\"}},\n{\"@type\":\"Question\",\"name\":\"\u00bfCu\u00e1les son los atributos que se pueden utilizar con IMG?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<\/p>\n<p>Como se mencion\u00f3 en la introducci\u00f3n, este elemento puede ser apoyado por otros atributos en caso de que el archivo est\u00e9 da\u00f1ado, pero tambi\u00e9n existen otras opciones que <strong>permiten modificar el texto alrededor de la imagen<\/strong>, entre otras funcionalidades que pueden ser muy \u00fatiles para el <a href='https:\/\/www.appyweb.es\/diseno-grafico\/'>dise\u00f1o gr\u00e1fico de un proyecto digital<\/a>, los tributos m\u00e1s utilizados en este caso son los siguientes.<\/p>\n<\/p>\n<ul>\n<\/p>\n<li><strong>Alt<\/strong>: Es una descripci\u00f3n alternativa del elemento gr\u00e1fico, se muestra en caso de que la imagen no pueda ser vista, por ejemplo en los navegadores sin soporte o en navegadores para usuarios de discapacidad visual.<\/li>\n<\/p>\n<li><strong>Src<\/strong>: Incluye la URL de la imagen, acompa\u00f1a obligatoriamente al elemento <em>img<\/em>.<\/li>\n<\/p>\n<li><strong>Height<\/strong>: Con \u00e9ste se puede indicar la <strong>altura de la imagen en valores de p\u00edxeles en CSS<\/strong> para HTML 5 y en porcentaje para HTML 4.<\/li>\n<\/p>\n<li><strong>Width<\/strong>: Indica el ancho de la imagen en p\u00edxeles, cumpliendo con las condiciones nombradas en el atributo anterior.<\/li>\n<\/p>\n<li><strong>Longdesc<\/strong>: Permite ampliar la descripci\u00f3n de la imagen, a\u00f1adiendo una URL para complementar el texto con el atributo alt.<\/li>\n<\/ul>\n<p>\"}},\n{\"@type\":\"Question\",\"name\":\"\u00bfQu\u00e9 tipo de imagen soporta este elemento?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<\/p>\n<p>Normalmente, HTML no ofrece una lista de formatos de imagen que se pueden incluir con este elemento, sin embargo los m\u00e1s utilizados son los siguientes.<\/p>\n<\/p>\n<ul>\n<\/p>\n<li> Jpg o jpeg.<\/li>\n<\/p>\n<li>GIF.<\/li>\n<\/p>\n<li>PNG.<\/li>\n<\/p>\n<li>APNG.<\/li>\n<\/p>\n<li>SVG.<\/li>\n<\/p>\n<li>BMP.<\/li>\n<\/ul>\n<p>\"}},\n{\"@type\":\"Question\",\"name\":\"Ejemplo de IMG\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<\/p>\n<p>Normalmente, s\u00f3lo podr\u00e1s observar este elemento si le echas un vistazo al c\u00f3digo HTML de un documento o p\u00e1gina web en Internet, se ver\u00e1 de la siguiente forma.<\/p>\n<\/p>\n<ul>\n<\/p>\n<li><em><img src='logo.png' alt='logo'><\/em><\/li>\n<\/ul>\n<p>En este caso, se incluyen los atributos alt y src, el src, que indica el enlace del archivo y el alt que incluye la descripci\u00f3n de la imagen. En este caso, ambos <strong>atributos tambi\u00e9n son importantes para el posicionamiento web<\/strong>, ya que los robots de los buscadores pueden utilizar el texto alternativo para relacionar con las palabras clave y el enlace para evaluar el elemento.<\/p>\n<p>\"}}\n]}<\/script><\/p>\n<h2>M\u00e1s informaci\u00f3n sobre IMG<\/h2>\n<p>\u00bfSab\u00edas que tambi\u00e9n existen otros elementos en HTML para indicar otros recursos gr\u00e1ficos? Como <em>picture<\/em>, <em>objetc<\/em> y <em>embed<\/em>. Aqu\u00ed tienes un par de enlaces para ampliar esta informaci\u00f3n.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.appyweb.es\/diccionario\/css\/\">\u00bfQu\u00e9 es CSS y para qu\u00e9 sirve?<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Elemento\/picture\" rel=\"nofollow noopener\" target=\"_blank\">\u00bfCu\u00e1l es el elemento del HTML \u201cpicture\u201d?<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es un elemento o etiqueta que se utiliza en el c\u00f3digo HTML para indicar que se a\u00f1adir\u00e1 un archivo de imagen. La etiqueta img permite que se muestren las im\u00e1genes, pero en caso de que el archivo est\u00e9 da\u00f1ado tambi\u00e9n es capaz de describir el gr\u00e1fico con algunos atributos, lo que es ideal para ordenadores [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14678,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-2335","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/2335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/comments?post=2335"}],"version-history":[{"count":5,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/2335\/revisions"}],"predecessor-version":[{"id":14680,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/pages\/2335\/revisions\/14680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media\/14678"}],"wp:attachment":[{"href":"https:\/\/www.appyweb.es\/diccionario\/wp-json\/wp\/v2\/media?parent=2335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}