6 Ways to Optimize Images On Your Website

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.

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.

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 used informally in Slack and messengers.

1. 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. Photographs is ideal for the JPG format because of their many complex colors.

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. Unless transparency is needed, saving photographs as PNG is not recommended and will create a file that is unnecessarily large.

2. 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. Try to keep images under 100kb if possible, but definitely under 1mb. Don’t forget about file quality when reducing your file size. 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.

3. 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.

4. 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 to add SEO value.

5. 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.

6. 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.

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 Virtual Private Server (VPS).