When it comes to picking images for the web there are many different aspects to take into consideration. Should I have professional photos taken of my product or should I buy stock photos? What size should my image files be? What file formats should I use when I send the images? These are all really great questions and of course will vary from project to project. However there are some standards that you can follow.
The most important thing to keep in mind when choosing which photos to use on your website is “Will they enhance my message?” Though this may sound vague the overall goal to achieve is a cohesive site that effectively presents what you are trying to convey. You wouldn’t pick an image of milk to put next to a description of orange juice. A well-placed image can say a thousand words.
Another pertinent use of images is to establish trust and credibility with your audience. The era of overly generalized stock photos has come to an end. If it’s in your budget to hire a professional photographer it would be beneficial to do so. It portrays a more accurate description of what you’re company has to offer. However if you do utilize stock photos opt for the ones that seem more natural, it establishes more trust with your audience.
As far as size is concerned when it comes to images, the bigger the better. An images file size can always be scaled down but it doesn’t work the other way around. “Saving a low-resolution image as a high-resolution file type will not magically improve the image quality —but you better believe that saving a high-res image as a low-res file type will make it look worse.”
There are so many different file formats that it can be hard to decide which one works best and is needed for the best quality. Most of the time we default to the one we are familiar with, JPEGs. Although JPEGs are one of the top 3 files recommended for use on the web it isn’t always the right choice. Let’s look at the top 3 formats for the web in more detail and discuss the scenarios in which we would utilize one or the other.
The three most popular formats for the web are as follows, JPEG, PNG, and GIF.
JPEG: While the most familiar it is best suited for photographs.
- Pros – On the web this file format is great for large image files like photographs due to its use of lossy compression allowing for faster load times on your webpage.
- Cons – JPEGs suffer from generational degradation, meaning that the quality of the images suffers every time it is edited. Furthermore they do not scale well, when the image is scaled it loses resolution quality each time resulting in a very pixelated image. This is why it is not recommended for print or logo design.
PNG: The number one go to for transparent images and logos.
- Pros – This format works well for logos and graphics that you need to be clear and crisp. It uses lossless compression meaning you don’t lose any quality when you scale the image up or down. Not only that but it also gives you the ability to save your image with a transparent background which is especially useful for logos set in the navigation or menu of your site.
- Cons – Unlike the GIF file format it doesn’t support animation and when saving a larger image file it tends to be too large and causes lag when loading your website. It is also a newer file format and although it rarely happens, it occasionally does not work on older browsers such as Internet Explorer.
GIF: Best for small animations.
- Pros – Not unlike the PNG it is great for logos and images with few colors. It also has the ability to save small animations that can then be viewed on the web. Although GIF animations were much more popular in website design back in the 90s and is now more often used for Facebook emoticons and the like.
- Cons – GIFs are the oldest file format and do not have many of the benefits of PNGs or JPEGs. It also has a larger file size when saved in comparison to the PNG.
Articles referenced:
- http://www.digitalfamily.com/tutorials/whats-the-best-image-format-for-the-web/
- http://signalinc.com/the-clients-guide-to-image-resolution-infographic/
- https://www.logaster.com/blog/png/