{"id":61854,"date":"2024-01-01T05:01:14","date_gmt":"2024-01-01T04:01:14","guid":{"rendered":"https:\/\/www.aulatina.com\/optimizacion-de-imagenes-y-fondos-con-css\/"},"modified":"2025-09-29T12:26:36","modified_gmt":"2025-09-29T10:26:36","slug":"optimising-images-and-backgrounds-with-css","status":"publish","type":"post","link":"https:\/\/www.aulatina.com\/en\/optimizacion-de-imagenes-y-fondos-con-css\/","title":{"rendered":"Optimising images and backgrounds with css"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Contents\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #303030;color:#303030\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #303030;color:#303030\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aulatina.com\/en\/optimizacion-de-imagenes-y-fondos-con-css\/#Optimizacion_de_imagenes_y_fondos_con_CSS\" >Optimising images and backgrounds with CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aulatina.com\/en\/optimizacion-de-imagenes-y-fondos-con-css\/#Optimizacion_de_imagenes_con_CSS\" >Image optimisation with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aulatina.com\/en\/optimizacion-de-imagenes-y-fondos-con-css\/#Optimizacion_de_fondos_con_CSS\" >Optimising backgrounds with CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aulatina.com\/en\/optimizacion-de-imagenes-y-fondos-con-css\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Optimizacion_de_imagenes_y_fondos_con_CSS\"><\/span>Optimising images and backgrounds with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Optimising images and backgrounds with CSS is a key technique for improving performance and user experience on a website. By reducing the size of image files and improving the loading of backgrounds, we can speed up page load time and provide a smoother experience.<\/p>\n<p>There are several techniques and best practices we can use to optimise images and backgrounds with CSS. In this tutorial, we'll explore some of them and show you how to implement them in your own code.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Optimizacion_de_imagenes_con_CSS\"><\/span>Image optimisation with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Compress images: Before adding images to your website, make sure you compress them to reduce their size without compromising quality. There are several online tools, such as Compressor.io or TinyPNG, that can help you achieve this.<\/li>\n<li>Use appropriate image formats: Choose the right image format for each case. For example, use lossless formats such as PNG or SVG for graphics and icons, and lossy formats such as JPEG for photographs.<\/li>\n<li>Set image dimensions: Specifies the dimensions of images in the CSS to avoid abrupt changes to the layout during page load. This can also help reduce load time by allowing the browser to reserve space for images before they are fully loaded.<\/li>\n<li>Responsive images: Use the CSS property \"background-size: cover\" to ensure that background images fit correctly to different screen sizes. This will prevent images from being distorted or cropped.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid vc_custom_1704623316591\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" class=\"vc_single_image-wrapper   vc_box_border_grey rollover\" data-pretty-share=\"whatsapp,facebook,twitter,pinterest,linkedin\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG-1024x327.png\" class=\"vc_single_image-img attachment-large\" alt=\"tinypng\" title=\"TinyPNG\" srcset=\"https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG-1024x327.png 1024w, https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG-300x96.png 300w, https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG-768x245.png 768w, https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG-1536x490.png 1536w, https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG-18x6.png 18w, https:\/\/www.aulatina.com\/wp-content\/uploads\/2024\/01\/TinyPNG.png 1832w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\"  data-dt-location=\"https:\/\/www.aulatina.com\/en\/optimizacion-de-imagenes-y-fondos-con-css\/tinypng\/\" \/><\/a>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Optimizacion_de_fondos_con_CSS\"><\/span>Optimising backgrounds with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Use backgrounds in image format: Instead of using separate images for backgrounds, consider using background images directly in CSS. This can reduce the number of requests to the server and save loading time.<\/li>\n<li>Use of CSS gradients: Instead of using images for gradient backgrounds, consider using CSS gradients. This can reduce file size and improve site performance.<\/li>\n<li>Repeating backgrounds or mosaics: If you have patterns or small images that repeat across the page, consider using the background-repeat property to create a mosaic effect instead of generating one large image.<\/li>\n<li>Transparent backgrounds: If you use transparent backgrounds in your design, use PNG format instead of JPEG. This will maintain transparency without affecting the quality of the image.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Optimising images and backgrounds with CSS can have a significant impact on your website's performance and user experience. By following these best practices, you can reduce image file sizes, improve load times and provide a smoother experience for visitors.<\/p>\n<p>Remember that optimising images and backgrounds is not only about reducing file size, but also about choosing the right formats and using techniques such as CSS backgrounds or gradients to improve performance...: <a href=\"https:\/\/css-tricks.com\/tag\/image-optimization\/\" target=\"_blank\" rel=\"noopener\">Tips to Optimise Images<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Optimise your images and backgrounds with CSS to improve performance and user experience on your website. By reducing file size and optimising loading times, you can boost your site!<\/p>","protected":false},"author":1,"featured_media":61855,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[532],"tags":[],"class_list":["post-61854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-532","description-off"],"_links":{"self":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/comments?post=61854"}],"version-history":[{"count":0,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media\/61855"}],"wp:attachment":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media?parent=61854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/categories?post=61854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/tags?post=61854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}