For most websites these days including images is a given. However, if used improperly your images could be having negative effects on your bottom line. Unoptimized images can quickly bog down your site, causing it to load slowly and making visitors click away. It’s important to make sure you’re properly formatting and optimizing images for the web to prevent them from drastically slowing down your site. A few of the factors to pay attention to when it comes to images on your website are format, size, resolution, and file naming practices.
Choose The Right Format
The most popular formats for images on the web include: JPG, PNG, SVG, and GIF. Each option has its own pros and cons and is best used for specific scenarios. When choosing your format keep in mind the type of image you’re dealing with, how that image will be treated on the web, and the size you need it to be.
- JPG (pronounced jay-peg): Typically used for photographs and images with many colors and textures, the JPG format allows for high quality images with reasonable file sizes. They are compressible to very small file sizes, however JPGs use “lossy” compression, which means a certain amount of file quality will be lost that won’t be recoverable. For that reason, it’s important to pay close attention to file quality by looking out for blurry or pixelated images when compressing your JPG for the web. The following images are both JPG’s, but the photograph is smaller in size. The photograph is ideal for the JPG format because of its many complex colors, but the illustration has only one color and saving it as a JPG is unnecessary.
This JPG is 20 KB at 70% quality. This JPG is 24 KB at 70% quality.
- PNG (pronounced ping): The PNG format is used mostly for images that contain text or illustrations without gradients or textures. This format was designed for transferring images on the Internet and also supports transparent backgrounds, something the JPG format is not capable of. PNG also utilizes lossless compression, meaning that data is not lost when the file is compressed. Both of the following images are PNG’s, however the one-color illustration is significantly smaller in size. Unless transparency is needed, saving photographs as PNG is not recommended and will create a file that is unnecessarily large.
This PNG is 65 KB, uses transparency, and is sharp. This PNG is 127 KB.
- SVG (pronounced as letters): The SVG format is quickly being adopted by designers for use on the web because these images are vector graphics. Vector images use math to create shapes that can scale up or down without any loss of image quality (great for responsive design). Other formats, like PNG and JPG, are “raster” images made up of pixels that will see loss of quality when scaled. SVG handles compression well and allows for small file sizes, but is limited to simpler images that do not require many colors and textures, like the illustration below.
This vector file (SVG) is 60 pixels by 60 pixels and is 42 KB. This SVG is still 42 KB, even though it is 120 pixels by 120 pixels. This SVG is still 42 KB, even though it is 240 pixels by 240 pixels.
- GIF (pronounced jif): The GIF has fallen out of popularity for basic web images, due to the rise of the PNG format within the web design community. It is now rarely used for anything other than animated images due to the fact that this format can contain more than one frame.
This GIF is 456 KB and is animated.
Keep Your File Size Reasonable
Images should be small when used on the web. Anything too large will bog down a page and increase loading times – which also increases the likelihood of lost visitors. When used on the web, your image file size should be as small as possible – but definitely keep it under 1 MB. Ideally, only large background images should be even close to 1 MB. Don’t forget about file quality when reducing your file size, however! Look for the happy medium between small files and image clarity. Choosing the proper image format will also affect your file size – for example if your image is a photograph and you do not require transparency, then a JPG will provide you with the smallest file size without sacrificing clarity.
Don’t Forget About Resolution
Related to your image’s file size is its resolution. Image resolution is the density of an image, often discussed as DPI or PPI (dots per inch or pixels per inch) – depending on whether that image is meant for print or the web. The standard for images on the web is widely accepted to be 72 PPI, though what’s really important are the dimensions of the image. It’s considered smart to upload images at the actual pixel dimensions needed, rather than scale the image down in the browser using the “height” and “width” attributes. Scaling down in the browser using those attributes will force your page to download a file size larger than it needs, slowing down your page.
Use Relevant File Names
Be sure to use descriptive and relevant file names when creating your images. File names that include keywords related to the image or your website will not only make it easier for you to identify when looking at your source code, but will also make them noticeable to search engines. Alt text should also be optimized with relevant keywords, but kept relatively short. Alt text originally was designed to show a description of the image if the image can not be shown on screen, however it also adds context for search engines analyzing the image.
Can You Use CSS Instead?
If possible, using CSS instead of images for graphical elements of your web page can help your page load faster. Styling both text and graphics with CSS takes up much less space than images do. For example, the CSS properties “border-radius,” “text-shadow,” “box-shadow,” and “opacity” can replace a few image-based design elements. It also has the added benefit of making it easier to change your design and will prevent cached images from displaying incorrectly.
BONUS: Optimizing For Responsive Design
Images have always been a big hurdle for responsive design. The process to optimize any given image for a responsive site is the same as we’ve described above, however there is a difference in how browsers interact with those images. In responsively designed websites, images need to scale to fit desktop, tablet, and phone screen sizes – all without slowing down your site. There is as of yet no perfect solution, but there are a couple popular methods. One method is to set the image to scale in code so it remains in its container, no matter the screen size. This method, however, still requires images to be downloaded at a larger size which can slow down your site. Another method eliminates the need to scale in code with new HTML markup created with responsive design in mind. This is still new to the industry, however, and is not supported in all browsers. Making the choice between these two methods depends on personal preference, your audience, the context of your site or application, and what browsers you need to support.
DOUBLE BONUS: Consider A CDN
If your website is particularly image heavy, you might want to consider a content delivery network, which can deliver your content more quickly to customers no matter where they are located. A CDN will shorten the space between your website visitors and your content by storing static content, like images, on nodes around the world. This allows your visitors to be served your optimized images much more quickly.
Optimizing images is just one way to ensure a faster website without bogging down your server. After you’ve followed these tips for image optimization, check out our other tips to optimize your VPS (virtual private server) or find out if you need to upgrade your server and what steps to take beforehand. As always, our Heroic Support® team is here 24/7/365 to help with any questions you may have.