The combination of very cheap smartphones and tablets, and the more affordable data plans from cellular networks, have paved the way for a world that’s more connected and interactive now than it has ever been. This, as you might expect, is a great thing, but such benefits don’t come without their drawbacks.
Foraging through the Internet of today, you’ll likely come across many, many websites that take advantage of the increase in connectivity that our world and its people can now enjoy; websites work seamlessly from desktop to mobile devices, native apps are available for your smartphone and tablet, and other websites such as YouTube offer the ability to wirelessly stream high-definition video content from one device to another. However, there’s one thing in-particular that stands out above the rest, when I scour the Internet in 2015 — photography. There’s an increasing trend in the usage of very large images in web design. Therefore, I think it’s only fair that we go through some reasons as to why using such high resolution imagery is still very much something you should reconsider.
Let’s start with something you, as a web designer or content creator, should be very aware of. While both fiber-optic broadband and unlimited data plans are becoming more popular and more affordable, it’s inevitable that a significant portion of your traffic will be coming from users who still have some kind of data bandwidth constraints in place, whether it be home broadband, or a monthly allowance on their cellular contract.
We hate the ideology that bandwidth caps exist, but until the day comes where everyone can enjoy an unlimited bandwidth plan on their home broadband and their cellular contract, this is something you’re going to want to keep in mind when you’re using very large photos. Websites, blogs and forums alike are all affected by this problem, so I feel it deserves the top spot.
When a visitor interacts with your website, bandwidth is deducted from both your web host’s monthly allowance, and your visitor’s monthly cap. Therefore, it’s of the utmost importance that you conserve as much unnecessary data from traveling to and from your web server as possible.
Image sprites are a brilliant method for this, but they won’t be much use for very large photos. Sprites bundle many smaller images into one larger image, and then CSS is used to target each individual image contained in the sprite. Since photos are likely going to be many times larger than your sprite, you’re going to want to keep them separate. Instead, for photos, and other large imagery where transparency isn’t required, you can convert any .PNG images to .JPG, and reduce the image quality to around 75%, or level 12, depending on which program you’re using. If your image contains transparency, you’re going to want to stick with the .PNG format.
Themes can limit the areas of your website intended for content consumption. Large header images (often called hero images by web developers), sidebars and heaps of whitespace in your theme are the most common causes.
Blogs in-particular are the primary target for this reasoning since they typically contain more secondary content than other types of website. When you’re writing your blog posts, ensure that no included photos or images exceed the width of the primary content area.
The best themes always make sure they cater to as many different display resolutions as possible. This ensures and almost guarantees that your website will be a pleasant read, no matter what device your visitors are using. As a number one rule, you don’t want any horizontal scroll bars due to improper image handling by your theme. Any images that would otherwise extend over the content area of your website should be resized with CSS, making sure to maintain the aspect ratio to avoid distorting your content.
Furthermore, a responsive website theme will go a long way in 2015. By designing for small mobile devices first, and then gradually introducing content as the display resolution increases, you can guarantee your visitors a pleasant experience, whether they’re using a budget-oriented smartphone, or a workstation-class desktop computer; everyone is happy!
Screen Real Estate
This point stems from the previous in many ways, but I decided to go ahead and separate the two, to avoid any confusion.
As a web designer or content creator, you understand that your website is going to be viewed from a myriad of devices; desktops and laptops, smartphones and tablets, and TVs. One thing they all have in common is that they are all available in many different sizes. This can propose yet another issue with using images and photos at full resolution — screen real estate.
Screen real estate refers to the amount of physical space there is available on any given display, accompanied by its resolution. You can go ahead and use one quarter of a desktop’s 24-inch 1080p display for your header image, but on an 11-inch netbook, or a 5-inch smartphone, one quarter of the display, even at the same resolution, is still a large amount of real estate taken up by a single element, and that’s before your user reaches the important section they most likely visited your website for in the first place — the content!
This point can apply to blogs and featured images found at the top of blog posts. Keep them large enough to understand what’s going on, or to convey a point, but small enough to not distract your visitor from the main reason they arrived at your website in the first place. You can always offer clickable images that will take your users to the images or photographs in their full size, if necessary.