Compressed images can look nearly identical to much heavier uncompressed images. The image on the left is The image on the right is much smaller Photo: Robert Bye. One can compress images manually using software such as Adobe Photoshop , ImageOptim , or Squoosh , to a name a few options. Or one could optimize automatically via a number of solutions, including content delivery networks, application programming interfaces, and scripts or packages. This example from Imgix, an image-optimization CDN, shows an original 3.
In an article about image optimization, the Google Developers site recommended several solutions. In his excellent article about image optimization, developer Ilya Grigorik points out that uncompressed raster images are made up of pixels and that weigh 4 bytes each on the initial load.
Thus, a x pixel uncompressed raster image is 40, bytes 10, x 4. To convert bytes to kilobytes, divide by 1, So 40, bytes works out to be about 39 KB. Imagine that you have an image that will be displayed on the screen at x pixels. At this size, the uncompressed raster image would be 72, pixels. Each of these pixels requires 4 bytes, for a total of , bytes or about KB uncompressed. An oversized image at, say, x pixels would be much heavier. Mobile users expect fast-loading sites and will start to abandon after several seconds.
The biggest cause for slow-loading is oversized image payload. Typically, developers choose from 4 options to load images on mobile devices. None of the 3 approaches provide fast-loading pages. A much more elegant solution combines Device Detection , real-time image resizing , and an image-CDN that caches previously resized pictures. With proactive device detection, you recognize the mobile device and all its relevant characteristics e.
Once you have this device intelligence, you can resize your full-size image in real-time and deliver via a CDN. And the next time, you need that image size, it is instantly available in the cache. We call this solution ImageEngine. This not only reduces the number of file requests you can make but also limits the number of simultaneous visitors who can view your website.
What to do if the number of images on your website cannot be reduced? Unless your page content is predominantly about a particular image, it is prudent to place thumbnail image inline with content and link it to the original image.
You can also try using a low width, low-quality image or if the content permits, just a placeholder. The visitors can see the actual, bigger picture on demand. The demand can be programmed to work with a tap or a click, or even a mouse hover with some JavaScript. Yeah, there's still hope! These last techniques should get great results:. Use correct image format : Use JPEG image where a deterioration with lossy compression for photographs is okay, instead of the lossless compression of PNG images.
So using the WebP format would be better. Use CSS3 methods : Using CSS3 methods, it is possible to replace images with gradients and shadows that create visually appealing effects. Editor's note: If you're here for SEO purposes, keep in mind that speed is only one of many factors that impact search engine rankings.
We cover other technical SEO issues here and here. Do you have an issue not covered in this article? Please feel free to share your views in the comments. About the author Limor Wainstein Editor at Agile SEO 10 years' experience writing technical articles and documentation for various audiences, including technical on-site content, software documentation, and dev guides.
Websites are ubiquitous. It has been observed that nearly two-thirds of web content is made up of images. Tweet this quote. Limor Wainstein Editor at Agile SEO 10 years' experience writing technical articles and documentation for various audiences, including technical on-site content, software documentation, and dev guides.
0コメント