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.
Continue reading %Optimizing Your Images for WordPress%
by Andrew Renaut via SitePoint
No comments:
Post a Comment