Image on websites

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 unexperienced, 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 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 design to process shapes and color 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 wide screen 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 in the center and allow ample room to crop.
  • In 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.

Images come in different sizes and they rarely display on your website in their natural size. Your web designer will alter your image according to the location, size, and use. This includes cropping and sizing. One of the most common mistakes I have came across is that the photographer zoomed into the object of focus. This causes the image to cut the object of focus when it displays in a wide screen. See below the difference between a bad photo and a good photo.

bad
Original Photo
bad display
Displayed on website

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.

good
Original Photo
good-display
Displayed on website

Leave a Reply