How to prepare images for a web developer?

Based on the research conducted by WebFX specialists, people tend to leave a website if it loads longer than 3 seconds. Moreover, the speed of image loading has a direct impact on the position of a platform in Google results and the ranking of other search engines. 

Therefore, before adding a photo to a site, you need to learn all the intricacies of the process and figure out how to prepare images for a web developer, who is responsible for their representation on the net. 

When it comes to optimizing images for the web, we need to take 3 core steps – make photos look good, expedite their loading, and help search engines instantly locate our pictures. So, before sending photos to a web developer, ascertain they are of high quality, and have proper resolution, size & format.  

1. Perform Advanced Image Post Production  

To attract users’ attention to your content, you’d better use unique photos instead of stock files. Of course, this process requires more time and effort but the result is totally rewarding. It is great if you can hire a skilled photographer, who will create a perfect lighting setup, adjust exposure, and configure a camera based on a chosen photo genre. If this isn’t an option for you, don’t get despaired. You can still improve your images in any of the programs listed below.

Photoshop is a go-to program for both experts and beginners, who want to enhance their photos. It has all the needed features and tools for image retouching, advanced editing, and designing. Thanks to layer support, you can create really off-kilter projects. Such a rich functionality is a sure advantage but you need to spend some time to understand how to achieve a specific effect.

Lightroom one-ups competitors in terms of color correction and fixing lighting issues. The software also contains photo retouching instruments, which are best suited for improving portrait shots. 

GIMP is an open-source image editing program, which stands out with straightforward operation, so if you are a rookie user, you’d better start your path with this software. Here you can apply basic changes to your shots, adjust exposure, and white balance, experiment with textures, and more.

Pixlr is a free program you can use to prepare images for web. The interface is neat and clear, containing instruments for adjusting light, contrast, and other main parameters. 

Luminar contains lots of advanced instruments that operate based on AI technologies, so it is more suitable for experienced users. There are also premium effects, pre-designed templates, and cool features for editing portraits. The peculiarity of the program is that it can be used as a plugin for Photoshop and Lightroom.

2. Order Specialized Services

If you don’t like the result of image processing, you can address experts, who will make all the needed corrections flat out. Depending on the type of your shots, you can find highly specialized post production services, and get the web developer picture optimization buzz out of your mind. The team will improve your images, perform deep retouching, correct colors, fix lighting defects, remove imperfections, adjust major parameters, etc. 

The FixThePhoto company has an incredible offer for first-time clients, namely, they can place a free test order to evaluate the quality of image processing. What’s more, you can send photos in batches for a streamlined workflow.

3. Maintain a Coherent Style Across All Images  

We subconsciously seek and relish items that have something in common and this is also applicable to visual materials. So, if you want your photos to catch visitors’ eye, it is paramount to preserve a coherent style across all of them. Keep this aspect in mind when adjusting brightness, saturation, color gamut, applying styles and effects, etc. If you want to edit your images in the same style but aren’t sure whether you will manage to do it, you should opt for Lightroom presets. 

Another factor to consider is that all photos should have the same orientation. A site where vertical and horizontal images are published randomly looks very sloppy. 

4. Choose the Right Resolution

The resolution of images plays a key role in how they will look on a site. Even a perfectly retouched photo is unlikely to cause a wow effect if the resolution isn’t up to standards. The general rule is to keep the highest resolution, even though the size will be much larger than necessary. A web developer will be able to reduce the resolution to the desired one without loss, but if you send a photo in low resolution, the developer won’t be able to increase it, and the picture will look disappointing. 

Most computer monitors have 72dpi or 92dpi, so anything above these values is too much and results in unsolicited large photos. Some programs, that you can use to prepare images for web, e.g., Photoshop, make the task simpler for users, allowing them to save files with the web requirements taken into account. So, you instantly receive web-friendly photos. 

5. Remember Picture Cropping 

Too big photos make the loading time unbearably long and there is hardly a person willing to wait more than several seconds. However, too small images look unprofessional. Every site has its own size limits, so before sending a photo to your web developer, clarify this point.

