Are you noticing the images you put on your website are being stretched?


Not knowing proper cropping technique will cause your images to appear stretched on your website even though they look good when you preview them on your desktop.

Most images now a days are very high quality and have a very large image resolution which is great to make sure your website and listings look great. Not only is it important to have high quality but make sure the images are high quality on desktops as well as every mobile platform. A poor quality image will reduce website level in design. There are some technical issues making the the poor quality image on website. Next I will walk you through step-by-step to ensure every image you add to your website is the highest quality..

Getting prepare on your image

1. Selecting the best image quality

Large,pixel perfect, high resolution photos always work nice. Using nice quality images will look impressive and display a professional approach towards on website design. However, using large image is nice. It will also make the size to be increased. The professional way to solve the issue is optimized the images before using it. There are some image optimization tools such as Photoshop, and free online image tools we can use for resizing the Large image to 72ppi web resolution. It will keep the image in small size for web and not losing the quality of the image.

Free Online Optimization Tools:

In Photoshop: File-Save for Web
Screen Shot 2015-10-27 at 12.20.52 PM

2. find out the perfect size of the image to fit the content widget

To avoid layout issues with images off the grid and position wrong with text in the same content widget, the first thing is to determine the dimensions of the content with acceptable guidelines before uploading. We can using our web browser to measure the size of content.

Cropping photo

Using a huge photo can bog a site down easily. The best way will be cropping image in appropriate size before uploading. It can help create a stronger focal point and more dynamic interesting on photo. This result can make the image having much better look than using the full frame photo.  

Using stretched images are not the smart way to display on your website. Every image need to be scaled with a same aspect ratio both vertically and horizontally. Anything else will be making damages on the image. The image will look strange.

Making Thumbnails for table content used

In some of the area we don’t need to use large size photo, we can think about choosing thumbnails photo for small content. We have table content widget that only has limited space, so using small thumbnails photos can make the website more efficient.

Moreover, we also need to pay attention to keeping all the thumbnails in the same size. It is necessary important for design purpose. Our real estate audiences would like to see all the thumbnails in the same dimensions. It will look organized and clean.


Creating a attractive website is a fun project. In the early design process selecting and creating images is a very important step to start. Managing every image in good size and resolution to ensure your website runs well and enhance your image to engage real estate audiences to spend time launching your listings information.