Using and Serving Complex Images in WordPress

Need WordPress Hosting?View Our Plans
Images optimized on a laptop screen.

Websites get bigger and bigger every day. Whether it’s embedding auto-play video, ebooks and PDFs, or a slew of pages and posts, sites can take up quite a bit of bandwidth depending on their content. The average website has almost doubled in size over the last three years. This is thanks to the ever increasing size of image files that individuals are putting onto their pages. Large images can slow down load times. When developing a site, what is the best way for you to keep image size to a minimum?

SVG Images

Scalable Vector Graphics are not technically images. These are an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images have the potential to be much smaller than PNG or JPEG images, as long as you use simple colors. Most applications for SVG images are for logos and icons.

There are two issues with SVG images: complexity and security. Creating SVG images requires a vector based program like Adobe Illustrator—and additional knowledge for creating them well. Since they are XML there is a possibility for them to execute code that can be hidden, which causes a security issue. For this reason WordPress does not currently allow SVG images to be uploaded without altering code or using a plugin. If you are going to use SVG images you want to be sure to sanitize them either with custom code or a plugin like Safe SVG.

Scaled Images

A common issue that various site testing tools will mention is that you should serve scaled images. This means that you are currently sending a larger image than is necessary. Not only is this causing your site to use more bandwidth than it needs to, it is also using up more memory and processing power on the user’s device. You should size all of your images to only be as big as your markup is asking for.

In Photoshop or image editing program when you go to save for web as a Gif, JPEG, or PNG be sure to set the width and height to the largest setting you will need. If you have multiple writers adding images to your site, you might consider creating a function or using a plugin to resize after upload, like Resize Image After Upload. In WordPress, make sure you are generating thumbnails for smaller sizes as well. Finally, be sure to specify image sizes in your HTML markup using the width, height, and srcset attributes.

The biggest thing to consider when building a website is how many individuals will be accessing it through a mobile device. Larger images take a very long time to load through these connections, and this could cause visitors to leave your site before they have a chance to see it. In addition, Google is now starting index mobile sites first on all new domains. If your site isn’t performing well on mobile, your site will rank lower on search listings. Plain and simple: always think about mobile first, whether it’s load times, design, or UX.

Want more tips on how to keep your site running as smoothly as possible? Be sure to follow our blog and subscribe to #PressOn News. Every Tuesday we’ll be posting the latest industry news, tips, tricks, and strategies to help your business grow.