Depending on where you want to place pictures on the site, you need to customize the dimensions. In most cases, a photo should not be larger than 1200 x 900 pixels. 

However, there are no universal standards for all websites. Every resource is unique and consists of different elements, so dimensions may vary. Anyway, before starting to crop photos, get in touch with your developer to learn what dimension he/she suggests. You can also use the sizes that are perceived as standards for images – 1100 x 768 pixels if we are talking about full container width of 1140 pixels.

To learn the size of any element on a website, you can take advantage of Google Chrome’s “inspect element” feature.

6. Remove Metadata

You can also optimize photos by zapping metadata. Each image contains additional information that greatly increases its size. This data includes the date and time a picture was taken, location, camera information, settings, and more. Contact your web developer to clarify whether deleting metadata won’t degrade a photo quality. If yes, go for it.

The procedure consists of several simple steps:

1. Head to the folder with the needed photos.
2. Select the file(s) you want to ditch metadata from.
3. Right-click and choose Properties > Details tab in Windows.
4. Select Remove Properties and Personal Information.
5. Click Create a copy with all possible properties removed. Remove Properties Windows
6. Confirm the action by clicking “OK”. Done.

You will receive a copy of a photo without metadata, while the original file containing this information will be on your device.

7. Select a Suitable Format 

Format variety may cause confusion, especially for those just learning how to prepare images for a web developer. Anyway, you need to be very serious about this matter, as sending pictures in the wrong format to a web developer, you risk receiving photos of poor quality because an expert will have to use a converter. You can choose different formats based on the type of photos. Almost all pictures on the net are saved in JPEG, PNG, GIF, or SVG formats. 

1. JPEG 

Most digital cameras automatically save images in JPG format, which is the recommended format for sending photos. This format supports 16.7 million colors, which is the main reason why it is chosen in default camera settings. 

2. PNG

It works best if you need high-quality graphics with a transparent background, e.g., logos. Similar to the previous format, PNG supports 16.7mln colors but such files are much larger. Of course, you can save pictures in PNG if you don’t mind the size. 

3. GIF

GIF is the most suitable format for saving photos with many areas of the same color. It supports 256 colors and will fully satisfy your needs if you create animations. Most images on the net are either in GIF or PNG formats. 

4. SVG

If you mainly work with vector graphics, you should opt for SVG. This is a relatively new option that has many advantages: scalability, SEO optimization, and resolution independence. However, some browsers don’t support it. 

8. Image Compression Is a Must

Preparing a web developer picture, you should never skip the compression stage. The easiest way to cope with the task is to use TinyPNG or TinyJPG services. They can accurately reduce file size without compromising its quality. Compressed photos are quicker and easier to send, which is advantageous both for a sender and a receiver. 

Before saving an image as a compressed file, you need to ensure its color mode is set to RGB, which is a widely-accepted Internet standard. RGB files are smaller than CMYK ones because they have 1 less color channel. 

9. Use Understandable Captions 

This may sound like trivial advice, but you should always pay attention to the way you sign your pictures. If you want your web developer to put pictures in the right places, in the appropriate sections or pages on the site, develop a clear system of captions for yourself.  

This can be a short description of what is depicted, or an indication of ordinal numbers or dates – use a method that you and a partner-web developer understand. In addition, you can group images for more convenience (e.g., create separate folders for different sections of a site or content types).

10. Add Alt Tags

Once people upload an image to their website, they often forget to fill in additional information. But like the filename, this information is very important for search engine optimization.

Site visitors won’t see Alt tags (or Alt text), but such data give search engines a basic idea of what every photo is about. So, once you’ve added an image to your site, be sure to fill in the alts box with a phrase describing what’s in the picture, preferably with a target keyword. 

Fortunately, you don’t have to come up with suitable alt tags yourself but can use specialized services that will generate such text. Most of them work online and don’t require signing up. The most reliable resources are Acadecraft, Eduventum, and GravEiens, but you can choose any other option you like.