If you’re a business owner and trying to create your own website, the task can be overwhelming and frustrating at times. However, as more “build a website quick tools” become available, there are a lot more folks trying to build their own. Trouble is, there’s still a lot of knowledge and experience that goes into building a website, regardless of the “easy button tools.”
One big concern is performance of your website. Even if you have the coolest website builder out there, if you try to load a 2mb site image to use on your home page, it will definitely slow your website load time down. This is bad, because Google uses performance as one of its ranking inputs. But, the most important thing is that visitors will leave your site if it takes to long to load.
I’ve learned a thing or two about using images in website design, so I thought I would take this opportunity to impart some of that knowledge. My intention for this article is to focus on developing your own “best practice” model when using images.
Image Types
There are 3 main types of images, JPEG (.jpg), PNG (.png), and SVG (.svg). GIF (.gif) – Graphics Interchange Format – files can be used too, but I have never intentionally used that file type, which are mainly used for small graphics or simple animations. All three have pros & cons and can’t all be used for the same thing.
JPEG – Joint Photographic Experts Group – is the best format to use when working with larger images / photographs that you want to use as a background or as part of your content. It can carry millions of rich colors and has compression to reduce file size, but CANNOT be used with transparency.
PNG – Portable Network Graphics – is the best format to use when you need the background to be transparent. For example, you might have an icon you want to use or perhaps a round image on top of a page that has a colored background. PNG-8 (256 colors only) and PNG-24 (millions of color).
SVG – Scalable Vector Graphics – is the best format to use when you’re working with graphics, like logos. However, if you’re using WordPress, you can’t use the SVG format because the WordPress community has concerns about security when using this type of format. Read more about this debate here.
Image Sizes
Generally speaking, I’m talking about the files size of images (kilobytes or kb). SVG will usually have the smallest size and loads incredibly fast, but has limited uses, so I’ll be focusing on JPEG and PNG files. As a best practice, you always want to use the smallest image you can for the space where it will be used in the design. As a general rule, I always try to keep my images below 100kb, but the lower the size the better.
Some mistakes I’ve seen in web design is where someone is using a large file size for a small space. Fro example, the space might be 300px x 200px dimension, but a very large file size is being loaded. This will slow the page load time.
Image Ratio or Dimension
As I mentioned above, there is a correlation between the file size of an image and its dimensions. When working with background images, you might be talking about covering large spaces, especially with the size of desktop monitors. Keep in mind however, that most visitors will be viewing your website via mobile device. If you need to have a wide background image, try to reduce the file size by reducing the quality level of the image (jpeg format). You can use image quality and compression tweaks to accomplish this task.
Finally, if you’re using images inside your content or on-page, then sticking with consistent dimensions or ratios is a good idea. I like to use 7:5 or 5:7 dimension ratio when sizing my images to be used on-page. It keeps things consistent throughout the website. However, web design is about being creative, so don’t pick one size and never change.
If you need help with your design or you just don’t have time to finish, let plumThumb help. Contact us today for more information about how we can help your company online.
