By Olivia Schütt • Apr 25, 2023
We all want our images to look their best when we use them in a webshop, on a website, in an app, or post to social media. In order to do this, we need to optimize them for the website or application. We shouldn't post a Photoshop layered large original file to the website as no browser can render and therefore display it. Let's take a look at how to optimize pictures without Photoshop expert skills, knowledge of pixel calculations, and without making them distorted or blurry.
What Is Image Optimization?
Media optimization (or Image Optimization) involves taking a high-res original file (e.g., photoshop, illustrator, or raw formats from cameras) and changing it to fit the need of the channel you are posting it, e.g., fast loading images (aka small files) for website & mobile applications, focused product shots for webshops, grey backgrounds for Amazon shops, or Instagram story dimensions, LinkedIn Post dimensions and many more.
You need to adjust the size of the image, the format (e.g., no psd in browsers), the image dimensions, and the resolution. You must make these changes for several versions, depending on all your output channels, and you may not have expert photoshop skills or just the proper license for it. You also don’t want to distort the image or make it look wonky since your main goal is that your viewers enjoy the image.
The images you put on your website directly affect the load speed, and that is one of the top 10 factors that search engines look at when ranking a site, so it's important that you get these images right.
Optimizing an image is not an attempt to change or add to the image but simply make it the best size and shape to fit the online space.
How To Optimize Pictures for a Website
There is more than one right way to format a picture. Some people simply compress the image before uploading it, but this can reduce the clarity of the image. You want to find a balance between an acceptable quality image with good clarity and smaller file size.
We primarily focus on three components when optimizing images. The first is cropping. If you need to select a certain part of the image, we'll take care of that immediately. From there you need to consider the file format and compression so you can get as much clarity out of your image as possible.
By using a digital asset management (DAM) platform, all of this optimization can be done in one place.
Using DAM to Optimize Your Pictures
You know you need to make your images look their best and fit properly into your website, but how do you do this? Our Media Optimization tool gives us so many options all rolled into one. You can use it to crop, resize, and sharpen your image, rename your image, and even change the transparency. In addition, this tool allows you to create embed links to add to your website.
The Media Editor
This media editor helps make advanced changes to your pictures, transforming them completely without changing the original. As you work, you can see the results instantly displayed in their preview frame.
Picturepark has the following features available in its media editor:
- Cropping using both free and fixed proportions. This is one of the easiest ways to make the image show what you want it to.
- Resizing the image. You can resize to certain scale dimensions, or resize to fit.
- Sharpening images. This allows you to bring a slightly out-of-focus photo to better clarity.
- Rotating the image clockwise or counterclockwise. Turn the image to the right or left so it looks its best.
- Replacing things in the image with the Alpha channel. If an image has an object in it you don't like, you can replace that with a color in the background.
- Converting your image into different formats. The two most common formats for web images are JPG and PNG.