{"id":45194,"date":"2023-06-02T09:03:15","date_gmt":"2023-06-02T07:03:15","guid":{"rendered":"https:\/\/www.demomentsomtres.com\/mejora-rendimiento-wordpress-imagenes\/"},"modified":"2024-12-18T08:51:08","modified_gmt":"2024-12-18T07:51:08","slug":"mejora-rendimiento-wordpress-imagenes","status":"publish","type":"post","link":"https:\/\/www.demomentsomtres.com\/es\/2023\/06\/mejora-rendimiento-wordpress-imagenes\/","title":{"rendered":"Mejora el rendimiento en WordPress: la importancia de las im\u00e1genes"},"content":{"rendered":"\n<p>El peso de las im\u00e1genes es uno de los aspectos que m\u00e1s puede perjudicar al rendimiento de una web desarrollada en WordPress. Muchos usuarios publican im\u00e1genes sin tener en cuenta cu\u00e1nto ocupan y, con el tiempo, terminan utilizando demasiado espacio en el <em>hosting<\/em>, provocando que la web tenga una carga cada vez m\u00e1s lenta. <\/p>\n\n<p>A continuaci\u00f3n, te explicamos c\u00f3mo convertir tus im\u00e1genes en un recurso \u00f3ptimo sin que te generen dolores de cabeza.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"0-les-imatges-un-contingut-amb-tanta-import%C3%A0ncia-com-el-text-de-la-web\">Las im\u00e1genes, un contenido con tanta importancia como el texto de la web<\/h2>\n\n<p>Adem\u00e1s de tener una funci\u00f3n est\u00e9tica evidente, las im\u00e1genes te ayudan a contar tu historia. El material visual es un recurso que facilita que tus lectores se relacionen con tus publicaciones, captando su inter\u00e9s.<\/p>\n\n<p>Para que los esfuerzos de optimizaci\u00f3n del tama\u00f1o de las im\u00e1genes en WordPress den sus frutos, es importante que elijas el tama\u00f1o de las im\u00e1genes m\u00e1s adecuado para tu sitio web.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-les-mides-de-les-imatges-a-wordpress\">Los tama\u00f1os de las im\u00e1genes en WordPress<\/h2>\n\n<p>Cuando subes una imagen a WordPress, se generan cuatro tama\u00f1os de imagen diferentes por defecto:<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>En miniatura<\/strong>: 150 x 150 p\u00edxels<\/li>\n\n\n\n<li><strong>Mediano<\/strong>: 300 x 300 p\u00edxeles <\/li>\n\n\n\n<li><strong>M\u00e1ximo<\/strong>: 1024 x 1024 p\u00edxeles<\/li>\n\n\n\n<li><strong>Completo<\/strong>: corresponde con el tama\u00f1o original de la imagen cargada por defecto<\/li>\n<\/ol>\n\n<p>WordPress adapta estos tama\u00f1os por <strong>dos motivos<\/strong>: que no tengas que <strong>cambiar manualmente<\/strong> el tama\u00f1o t\u00fa mismo y para garantizar la selecci\u00f3n del tama\u00f1o adecuado <strong>seg\u00fan el lugar<\/strong> donde se encuentre la imagen en tu p\u00e1gina web.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"2-aspectes-a-tenir-en-compte-sobre-les-mides\">Aspectos a tener en cuenta sobre los tama\u00f1os<\/h3>\n\n<p>Es importante saber c\u00f3mo funcionan los tama\u00f1os de las im\u00e1genes en WordPress y c\u00f3mo se pueden a\u00f1adir tama\u00f1os de imagen personalizados en el sitio web. De esta forma, podr\u00e1s utilizar el tipo de archivo de imagen m\u00e1s apropiado, con el tama\u00f1o y el lugar adecuados.<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Las im\u00e1genes nunca pueden superar los 300 kB y, si pretendes utilizar varias im\u00e1genes dentro de una misma publicaci\u00f3n, procura que \u00e9stas pesen cerca de 150 kB, intentando perder la menor calidad posible.<\/li>\n\n\n\n<li>Las im\u00e1genes publicadas en WordPress no suelen superar los 1000 \u00d7 1000 p\u00edxeles. Un tama\u00f1o est\u00e1ndar que funciona ser\u00eda, por ejemplo, 850\u00d7550 o 640\u00d7426 p\u00edxeles. <\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"3-les-mides-dimatge-m%C3%A9s-recomanables-a-wordpress\">Los tama\u00f1os de imagen m\u00e1s recomendables en WordPress<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>En publicaciones en el blog: 1200 x 630 p\u00edxeles<\/li>\n\n\n\n<li>En la cabecera WordPress: 1048 x 250 p\u00edxeles<\/li>\n\n\n\n<li>En la imagen destacada: 1200 x 900 p\u00edxeles en formato horizontal o 900 x 1200 p\u00edxeles en vertical<\/li>\n\n\n\n<li>Al fondo: 1920 x 1080 p\u00edxeles.<\/li>\n\n\n\n<li>En el logotipo: 200 x 100 p\u00edxeles.<\/li>\n\n\n\n<li>En miniaturas: 150 x 150 p\u00edxeles<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"4-la-qualitat-de-les-imatges\">La calidad de las im\u00e1genes<\/h2>\n\n<p>El formato de imagen recomendable es el formato JPG porque optimiza la relaci\u00f3n entre calidad y peso. El formato PNG conviene reservarlo para im\u00e1genes con fondo transparente a pesar de que para logos e im\u00e1genes vectoriales que tanto deben verse muy grandes como muy peque\u00f1as, lo recomendable es el formato SVG.<\/p>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"510\" height=\"510\" src=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2022\/07\/imatge-en-jpg-1.jpg\" alt=\"Imagen en JPG\" class=\"wp-image-45177\" title=\"\" srcset=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2022\/07\/imatge-en-jpg-1.jpg 510w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2022\/07\/imatge-en-jpg-1-480x480.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 510px, 100vw\" \/><figcaption class=\"wp-element-caption\">Imagen en JPG (de 510 x 510 px)<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"510\" height=\"510\" src=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2022\/07\/imatge-en-png-1.png\" alt=\"Imagen sin fondo en PNG\" class=\"wp-image-45181\" title=\"\" srcset=\"https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2022\/07\/imatge-en-png-1.png 510w, https:\/\/www.demomentsomtres.com\/wp-content\/uploads\/2022\/07\/imatge-en-png-1-480x480.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 510px, 100vw\" \/><figcaption class=\"wp-element-caption\">Imagen sin fondo en PNG (de 510 x 510 px)<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n<p>Los archivos de im\u00e1genes tienen asignado un factor de calidad: para las im\u00e1genes en formato JPG la calidad puede ir del 0% al 100%. Dependiendo de la calidad, una imagen puede ocupar m\u00e1s o menos espacio en disco y las diferencias pueden llegar a ser notables.<\/p>\n\n<p>A partir de cierto nivel de calidad, es pr\u00e1cticamente imposible distinguir la diferencia a simple vista. Por eso, te recomendamos que limites la calidad, por ejemplo, para un JPG, un 80% de calidad podr\u00eda ser suficiente.<\/p>\n\n<p>\u00a0<\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Evita publicar una imagen original en tu p\u00e1gina web de WordPress, ya que habitualmente tardar\u00eda demasiado en cargar, pero no te pases con la compresi\u00f3n si quieres evitar una mala resoluci\u00f3n. Encuentra el equilibrio. <\/p>\n<\/blockquote>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"5-comprimir-i-editar-imatges-per-a-una-c%C3%A0rrega-m%C3%A9s-r%C3%A0pida-\"><strong>Comprimir y editar im\u00e1genes para una carga m\u00e1s r\u00e1pida<\/strong><\/h3>\n\n<p>Una de las mejores formas de mejorar el rendimiento de tu sitio web es optimizar las im\u00e1genes. Adem\u00e1s de comprimirlas, tambi\u00e9n puedes considerar<strong> editarlas para adaptarlas mejor a las necesidades de tu sitio<\/strong>. Si necesitas crear o modificar im\u00e1genes de forma r\u00e1pida y eficaz, herramientas como <a href=\"https:\/\/www.flexclip.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>FlexClip<\/strong><\/a> pueden ser una soluci\u00f3n ideal. Esta plataforma online te permite editar im\u00e1genes y v\u00eddeos de forma intuitiva, mejorando la apariencia de tus visuales sin comprometer la calidad.   <\/p>\n\n<p>Si despu\u00e9s de leer este art\u00edculo todav\u00eda tienes dudas sobre c\u00f3mo gestionar la publicaci\u00f3n de im\u00e1genes en tu sitio web en WordPress, ponte en <a href=\"https:\/\/www.demomentsomtres.com\/es\/contacto\/\">contacto<\/a> con el <a href=\"https:\/\/www.demomentsomtres.com\/es\/equipo\/\">equipo<\/a> de DeMomentSomTres; nos gustar\u00e1 mucho poder ayudarte a alcanzar el \u00e9xito como hemos venido haciendo con el proyecto de <a href=\"https:\/\/www.demomentsomtres.com\/es\/2022\/05\/streaming-en-la-web-un-caso-de-exito-de-medicos-sin-fronteras\/\">M\u00e9dicos Sin Fronteras<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las im\u00e1genes te ayudan a contar la historia de tu marca o empresa. Te explicamos c\u00f3mo convertirlas en un recurso \u00f3ptimo sin que te generen dolores de cabeza. <\/p>\n","protected":false},"author":9,"featured_media":45175,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[796],"tags":[3932],"class_list":["post-45194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-comunicacion-marqueting","tag-wordpress-es"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/45194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/comments?post=45194"}],"version-history":[{"count":2,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/45194\/revisions"}],"predecessor-version":[{"id":23944866,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/posts\/45194\/revisions\/23944866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media\/45175"}],"wp:attachment":[{"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/media?parent=45194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/categories?post=45194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.demomentsomtres.com\/es\/wp-json\/wp\/v2\/tags?post=45194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}