Preparing photos for the web - Tips and Tricks
It’s not the first time you hear “a picture is worth more than a thousand words” and it is one of the main reasons why images are so important in modern business. Some of the case studies are showing that almost 40% of the visitors will actually leave if a website is loading more than 3 seconds. One of the elements that have a major impact on website speed is the size of the media files (images and videos), that’s why it’s really important to find an adequate balance between the size and quality of used files.
If your site has tons of images (for example, an e-commerce site with a lot of products)
In order to get the most out of it, here are few tips to prepare your images for the web:
1.Resize your images
The initial step is this - find an adequate dimension for your images. There is a big difference in where the image file is used and what’s its function. If you need a big slider image then of course you’ll use an image with large dimensions that will be smooth in all screen sizes. However, if you’re creating a small product gallery image, where the gallery box is small 300x300 pixels in size, what’s the point of using a picture that is 3500x3000 in dimension?
For most of the time, you probably won’t be needing images that are bigger than 1920x750, but our advice would be to check that with your designer or developer.
2. Choose the right format
Needless to say that images should be high-resolution and sharp. But this comes with a cost - HQ images are often really big and their size can vary from format to format. Some of the most used types of online images are:
Jpg (also known as Jpeg)
Png
Gif
Each of these file types has its own purpose and that’s why you should know the difference between them, in order to put everything in its place.
Working with jpg (jpeg)
Jpeg is probably the best format for photographs and complex images that have a lot of colors, shades, contrast, etc. It has a huge color palette and it can handle these kinds of requirements.
This allows you to adjust and save the images exactly as you need them to be and find the balance between size and quality.
Working with png
This is also another very popular format. The biggest difference from JPEG is that it can handle transparency, therefore it’s commonly used for elements that shouldn’t have a background or created as an additional layer.
Working with gif
This image format was having its peak several years ago. Since the color palette is smaller (GIF files are restricted to only 256 colors) it's commonly used if image dimensions are smaller and not as detailed, and it should never be used for product photos.
Image editing software
Probably without any competition, by far the best professional tool for image edit is Adobe Photoshop. This is expensive, but a really powerful tool used by professionals, designers, and artists from all over the world.
However, if you don’t have the necessity for your profession, it’s highly unlikely that you’ll have your copy of the program. Thankfully, there is a huge variety of online editing tools, such as Kraken, Pixlr, Skitch.
With Publitio, you have the option to prepare and store image from where you can easily access and manipulate. Easy to use interface allows you to upload, list, and edit files, add watermarks, and track your files.
To wrap up things - Optimizing images for the web is a really important step in the process and the sooner you realize that, the better. Even if you save a small percentage on each image on your site, with the growth of your e-commerce you’ll have huge savings in space and site loading time.
If you are looking into perspective Digital Asset Management software, Publit.io might be the right solution for you. It can store, optimize, resize, edit your media files. Read our recent blog post about digital asset management tips.
