{"id":2545,"date":"2026-05-28T22:52:02","date_gmt":"2026-05-28T20:52:02","guid":{"rendered":"https:\/\/queiku.es\/images-on-web-pages\/"},"modified":"2026-10-27T20:45:51","modified_gmt":"2026-10-27T18:45:51","slug":"images-on-web-pages","status":"publish","type":"post","link":"https:\/\/queiku.es\/en\/images-on-web-pages\/","title":{"rendered":"Images on web pages"},"content":{"rendered":"\n<h3 id=\"why-images-matter-on-a-website\" class=\"wp-block-heading\">Why images matter on a website<\/h3>\n\n<p>Images on a website are more than just decorative elements. They help create a <strong>first impression,<\/strong> better <strong>explain<\/strong> a service, and <strong>reinforce<\/strong> the message we want to convey. A website may have good copy, a clear structure, and a well-crafted visual identity, but if the images don\u2019t measure up, we run the risk of coming across as generic, less credible, or disconnected from the reality of the business.<\/p>\n\n<p>That\u2019s why, when we plan a website design, images are part of the <strong>visual strategy <\/strong>from the very beginning. Leaving blank spaces where images will go later, or choosing them at the end of the process, are often stopgap solutions that some clients suggest to save time, but in reality, they\u2019re the worst possible decisions. Images must be considered alongside the brand\u2019s tone, the type of customer we want to reach, and the main message we want to leave with the user. <\/p>\n\n<p>A website that needs to convey a sense of warmth is not the same as one that must emphasize technical precision. Nor is a website for a preschool the same as one for a dental clinic, a professional practice, or an industrial company. In each case, the images should help tell a different story. The goal\u2014beyond obvious aesthetic considerations\u2014is to use them with an eye toward what we want the visitor to understand or feel.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"not-all-images-serve-the-same-purpose\" class=\"wp-block-heading\">Not all images serve the same purpose<\/h3>\n\n<p>Not all images on a website serve the same purpose. Some are used to set a tone or provide inspiration. They help convey an overall feeling: tranquility, trust, professionalism, approachability, innovation, or care. Others have a much more specific function: showcasing a product, displaying facilities, introducing a team, or explaining how a service works. And this difference is important because not all of them require the same level of realism.<\/p>\n\n<p>An image illustrating, for example, a section on well-being might be more conceptual. An image of a classroom, a clinic, a machine, a home kitchen, or a workspace should be much more true to life. The <a href=\"https:\/\/www.nngroup.com\/articles\/7-tips-memorable-imagery\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Nielsen Norman Group recommends using relevant, high-quality images<\/a> placed close to the text they accompany, as they can help users better understand and remember the content. It also warns that generic stock images tend to be less specific and less memorable.<\/p>\n\n<p>Simply put: <strong>a good image isn&#8217;t just a pretty picture.<\/strong> It&#8217;s an image that helps the user better understand what they&#8217;re seeing.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"when-can-stock-images-be-useful\" class=\"wp-block-heading\">When can stock images be useful?<\/h3>\n\n<p>Stock images aren&#8217;t bad in and of themselves. The problem arises when they&#8217;re used to represent <strong>something that should be real<\/strong>. They can work well, but only when we want to convey <strong>a general idea<\/strong> and aren&#8217;t associating that photo with our business, our team, our facilities, or our specific product.<\/p>\n\n<p>For example, if a dental clinic wants to convey a sense of approachability, friendly service, or a calm atmosphere, it may make sense to use a <strong>carefully selected <\/strong>stock image: a natural smile, a warm scene, or a photograph that suggests trust without making it appear as though the image depicts an actual situation at the clinic. The same can apply to a website for professional services.<\/p>\n\n<p>Sometimes we need an image to illustrate <strong>an abstract concept:<\/strong> planning, consulting, personalized service, technology, or support. In such cases, a well-chosen stock image can effectively solve the problem if selected thoughtfully. All of these types of inspirations are typically outlined in <a href=\"https:\/\/queiku.es\/guia-de-marca\/\" data-type=\"page\" data-id=\"855\">brand guidelines<\/a>, which often define the tone, characters, approaches, and even color palettes of the images that should support the brand\u2019s <strong>concept<\/strong>, depending on the complexity of the guidelines and the branding project.<\/p>\n\n<p>The key, in any case, is <strong>not to automatically use generic images. <\/strong>A stock photo should fit the brand\u2019s tone, the type of customer, and the message of the section. If it looks like a photo you\u2019ve <strong>seen a thousand times,<\/strong> is too generic, or isn\u2019t closely related to the content, it can do more harm than good.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"when-to-use-real-images\" class=\"wp-block-heading\">When to use real images<\/h3>\n\n<p>There are situations in which real images are not only recommended but almost <strong>essential<\/strong>: if we\u2019re talking about facilities, the actual facilities should be shown. If we\u2019re talking about equipment, the actual equipment should be shown. If we\u2019re talking about our own product, a specific machine, a room, a kitchen, a workshop, or a visually recognizable methodology, the logical thing to do is to <strong>show it exactly as it is.<\/strong><\/p>\n\n<p>This is especially important in businesses where trust plays a major role in the decision-making process: clinics, daycare centers, health centers, law offices, lodging facilities, restaurants, fitness centers, sports centers, or any service where the customer will physically visit the location.<\/p>\n\n<p>At a <strong>preschool<\/strong>, for example, we can use a generic image to talk about well-being, play, or learning. But if we\u2019re talking about the school\u2019s own kitchen, playgrounds, classrooms, safety, or accessible spaces, the most <strong>honest<\/strong> approach is to show actual photos of the school.<\/p>\n\n<p>The same applies to <strong>dental clinics.<\/strong> If the unique selling point is a specific piece of equipment, it wouldn\u2019t make sense to use a generic photo of a different machine. In that case, the best approach would be to show the <strong>actual<\/strong> machine, an image provided by the manufacturer, or a photo taken on-site of the space where it is used.<\/p>\n\n<p>Real-life images don&#8217;t have to be perfect, but they should be <strong>well-crafted.<\/strong> A well-executed <strong>photo shoot <\/strong>can add <strong>much more value<\/strong> than a collection of technically flawless stock images.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"the-risk-of-promising-something-that-doesnt-materialize\" class=\"wp-block-heading\">The risk of promising something that doesn&#8217;t materialize<\/h3>\n\n<p>A well-designed website doesn&#8217;t stop working when the user closes the tab. What a user sees on the page shapes their expectations for what comes next. If the website promises bright, modern, and spacious facilities, but when the user arrives at the location, they find something completely different, it creates a breach of trust. Even if the service is good, <strong>the initial impression may be negative.<\/strong><\/p>\n\n<p>That is one of the main problems with using images that do not reflect reality: it&#8217;s not just about aesthetics; it&#8217;s about <strong>consistency<\/strong>.<\/p>\n\n<p>An image may be making a promise without us even realizing it. It promises spaciousness, modernity, approachability, technology, exclusivity, or personalized service. If that promise isn&#8217;t kept, the user may feel that the website was exaggerating or trying to <strong>mislead<\/strong> customers.<\/p>\n\n<p>That&#8217;s why, when we choose images, we don&#8217;t just think about how the page looks. We also think about what <strong>expectations<\/strong> it creates. <strong>Trust<\/strong> is built when what is communicated matches what is offered.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"images-trust-and-user-experience\" class=\"wp-block-heading\">Images, trust and user experience<\/h3>\n\n<p>The user experience depends not only on whether a website is easy to navigate, but also on whether the user can quickly understand where they are, what\u2019s being offered, and whether they can trust that business. Images are very helpful in that process.<\/p>\n\n<p>A good photograph can answer more questions than a paragraph of text. It can show what a space looks like, who is behind the company, what the atmosphere is like, or how a product is used. <\/p>\n\n<p>The Nielsen Norman Group already pointed out in its article on <a href=\"https:\/\/www.nngroup.com\/articles\/photos-as-web-content\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">photographs as web content<\/a> that users tend to pay more attention to images of real people associated with the company than to generic stock photos. This doesn\u2019t mean that every website has to be filled with portraits or team photos, but rather that, when the reality of the business is important for building trust, hiding it behind generic images can be a missed opportunity.<\/p>\n\n<p>In many projects, a simple but well-directed photo shoot can completely change how the website is perceived. There\u2019s no need to turn every page into a photo essay. All you need are useful, honest images that align with what the client needs to see to make a decision.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"you-also-have-to-pay-attention-to-the-technical-aspects\" class=\"wp-block-heading\">You also have to pay attention to the technical aspects<\/h3>\n\n<p>Choosing the right images <strong>isn&#8217;t just a visual matter. <\/strong>You also have to <strong>optimize them properly<\/strong> for the web, since an image that&#8217;s <strong>too large<\/strong> can slow down the page, a <strong>poorly cropped<\/strong> image may not make sense on mobile devices, and an image without <strong>alt text<\/strong> may be less accessible. A haphazard gallery can make a page seem more confusing, even if it has good photos.<\/p>\n\n<p><strong>Google<\/strong> recommends using <strong>high-quality images<\/strong> that are <strong>relevant<\/strong> to the content, with descriptive file names and alt text where appropriate. Its documentation on best practices for images in Google Search emphasizes that images should <strong>help users understand<\/strong> the page&#8217;s content.<\/p>\n\n<p>It is also important to distinguish between informational images and decorative images. The <strong>W3C<\/strong> accessibility guidelines explain that <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/informative\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">informational images<\/a> require <strong>a text alternative<\/strong> that conveys their meaning, while purely decorative images should not add unnecessary <strong>noise<\/strong> for users who navigate the web with assistive technologies.<\/p>\n\n<p>In practice, this means that images should be uploaded in a meaningful way:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>the right size<\/li>\n\n\n\n<li>with good compression<\/li>\n\n\n\n<li>with a layout designed for desktop and mobile<\/li>\n\n\n\n<li>with descriptive filenames<\/li>\n\n\n\n<li>with alternative text when it provides additional information<\/li>\n\n\n\n<li>without filling the page with meaningless images<\/li>\n<\/ul>\n\n<p>Good visuals should <strong>enhance<\/strong> the website, not make it slower or harder to use.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Summary<\/h2>\n\n<p>The images on a website are <strong>even more important<\/strong> than they seem. They aren&#8217;t just a <strong>visual accompaniment. <\/strong>They help convey trust, explain services, showcase spaces, reinforce the brand&#8217;s identity, and build anticipation for the business.<\/p>\n\n<p>Las im\u00e1genes de banco pueden ser \u00fatiles cuando se usan con <strong>criterio<\/strong> y no intentan representar algo que deber\u00eda ser real. Pero cuando hablamos de instalaciones, equipo, productos, maquinaria, espacios o aspectos diferenciales del negocio, las im\u00e1genes reales suelen ser mucho m\u00e1s adecuadas.<\/p>\n\n<p>La clave est\u00e1 en elegir cada imagen pregunt\u00e1ndonos <strong>qu\u00e9 aporta, qu\u00e9 comunica y qu\u00e9 expectativa genera.<\/strong><\/p>\n\n<p>Una web <strong>honesta<\/strong> no tiene por qu\u00e9 ser menos atractiva. Al contrario: cuando las im\u00e1genes reflejan bien la realidad del negocio, la p\u00e1gina suele resultar m\u00e1s cercana, m\u00e1s cre\u00edble y m\u00e1s \u00fatil para quien est\u00e1 valorando contactar.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-group fuentes is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 id=\"sources\" class=\"wp-block-heading\">Sources<\/h5>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/7-tips-memorable-imagery\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">7 Tips for Memorable and Easy-to-Understand Imagery<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/photos-as-web-content\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Photos as Web Content<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/accessibility.huit.harvard.edu\/describe-content-images\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Write helpful Alt Text to describe images<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/informative\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3C Informative images<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Images on a website are more than just a visual resource. They help build trust, better explain a service, and prevent users from noticing a discrepancy between what they see online and what they later find at the actual business.<\/p>\n","protected":false},"author":1,"featured_media":2546,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","inline_featured_image":false,"footnotes":""},"categories":[58,59],"tags":[],"class_list":["post-2545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance","category-web-design"],"_links":{"self":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts\/2545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/comments?post=2545"}],"version-history":[{"count":1,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts\/2545\/revisions"}],"predecessor-version":[{"id":2547,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts\/2545\/revisions\/2547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/media\/2546"}],"wp:attachment":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/media?parent=2545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/categories?post=2545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/tags?post=2545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}