Once upon a time, about 20 years ago, there was Mosaic. Mosaic is often credited with starting the World Wide Web as we know it today. It was the first browser that allowed images to be displayed inline with text, rather than having a separate window popup for each image. Although it wasn’t the first graphical browser, it caught on with the wider public.
Back then colour screens with 256 colours were relatively new, and we were all on dial-up Internet, the aim was to get your images to download, full stop. How they looked was secondary.
Fast-forward to today and things are very different. As people buy increasingly higher resolution screens, we need to make our images look great. On the other hand, Google would like your Web pages to load in one second, even on mobile devices. So how do you make your images look good and load fast? In this article, we’re going to cover the basics of optimizing your images for WordPress.
Is an Image Really Required?
Of course the first question you should ask is do you really need an image when text, symbols, and simple logos can be replaced with web fonts and other CSS effects that can possibly do the job better, faster, and in a responsive way. Any text element such as banners and buttons that are created from images should be replaced with non-image formats. However, if you need to use an image read on.
Raster Versus Vector
Raster images are made up of a grid of a fixed number of pixels. They don’t scale well, and enlarging the image will result in jaggies and pixelation as the grid pattern becomes visible. Images created in a digital camera and programs such as Adobe Photoshop are raster images. The image quality setting will determine the size of the saved file. This could be as large as 7360 x 4912 pixels with a high end SLR camera; such an image would be well over 36MB in size. Clearly this is way larger than required for WordPress use.
The problem of making your pages look good on all sorts of screen sizes yet load fast is something that plays on my mind a lot. I got to the point where I use SVG for as much as I can, dispite some browsers not supporting it. It seems today you have pretty much 3 choices
Beautiful pictures at the expense of speed and UX
Beautiful SVG at the expense of people with old browsers loosing out (the minority)
No SVG or Pictures usually leaving your page boring and texty (I know all about that! )
TBH these days I am getting to the point of just leaving users with old browsers with a warning message saying that to get all the benefits of the site they need to download an up to date browser.
Developing to always cater for the minority with old browsers holds back progress. It means the majority who do have up to date browsers don’t get the responsiveness and functionality they should enjoy. It also makes it much more expensive because of all the work arounds and extra browser specific bugs.
An up to date browser is free, usually safer, and almost always better! Just download one for petes sake, it takes 2 minutes.
rant over
Having said that, I fully expect some people disagree with me on this.
Good article. A few points about GIF files. One of the 256 color values may be transparent. Also GIFs are of increasing popularity these days because they are currently the only image format which supports animations.
Very good info in the article. I recently discovered a tool called Kraken for optimizing images. Takes the drudgery out of what could be a very tedious task. I was able to optimize all of the images on my WordPress website in a flash. They also support web uploading images, I believe Dropbox and other methods.
Now, Kraken doesn’t resize images for you, but compresses them just right and removes unneeded data from the images. Typical savings for already compressed images was around 40% for me. Anyway, here is the link: https://kraken.io/
I agree with that, and we generally no longer support older browsers or check to see if sites work on them.
In saying that, we are doing some work on websites for some Asian countries where Internet speed and browser versions are slow/old so sadly we must make sure everything works and runs as fast as possible by keeping any raster image usage to a minimum
)