How To Optimize Images for Websites
Web Optimization How To Optimize Images for Websites Julian Miller Creative Director – South County Creative Best Way to Add and Optimize Images to Your Website. One of the most important and challenging parts in designing a webpage is how to select and optimize images. Yes, all content is important, but in this case; less is more. What if you don’t have a team of photographers and graphic designers at your fingertips? Then you are left to explore the internet and figure it out on your own. And deep down you know it’s important too. Selecting the right images leads to better visual appearance and engagement on your website. It also leads in conveying information more effectively and help strengthen or build your brand You may be confronted with several questions: What file type should I use for images? .jpg, .svg, .png, .jpeg(didn’t I just mention that?), and that weird one that iPhone use for some reason? I uploaded my photo but it’s taking forever to load on my page? Why is my image blurry or stretched (or both!!)? Where can I find a photo that isn’t copyrighted? If you have struggled with any of those questions, then I feel your pain. I’ve been there. This article will hopefully help answer some of these questions and more. JPG vs JPEG vs PNG vs SVG. I’m so confused… Developing a striking and relevant website requires many things, but none more important than images. There are many formats for websites but the most important three are JPEG, SVG and PNG. As a web developer I use these formats for the following purposes: JPEG (or JPG): for images SVG: for icons, shapes, or dividers PNG: for logos, icons, and anything requiring transparency JPEG vs JPG what is the difference? For most of us, they are essentially the same thing. If someone says JPG (pronounced Jay Pee Gee) or JPEG (pronounced Jay Peg) they are essentially saying the same thing. I’m sure there will be some in the comment section pointing out why this is SOOO wrong, but there has never been a single experience in my time as a web developer where one was preferred over the other. They are the same. Period. Personally, I like JPEG because it is more fun to say “Jay Peg”. Almost sounds like a bird. Why would I use a JPEG? For almost every image I use online I immediately default to JPEG. This is perfect for pixels and clarity and can be optimized to reduce size while not reducing image quality. Where Can I Find JPEG images for my Website? I love using stock images for web resources. Especially when I need something standard almost as a place holder. For this I use Unsplash Personally, I use Unsplash for almost all my projects. Especially if you need some placeholder images or just something to help set the vibe. Unsplash really is the gold standard. But wait! Theres more! If you are looking for other examples of online image galleries, you can try one of these Pexels: claims to be the best free stock photos, royalty free images & videos shared by creators online. It has a similar experience to Unsplash and has over a million high-quality images, and you can download them without signing up. Pexels also provides browser extensions and plugins for easy access. Pixabay: makes a similar claim to Pexels as “Stunning royalty-free images & royalty-free stock”. They offer over 4.4 million+ high quality stock images, videos and music shared by our talented community. Like Unsplash, it allows direct downloads without registration. Openverse: is an open-source alternative to Unsplash and part of the WordPress Project. It has “more than 700 million creative works” and offers the Creative Commons Licence for all its images which means you can confidently post their content on your website without fear of lawyers *(read the fine print of course). Wikimedia Commons: If you are familiar with Wikipedia, then this will feel very familiar. It offeres a vast repository of freely usable media files, including images, audio, and video. It’s a valuable resource for educational and creative projects. Freepik: While Freepik offers more than just photos (including vectors and illustrations), it’s a great source for visual content. It also offers templates and paid content. Im not very familiar with it, but its another resource that might be helpful. Zoinks! Those Images Are Really Large! Are They Too Big For My Website?! Yes and yes. Next question? Jk. Yes many of the images you download from Unsplash or one of their competitors are by design massive images. They are intentionally large because they are meant to highlight the photographer or designers image as the absolute highest quality. Some of these images can be 20 or more megabytes (mb). While beautiful, they are horrible for SEO and your website will crawl like it’s the 1990’s and you are on that 65k dialup modem (remember the noises?). You will ABSOLUTELY NEED TO OPTIMIZE IMAGES. Yes, I am yelling and it’s for your own good. Setting out to optimize images sounds complicated but it is not. There are many online resources that are incredibly easy to use and even offer options to tweak the quality. A good rule to live by when optimizing images is keep all image sizes as small as possible body images around 200-350 kilobytes (KB) Header/Hero Images between 700-900 KB Depending on heigh of image and if it goes full screen left to right. * For reference, 1000 kb is equivalent to 1 mb. The problem you will need to accept is image quality. The image quality will go down but there are a few tricks you can use to avoid this: Choose images that do not need to convey a lot of detail. While beach sunsets are beautiful you don’t necessarily need to see every H2O molecule in the waves. Add an overlay: you can layer a color over your photo and set the opacity to go from 0 to
