{"id":52387,"date":"2014-01-23T08:00:42","date_gmt":"2014-01-23T07:00:42","guid":{"rendered":"https:\/\/www.humanlevel.com\/sin-categorizar\/optimizacion-de-imagenes-para-la-web.html"},"modified":"2023-10-16T17:10:31","modified_gmt":"2023-10-16T15:10:31","slug":"optimization-of-images-for-the-web","status":"publish","type":"post","link":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web","title":{"rendered":"Optimization of images for the Web"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Index<\/p><ul class=\"toc_list\"><li><a href=\"#Basic_concepts\">Basic concepts<\/a><\/li><li><a href=\"#JPG_Joint_Photographic_Experts_Group\">JPG (Joint Photographic Experts Group)<\/a><\/li><li><a href=\"#PNG-24_Portable_Network_Graphics\">PNG-24 (Portable Network Graphics)<\/a><\/li><li><a href=\"#PNG-8\">PNG-8<\/a><\/li><li><a href=\"#GIF_Graphics_Interchange_Format\">GIF (Graphics Interchange Format)<\/a><\/li><li><a href=\"#WEBP\">WEBP<\/a><\/li><li><a href=\"#Finally_some_general_recommendations\">Finally, some general recommendations<\/a><\/li><\/ul><\/div>\n<p>If we want <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-the-loading-speed-of-your-website-affects-seo\"> a profitable Web, it is essential to have a good performance<\/a>. To give you an idea, when Amazon reduces the loading time by 100 milliseconds, their revenue increases by 1%, which means significant sums of money for them.<\/p>\n<p>There are many<strong> factors that can be optimized<\/strong> to achieve shorter load times, but the two<strong> most important are the database and the images<\/strong>. In this post I&#8217;m going to talk about <strong>image optimization for content editors, designers and SEOs<\/strong>. There are also other techniques that can be applied by developers, typesetters and system administrators, but these will not be discussed here.<\/p>\n<p><strong>Images typically account for 70 to 90% of the information the browser needs to download<\/strong> to display a page. It is vital for the Web that content editors know how to <strong>reduce the space taken up by images<\/strong> without any perceived difference in quality. Also keep in mind that<strong> the images<\/strong>The loading time will also worsen, <strong>serve to attract attention<\/strong>therefore have <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/digital-marketing\/how-to-take-better-photos-for-your-online-store\">good photographs in an online store<\/a> or any other type of Web, which <strong>load fast and look good<\/strong>is one of the things that we can do to try to <strong>increase revenues<\/strong> of our website.<\/p>\n<p>But before we get into the subject, let&#8217;s look at some basic concepts:<\/p>\n<h2><span id=\"Basic_concepts\">Basic concepts<\/span><\/h2>\n<ul>\n<li><strong>Difference between lossless and lossy compression<\/strong>: When we compress an image by losing quality in the process, we are using lossy compression. If, on the other hand, the compressed image remains identical to the original, we are using lossless compression.<\/li>\n<li><strong>Raw format<\/strong>: In a computer, a raw format image is one that has no compression and contains the information as the computer needs it to display it on the screen. In photography, the raw format is different, since the image is saved as it is captured by the sensor (although it is not usually completely raw, since cameras usually apply lossless compression).<\/li>\n<li><strong>Pixel<\/strong>: The images displayed by the computer on the screen are composed of a grid of dots called pixels, each pixel has a numerical value associated with it that indicates what color the monitor should represent.<\/li>\n<li><strong>Color depth or number of bits<\/strong>: If we consider the width and height of the image as the X and Y axes of representation, the color would be the Z (the depth) since the color is just another numerical value. If we say that the pixels of an image can represent 8-bit colors, this means that each pixel can have any value between 0 and 255, since 256 is the number of different colors we can represent with 8 bits (<sup>28=256<\/sup>).<br \/>\nThe color depth normally used by any monitor is 24 bits and, therefore, this is the maximum that image formats usually have.<\/li>\n<li><strong>Image size<\/strong>: The greater the number of bits and the size of the image, the more space it will occupy. Let&#8217;s think for example of a small image of 100&#215;100 pixels, if each pixel occupies 1 byte (8 bits of color depth), then our image in raw format will occupy 100&#215;100=10,000 bytes = 9.76 KBi. But if instead of 8 bits, we have 24 bits, each pixel of our image will occupy 3 bytes and therefore the entire image will occupy three times as much, 30,000 bytes = 29.29 KBi.<\/li>\n<\/ul>\n<p>Now that we have seen some of the basic concepts, let&#8217;s look at the <strong>different formats in which we can save our images and which one we should use at any given moment<\/strong>. It doesn&#8217;t matter if you use Gimp, Adobe Photoshop, Adobe Lightroom or Corel Photopaint, everything I&#8217;m going to explain<strong> is applicable to any photo retouching program<\/strong> you use.<\/p>\n<h2><span id=\"JPG_Joint_Photographic_Experts_Group\">JPG (Joint Photographic Experts Group)<\/span><\/h2>\n<p>JPG is a lossy 24-bit color compression format. It does not support animations or transparencies. It is the <strong>ideal<\/strong> format <strong>for photographs<\/strong>, in color or black and white, especially if they have a wide variety of shades.<br \/>\nWhen saving such an image, the <strong>quality level<\/strong> should be set between 0 and 100%. <strong>The higher this value is set, the larger the image will be<\/strong> and the less the loss of quality will be noticeable. Normally, <strong>between 70% and 80% we will not see any difference between the compressed image and the original<\/strong>, since the compression applied is based on statistical studies of human vision. In some programs, you can choose to subsample the color of the image. We will select the<strong> subsampling<\/strong> option that reduces the size the most and this will be the <strong>4:2:0 or 2&#215;2 1&#215;1 1&#215;1<\/strong> option. With this <strong>we will reduce the color information contained in the image<\/strong> and we will not notice any difference. If the image is in black and white, all color information can be removed with 4:0:0, but this is usually done automatically by the programs.<br \/>\nIf you are interested in the subject, in an article on my personal blog I explain the <a href=\"http:\/\/www.pensamientoscomputables.com\/entrada\/algoritmo-compresion-jpeg-jpg.html\">JPG compression algorithm and the meaning of subsampling<\/a> in more detail.<\/p>\n<h2><span id=\"PNG-24_Portable_Network_Graphics\">PNG-24 (Portable Network Graphics)<\/span><\/h2>\n<p><strong>32-bit<\/strong> lossless compression format. Of those 32 bits, 24 are used to represent the colors and 8 to make <strong>transparencies<\/strong> with different levels of opacity in each pixel. Animation is not supported. If we use it without transparency it will use only the 24 bits indicated in the name.<br \/>\nThis format<strong> should only be used when it is really necessary to<\/strong> use images with transparencies. If the background behind the image is not going to be displaced or the same image is not going to be used with another background, it is preferable to paste the one you are going to have on the Web and save the image in another format, since using a higher number of bits per pixel and using compression without loss of information, <strong>this format takes up the most space of all<\/strong>.<br \/>\nIn some programs we can adjust the compression level between 0 and 9, being 9 the value that will occupy less space and the one we should always choose, since the image will not lose quality, regardless of the compression value it has.<\/p>\n<h2><span id=\"PNG-8\">PNG-8<\/span><\/h2>\n<p>Like PNG-24, it uses the <strong>same lossless compression algorithm<\/strong>, but with a color depth of 8 bits. <strong>It supports transparency, but not with different opacity levels<\/strong>, so if the transparent area has rounded edges, it will give a saw-tooth effect (although it is actually the photo retouching tools that do not allow saving with different opacity levels, the format does). Animation is also not supported.<br \/>\nImage formats with 8-bit color depth are also called<strong> 8-bit palette or indexed color<\/strong>. This is because each of the 256 colors is associated, in an <strong>index<\/strong>, to one of the 16,777,216 colors that can be represented with 24 bits. Therefore, we have a limited palette of 256 colors, which have been previously chosen from the 16 million available.<\/p>\n<p>This is the <strong>ideal<\/strong> format <strong>for drawings, icons, logos, designs<\/strong> and in general any image with few colors. Preferably we will use <strong>PNG-8 rather than JPG for this type of graphics<\/strong>If we use JPG we will notice the effects of the lossy compression applied by this algorithm, since it will seem that a kind of perceptual blur has been applied to the result, and this is much more noticeable in a design with well-defined edges than in a photograph. In addition, <strong>with JPG we will not get a compression level as high as PNG for this type of images<\/strong>, since it compresses better in situations where the same color is repeated several times.<\/p>\n<figure id=\"attachment_13031\" aria-describedby=\"caption-attachment-13031\" style=\"width: 282px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13031 \" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/ejemplo-compresion.jpg\" alt=\"example-compression\" width=\"282\" height=\"255\"><figcaption id=\"caption-attachment-13031\" class=\"wp-caption-text\">In this image it has been exaggerated how JPG compression produces artifacts in design images.<\/figcaption><\/figure>\n<figure id=\"attachment_13036\" aria-describedby=\"caption-attachment-13036\" style=\"width: 185px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13036 \" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/degradado.gif\" alt=\"degraded\" width=\"185\" height=\"167\"><figcaption id=\"caption-attachment-13036\" class=\"wp-caption-text\">Example of weaving<\/figcaption><\/figure>\n<p>If the image has more than 256 colors we can also save it in PNG-8, but we must reduce the colors beforehand. The program will give us the choice of a <strong>screening<\/strong> technique. Each will differently distribute pixels of one color around pixels of another color to give the appearance of an intermediate color between the two. <strong>Screening<\/strong>, although it requires some loss of information, <strong>allows this format to be used with images that go a little over 256 colors<\/strong>, without much loss of information.<br \/>\nIf the image has less than 256 colors or we want to reduce the number of colors so that it takes up less space, we can specify this to the program. Thus, we can have images with the following relationships between number of bits and colors: 1 bit = 2 colors, 2 bits = 4 colors, 3 bits = 8 colors, 4 bits = 16 colors, 5 bits = 32 colors, 6 bits = 64 colors and 7 bits = 128 colors.<br \/>\nThe biggest <strong>problem with PNG-8 and PNG-24<\/strong> is that the gamma correction applied to the colors prevents us from <strong>creating images<\/strong> so that in all <strong>browsers they have the same colors as other elements of the Web<\/strong>.<\/p>\n<h2><span id=\"GIF_Graphics_Interchange_Format\">GIF (Graphics Interchange Format)<\/span><\/h2>\n<p>GIF, like PNG-8, is 8-bit, lossless and allows transparencies without different levels of opacity. Unlike PNG, no gamma correction is applied to the colors. Its main feature is that it is the only format supported by all browsers that <strong>allows the use of animations<\/strong>.<\/p>\n<p>This format should be used like PNG-8 <strong>for graphics with few colors<\/strong>, but only when the images are only a few pixels or we want to maintain the chromatic relationship with other colors on the Web. For all other cases, <strong>PNG-8 is better because it gets smaller file sizes<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/arroba.gif\" alt=\"at\" width=\"60\" height=\"60\">This format was widely used in the early days of the Web to put animations. As an interesting anecdote, its inventors used an algorithm that had a patent without knowing it, which caused that from 1994 to 2004 you had to pay a license fee to put GIF files on your Web and this generated a campaign against this format called <em>burn all gifs<\/em>.<\/p>\n<h2><span id=\"WEBP\">WEBP<\/span><\/h2>\n<p>This format has been<strong> created by Google to replace all others<\/strong>. The problem is that it <strong>is only compatible with Chrome and Opera browsers<\/strong>, plus there are few tools to manage it. It is 24-bit, can be used lossy or lossless, can support transparencies with different opacity levels and animations. The only thing it does not support is 8-bit indexed color, so it beats JPG in photo quality and compression, but in graphics images with few colors PNG-8 still beats it.<br \/>\n<strong>Its use is discouraged in any case because of its poor support.<\/strong><\/p>\n<h2><span id=\"Finally_some_general_recommendations\">Finally, some general recommendations<\/span><\/h2>\n<ul>\n<li><strong>Never<\/strong> save the images at a <strong>larger size than the hole where they will be displayed<\/strong>.<\/li>\n<li>Always save images in <strong>progressive mode if it is a JPG and in interlaced mode if it is a GIF or PNG<\/strong>. This option causes the <strong>entire image<\/strong> to be <strong>displayed with a low resolution version that will increase in detail<\/strong>, instead of appearing bit by bit or line by line. This will slightly increase the size of the file, but will<strong> the user will perceive that the image is loaded sooner<\/strong> and every good computer engineer knows that, in any given <a href=\"https:\/\/www.humanlevel.com\/en\/digital-marketing-dictionary\/user-interface-ui\" target=\"_blank\" rel=\"noopener noreferrer\">user interface<\/a>,<strong> perceived speed is always more important than actual speed<\/strong>So we have progress bars that create the effect that tasks take less time, when in fact they cause them to take a little longer.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/ejemplo-progresivo-entrelazado.jpg\" alt=\"interlocking progressive example\" width=\"400\" height=\"319\"><\/li>\n<li>In the text fields provided by the formats for storing <strong>meta information<\/strong>, do not store anything and <strong>remove them if possible<\/strong>. These are data that do not contribute anything, such as the date of creation or EXIF data of the parameters of the camera that took the photograph. On the other hand, it is advisable to fill in the comment fields with keywords describing the image, as the Google image search engine spider is able to read them.<\/li>\n<li>Write <strong>image names as friendly URLs<\/strong>, i.e., without accents and hyphens and with hyphens instead of spaces.<\/li>\n<li><strong> Always<\/strong> write<strong> an alternative text<\/strong> when inserting an image in the HTML (&#8220;alt&#8221; attribute).<\/li>\n<\/ul>\n<p>So far my recommendations. If you have any doubts, the best thing to do is to try saving the image in several formats and choose the one that takes up the least space and looks the best.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IndexBasic conceptsJPG (Joint Photographic Experts Group)PNG-24 (Portable Network Graphics)PNG-8GIF (Graphics Interchange Format)WEBPFinally, some general recommendations If we want a profitable Web, it is essential to have a good performance. To give you an idea, when Amazon reduces the loading time by 100 milliseconds, their revenue increases by 1%, which means significant sums of money for [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":48253,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[349],"tags":[366,379],"class_list":["post-52387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-technical-seo","tag-wpo","entry"],"yoast_head":"\n<title>Optimization of images for the Web<\/title>\n<meta name=\"description\" content=\"Learn how to use image formats for the Web, obtaining maximum compression and maintaining quality. If you follow these tips you will improve the performance of your Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimization of images for the Web\" \/>\n<meta property=\"og:description\" content=\"Learn how to use image formats for the Web, obtaining maximum compression and maintaining quality. If you follow these tips you will improve the performance of your Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\" \/>\n<meta property=\"og:site_name\" content=\"Human Level\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-23T07:00:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-16T15:10:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ram\u00f3n Saquete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Daiatron\" \/>\n<meta name=\"twitter:site\" content=\"@humanlevel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram\u00f3n Saquete\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\"},\"author\":{\"name\":\"Ram\u00f3n Saquete\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\"},\"headline\":\"Optimization of images for the Web\",\"datePublished\":\"2014-01-23T07:00:42+00:00\",\"dateModified\":\"2023-10-16T15:10:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\"},\"wordCount\":1966,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg\",\"keywords\":[\"Technical SEO\",\"WPO\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\",\"url\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\",\"name\":\"Optimization of images for the Web\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg\",\"datePublished\":\"2014-01-23T07:00:42+00:00\",\"dateModified\":\"2023-10-16T15:10:31+00:00\",\"description\":\"Learn how to use image formats for the Web, obtaining maximum compression and maintaining quality. If you follow these tips you will improve the performance of your Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg\",\"width\":400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.humanlevel.com\/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimization of images for the Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.humanlevel.com\/en#website\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"name\":\"Human Level\",\"description\":\"Web positioning and online marketing consultant Human Level\",\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.humanlevel.com\/en?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\",\"name\":\"Human Level\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"width\":268,\"height\":51,\"caption\":\"Human Level\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/humanlevel\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\",\"name\":\"Ram\u00f3n Saquete\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"caption\":\"Ram\u00f3n Saquete\"},\"description\":\"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.\",\"sameAs\":[\"https:\/\/x.com\/Daiatron\"],\"url\":\"https:\/\/www.humanlevel.com\/en\/author\/ramon\"}]}<\/script>\n","yoast_head_json":{"title":"Optimization of images for the Web","description":"Learn how to use image formats for the Web, obtaining maximum compression and maintaining quality. If you follow these tips you will improve the performance of your Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web","og_locale":"en_US","og_type":"article","og_title":"Optimization of images for the Web","og_description":"Learn how to use image formats for the Web, obtaining maximum compression and maintaining quality. If you follow these tips you will improve the performance of your Web.","og_url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web","og_site_name":"Human Level","article_published_time":"2014-01-23T07:00:42+00:00","article_modified_time":"2023-10-16T15:10:31+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg","type":"image\/jpeg"}],"author":"Ram\u00f3n Saquete","twitter_card":"summary_large_image","twitter_creator":"@Daiatron","twitter_site":"@humanlevel","twitter_misc":{"Written by":"Ram\u00f3n Saquete","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#article","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web"},"author":{"name":"Ram\u00f3n Saquete","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94"},"headline":"Optimization of images for the Web","datePublished":"2014-01-23T07:00:42+00:00","dateModified":"2023-10-16T15:10:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web"},"wordCount":1966,"commentCount":0,"publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg","keywords":["Technical SEO","WPO"],"articleSection":["SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web","url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web","name":"Optimization of images for the Web","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en#website"},"primaryImageOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg","datePublished":"2014-01-23T07:00:42+00:00","dateModified":"2023-10-16T15:10:31+00:00","description":"Learn how to use image formats for the Web, obtaining maximum compression and maintaining quality. If you follow these tips you will improve the performance of your Web.","breadcrumb":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#primaryimage","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/optimizacion-imagenes.jpg","width":400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.humanlevel.com\/en"},{"@type":"ListItem","position":2,"name":"Optimization of images for the Web"}]},{"@type":"WebSite","@id":"https:\/\/www.humanlevel.com\/en#website","url":"https:\/\/www.humanlevel.com\/en","name":"Human Level","description":"Web positioning and online marketing consultant Human Level","publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.humanlevel.com\/en?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.humanlevel.com\/en#organization","name":"Human Level","url":"https:\/\/www.humanlevel.com\/en","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","width":268,"height":51,"caption":"Human Level"},"image":{"@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/humanlevel"]},{"@type":"Person","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94","name":"Ram\u00f3n Saquete","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","caption":"Ram\u00f3n Saquete"},"description":"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.","sameAs":["https:\/\/x.com\/Daiatron"],"url":"https:\/\/www.humanlevel.com\/en\/author\/ramon"}]}},"_links":{"self":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/comments?post=52387"}],"version-history":[{"count":2,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52387\/revisions"}],"predecessor-version":[{"id":54957,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52387\/revisions\/54957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media\/48253"}],"wp:attachment":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media?parent=52387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/categories?post=52387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/tags?post=52387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}