Web design trends come and go at an alarming rate. While those trends, by nature, are ever-changing, there is one element in design that remains the exception: image quality.
It’s vital for any website to have high-resolution images.
Those above-the-fold backgrounds, gallery displays, and portfolios are essential to gain consumer trust. If you cannot display images properly on your website, how can you expect people to buy into your credibility — to believe that you mean business?
There is, however, an obstacle to high-resolution images. Too many sites use images that, although beautiful, slow up website speed, creating a terrible user experience. And if it takes too long, the user will give up and take his or her interest — and potential business — elsewhere.
So how do we find that balance between quality and speed?
5 Tactics to Keep the Image Quality/Size Ratio on Point
1. Open it up in a new tab.
Many pages on the web have thumbnail images, icons, and logos that are too large for the space that code allows them to utilize. If you perform a quick audit of your site, opening the images in a new tab, you will see what images can be downsized without losing any of the aesthetics.
If they show up 3Xs larger in the new tab than they do on your page, adjust the size to fit what you need — they already display that size anyway.
2. Web = 72ppi
Pixel imagery is seemingly ubiquitous. Even your phone takes a high-def image. While it makes for great photography, uploading that image directly to your site slows it up.
If any of your images are higher than 72 pixels per inch, you’re wasting server space.
A 72 ppi and a 400 ppi image look the same on almost every screen users look at to peruse your website. Downsizing the pixels can greatly increase your page speed on its own — making it a win-win situation.
3. Save it for web — not for print
Photoshop has this amazingly easy tool called “Save for web.” It can be found under …
File » Export » Save for Web
… or through the handy-dandy shortcut …
Shift+Option+Command+S (for mac systems)
I’m sure there is a PC equivalent, but I don’t want to steer you wrong. With this tool, you can choose .png or .jpeg and adjust the quality settings so you can save it in the smallest possible size while still making sure it will look beautiful on high-resolution screens.
4. Blur the background
Most people don’t look at every inch of the giant image on a site. As with everything else in this world, the human eye follows a natural path, spending a short time with each section. Chris Bank does a fantastic job explaining this:
“Whether it be a scurrying movement in the corner of your eye or a sexy walk from someone across the street, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow definite trends — including how they view a web page.”
Because we know that the human eye rarely spends even a fraction of a second on anything but the focal point of an image, we have the ability to unashamedly sacrifice the edges and background to page speed. The difference may end up looking something like this:
The average user will only spend time looking at the family in the center, and in blurring the background and edges, I can allow the user to still look at the family while reducing my image size by over 20%.
5. Know your acronyms.
There is an overwhelming number of file types you can save your images as, and it helps to know their purpose. The most common in web are .jpg, .png, and .svg.
- .JPG or .JPEG (Joint Photographic Experts Group) are best used for photographs. They allow for intricate color palettes and gradients, as well as can be reduced in quality as needed.
- .PNG (Portable Network Graphics) are predominantly used if you need transparency, and there are two ways to save based on the complexity. If you have only a few colors, .PNG-8 is for you, but if you need a transparent background and a complex color pallet, go for the .PNG-24.
- .SVG (Scalable Vector Graphics) are fantastic for page speed. Use this file type anytime you can. This image type is essentially a lot of math that makes up the image and looks crisp and clean on any screen/at any scale. Use .svg if you have made the image using vector paths and shapes (usually in Adobe Illustrator, but now supported in Photoshop using paths and shapes). An SVG path is ideal for logos and icons that may appear at very different sizes on different screens.
It can be tricky to find that sweet spot of image quality/size ratio. Here at Reunion Marketing, we are constantly trying to find new and better ways to make that page load quicker and make our users happier. If you have any questions about saving for web, image file type, or even digital marketing in its entirety, our expert team is waiting to show you why we claim to be the best.