July 31, 2018

6 Ways to Optimize Images For a Better Website Design

One of the largest discrepancies designers and developers have when updating their websites is image size. Since we build our websites around responsive design, this makes image dimensions and pixels incredibly important. In this article we will discuss the top key items to keep in mind when you're choosing images for your website:


1. Dimensions always matter.

It’s essential to know the size and dimension of the image that you need. To understand this, take some time to research how your image will fit in a specific space. It’s important because if it isn’t that specific dimension it will not display how you want it to. For example, if it is too small for the space it could add additional white space around the photo or stretch the image, making it appear blurry. When a developer, designer, or your project manager requests a size, always remember to send the specific size you need. This will ensure the quality of your image.


2. Is the size just a little too big?

Depending on where your images are displayed on the site, a good starting point is between 50kb-150kb. It needs to be large enough to be clear while just small enough that it doesn’t take 30 seconds to load on the page. There are many useful tools online like tinypng.com that will compress your large photos while retaining the quality of the image.


3. The bigger the better

If you need assistance cropping your images, or sizing them properly, reach out to your project manager or designer and send over your images. They will ensure they fit and match the allocated space on the site. Before you send, ensure the images are as large as possible. We can make images smaller not larger. It may seem obvious, but If you make a small image larger it will lose the quality of the image and become blurry and unfocused.


4. Hire the professional photographer

If you see images on a site and you wonder how the images are so incredibly clear and professional looking; it’s because they were most likely taken by a professional photographer. Most likely, the top performing sites have those types of images on their pages. Breaking out your wallet for some professional photos of your items, products, services will pay off in the long run. Not only will it your website be visually appealing, but using this resource will provide content that is unique to your company’s brand.

Using stock photos can be nice for textures and backgrounds but having some great key photos of your employees, products, services will offer a higher level of credibility and professionalism. Our client, Heaven’s Trail does a great job in providing professional and interactive looking photography on their website.


5. Cropping your photos

When you’re ready to crop your image we suggest you keep the following elements in mind:

Ensure that your main content within the image is not close to the edge or border of your image. As you know, sites are now responsive, so when an image appears perfectly sized and clear on full screen, it might not on a smaller screen like mobile or tablet viewport.

Make sure to leave some buffer room around the image border in case there are components of your image that may get cut off as your screen changes in size. If you need help cropping an image remember to contact your agency or savvy team member and they can help create guidelines for you. Try to minimize cluttering your page with image margins that take up the majority of your viewport or screen. We recommend cropping your image appropriately to leave room for white space. If you’re interested in learning more about key elements for visual website design check out our post on “Utilizing Basic Design Theories in Content-Heavy User Experience Design.”


6. Remove text on your image

Imagine you want to share a key message on your image. Ideally, your developer will code in text to lay on top of your image. This allows your text to be as clear as possible no matter the size of the screen. If you insert the text in the image it will get contorted. The reason this may happen is that the site is taking into mind the dimensions of the photo, not the text. It is ensuring that the photo displays clearly and fits properly to the site. Those dimensions might not be the same for the text. This means the text will get squished or expand making it look blurry, stretched, or pixelated. When the developers add a space for text on your image they are looking at the image size and text size separately ensuring they both fit properly to the screen size.
BACK TO BLOG

By: Sarah Schoffman

Project Manager