Using Images On A Website

Luis SilvaBy: Luis Silva, on 11/15/2018

How Do I Put An Image On My Website?

As silly as this question may seem, this is something that any web designer or developer can do. Yet, for the inexperienced, this can be a little more challenging. Developers write everything that you want in a website in web developing code. But, we are not going to talk about that in too much detail. If it interests you to learn the skills to do this, you can refer to this article.

Why Should I Use Images In My Website?

When talking about images you must first identify the type of image you are trying to add. Is it a logo, a graphic design, or a photo? Where will you locate them and for what purpose? Images are an amazing feature to add to a website for many reasons, such as:

  • Enhance the design.
  • Strengthen a message.
  • Display a product or brand.
  • Add graphics to backgrounds.

Yet, all these purposes need a different approach, but we will get back to this shortly.

Web designers know that using images increases the website's appeal and reduces cognitive friction. You must know, most people are 90% visual and 10% textual beings. Our brains were designed to process shapes and colors long before we learned to read and write. For more information on this subject see - 10 Scientific Reasons Why People Respond To Your Visual Marketing.

How Do I Choose The Right Image?

Separating your own personal preferences at the time to choose the image will be hard. Consider the following when choosing an image:

  • Your image must be relevant above all.
  • Ensure the image is not cluttered.
  • Most screens' definitions are wide-screens. We suggest that you shoot your photo in landscape mode to allow for a widescreen display.
  • Images should be at least 1900px wide and then resized to the desired size. If the image is too small, you will notice blurring when the browser size increases.
  • Take the photo with the object of focus and place it in the center and allow ample room for cropping.
  • In the case of a logo, a web designer will handle the image to its full potential if the image is using an SVG format.

Preparing The Image For Your Website

Blog post image

Original photo taken by photographer

Blog post image

What it looks like in the browser

As you can see above, the image was shot in portrait and the elephant was zoomed in. This would make a great poster on an office or wall, but unfortunately, it will not be as effective for web design. The photo below was shot in landscape and the elephant was in the center. The photographer left enough environments around the elephant to allow for cropping. Because it is displayed in a wide arrangement, it fits perfectly. If it needed to be cropped to show it in a small container, there is ample room to crop the photo.

Blog post image

Original photo taken by photographer

Blog post image

Original photo taken by photographer