It’s important to use the right size images to load the web quickly. We will advise you on how to do it. And we’ve found free graphics to help you.
Images and icons are an important element of the site that grabs the reader’s attention and visually separates and clarifies the information. In order for readers to have a good view of your site, keep in mind 3 things – concise image, its optimal size and proper naming .
Image selection
The key is to have photos and high-quality images before playing with them. You can find photos of various situations and objects in good photobanks . If you want to show your offices, employees or your products, leave the photo banks aside and contact a professional, or go to the photo shoot yourself. Then save the photos in PNG format.
TIP: If you take pictures of your products yourself, take care of the preparation of the photographic environment. For example, using custom lighting box .
Graphics Programs – Top 7
PicPick is a handy program for taking screenshots and editing them. You’ll appreciate it if you only want to capture part of the screen and don’t want to crop the image afterwards.
You will fall in love with the Online Tool Canva . You’ll create graphics you can think of – business cards, posters, invitations and social media images in the right format. You can choose from ready-made templates or create your own design.
PicMonkey will help you with collages . These are suitable for social networks, for example.
Pixlr is a tool with advanced features . You can edit images in the web interface or on the mobile app.
Fotor boasts a description of “like online Photoshop”. You can edit images in it, add effects or captions. Guides and tips are available online.
Gimp is one of the sophisticated graphics programs for image editing, retouching and drawing . Just download and install it, all for free. It competes with paid tools for features and uses.
Photopea is a hilarious free graphic editor from a Czech programmer. Works entirely in a web browser , works with layers, drag & drop, or even color blending.
Correct image size for the web
How do you handle image resolution and size? The quality of the images depends on their location – the better ones are suitable for printing, the lower ones are enough for the web. We want to browse the web quickly, so the rule applies – the smaller the images, the faster the page will load.
Images on the web are sufficient to be 300k or smaller . If you have a full-page image (perhaps in the background), it should be no larger than 1 MB.
Image dimensions are measured in pixels. For a better idea, our opening image is 640 x 425 large. Remember to keep the aspect ratio when resizing your photo.
Image resolution (or quality) is measured in dots per inch (dpi). This means that the more points on the same area, the better the drawing and the quality of the photo. Images for the web will fulfill their purpose with a resolution of 72 dpi. The good news is that most graphics tools store images at a resolution suitable for the web, and you don’t have to edit it anymore.
4 image optimization tools
TinyPNG for optimizing PNG images.
JPEGmini reduces JPEG images.
Compressor.io handles JPEG, PNG, GIF, SVG formats.
Kraken.io also handles multiple formats and optimizes more images at once for a fee.
TIP: Do you already have your website? Check load speed , PageSpeed from Google will also give you tips on how to improve your page.
How to make traceability
Name the images on the site according to what they display and the search engines will reward you. How? Improve your position in natural search . Robots in search engines crawl all pages, their content, links and images, but they “see” everything only in text form. And so the title of the image “fotka1.png” does not tell the robot anything about relevance, and he prefers “tatry-krivan.png” in the search results.
To make it even easier for search engines, fill in alternative text or alt tag (in administration of the content management system or in the source code). Concisely describe what is in the picture and, if possible, use keywords naturally.
TIP: When naming images use the same format, write in lower case, without diacritics, and separate words with a hyphen. On the one hand, you will clarify the list of your images and also help search engines determine their position in the search.