USGBC Studio: Using images on the web

Share this :   | | | |
USGBC Studio: Using images on the web

Having great images on your website is an excellent way to make it more eye-catching. And once you’ve purchased or selected the right images, and have the proper licensing for them, you’ll need to format them for the web. Formatting will ensure that your webpages load quickly and don’t get bogged down by large file sizes. This is essential, because every additional second that users wait while files are being rendered increases the likelihood they will give up and leave altogether.

File format

Make sure your images fit the best file format for their intended use. It doesn’t make sense to save a logo file that needs to have a transparent background as a JPEG, or an image that needs to have a high resolution with a lot of detail as a GIF. Why not? Well, here’s what you typically use each image format for:

  • JPEGs are best for photographs
  • GIFs work well for line art and images with a limited color palette, and can be used to create animations (animated GIFs)
  • PNGs are commonly used for logos and line art, especially when transparency is needed

File size, image size, and resolution

After selecting a photograph, it’s important that you pay attention to the image’s dimensions. The larger the original dimensions, the larger the file size and resolution. And the larger the file size, the longer it will take for that page to load. An image with dimensions that are 3,500 by 3,500 pixels and a file size of 5 MB is far too large to use as an image in an article that needs to take up a 500 by 500 pixel space. Instead, use photo-editing software to resize the image to smaller dimensions.

Having an image that is much larger than necessary can cause problems with page load time, but it can also cause problems if you’re using an image that is far too small and trying to stretch it out to make it look bigger. Resizing an image with photo-editing software or in the HTML code so that it fits 500 by 500 pixels, when the original image is only 150 by 150 pixels, will leave you with a blurry and grainy image.

Working with responsive design

The subject matter and orientation of a photograph is important, depending on how you’d like to use it on your site. All images must scale well, meaning the user shouldn’t lose out on the experience of seeing the image if it’s been resized to display on a mobile device. If there are important details that get lost from resizing, you should go with a different image.

Images with a landscape orientation are popular to use on the web, because they are easier to scale down and have a tendency to fit well with any given page design. Images that have a portrait orientation are more difficult to scale down, since it’s easy for them to take up too much height on smaller devices such as smartphones.

So there you have it—a few things to keep in mind the next time you go searching for images for your website. Strive to have images with a high resolution that aren’t bigger than they need to be to fill different areas on your website. Great-looking images and a quick page load time are key to enhancing your users’ experience.

Leave a comment