Compress your photos or finish last

Photos make websites rock. Sometimes, websites rely so heavily on photos that having them looking bad makes the whole website look terrible. Then again, there is the question of speed, how quickly a website loads and how “heavy” it might be on megabytes it sends from the server to the user’s browser. This can even affect how your website will potentially perform in search engines, especially Google.

Image size in pixels

One of the aspects about image image optimization is image pixel size. Let’s say that you used your DSLR camera and you shot the perfect shot of a landscape you want to use on your website. First you need to consider that the size of this image will potentially be around 8000×4000 pixels or around that. This is too large for a screen to properly show as most screen sizes are quite smaller than this. Even High Definition screens only come close but not most people view websites through their 4K or 8K TVs…

So the image size in pixels has to go down. How down is a question of the box in which you are going to show the image on the website. If you have a box that sizes 400×400 pixels, its bad to plan to show an image there that is 20 times larger. So you will need to resize  the image to match that box. With this step you gain two things

  • first you optimize image scaling which is a parameter for browser website loading speed
  • secondly you optimize speed as the resized image is going to be smaller in KB size ( less detail to show in a smaller box )

 

File size in kilobytes

Image files contain more info than just the digital part of the visible canvas. There’s info about location, lens and more, known as EXIF, which you will need to strip out of the image so that no extra space is lost.

If you are using a mac, ImageOptim is one option and PhotoBulk is another. If you are using Windows, this can be done with Photoshop from Adobe.

 

Advertisements