Get the free website mini course and learn how to set up your website like a pro.
Images are an important design element of a website. We love images. The bigger the better, is the current saying. But often images are uploaded as too large file and the result is a bad loading time of the website. This scares away visitors who are not very patient on the web, as well as Google.
So how do you upload images that don’t hit load time, but still look good?? This is feasible. Here you learn how!
Creating the right image size for websites – the basics
Before I show you which tools you can use to resize your images easily to the right size, you should understand the basics.
For the processing of your images you can distinguish between the following parameters, which all play a role:
- Image format = what the image will be saved as: jpeg, png, gif, svg
- Image size: the width and height of the image in pixels
- file size = memory size in KB and MB
- Resolution = DPI or PPI – how good is the quality of the image
In the following I will go into detail on the individual points.
What format should images have on the web?
You choose the right image format according to what you want to use it for:
JPEG is best used for Photos and when color fidelity is important. It has the advantage that it can be compressed very well, with very good image quality at the same time. Therefore, we use this format for all images on the website, except for images with transparent backgrounds.
PNG is best suited for Logos and graphics with transparent backgrounds. It can also be compressed. Since the colors are reduced, it is mainly suitable for cropped images with transparent background. Because transparent backgrounds can only be created in png format.
SVG we often choose as Alternative to cropped logos in PNG format, as the quality is better. However, SVG files cannot be uploaded to WordPress by default. For this you still need a plugin, like for example. SVG Support
GIF is suitable for Animations, like animated graphics.
How big should images be for the website?
Which image size is right for your website depends on exactly where it will be used. Ideally, upload images only as large as you actually need them to be. How to determine the right sizes, I will show you now.
Optimal image sizes for web pages are standard:
Full width images (which fill the whole screen width) you should use 1920px wide its. If they are too small, they become blurry. If they are too large, they take up unnecessary memory and longer load times.
After that the width, depending on the area of application reduces again significantly. Enclosed you find a sketch, which gives you orientation, how wide the image should be in pixel depending on the use:
Here I show you a way to find out the exact image size directly on your website
The right file size for your images: How many KB should an image have?
As a rule of thumb for images on the website: Large images, Full-width images should be maximum 130 – 250 KB have. Small images ca. 50 KB.
Icons have to be loaded very fast and should therefore be max. 10 KB have.
It is not always feasible, but a good guideline, where it is possible without loss of quality. See that you get as close as possible to these values. Your loading time will thank you.
The right resolution for good image quality
Images should of course not be blurred or distorted. Compression makes sense only up to a certain degree, so that the resolution of the image does not suffer from it.
On the web it is enough Resolution from 72 dpi from.
The best way to check the quality of the image is to view it on the screen at the size you want to put it on your website.
How to save images for web?
Photoshop has the possibility to save images already compressed for the web. If you use Photoshop, click on "File"> "Save for Web". Then choose the file format (JPG, PNG-8 or PNG-24) from the appropriate menu.
Also Gimp has the possibility to save the images compressed for the web right away.
In practice: With these tools you can optimize and properly prepare images for the web
Photos coming from the camera are thousands of pixels in size. These must always be optimized before you upload them to the website. I always proceed in two steps:
- Scaling images for the website
That is, I reduce it to the actual width that the image needs on the website. You have just learned what width the images should have. - Compress images for the website
In the second step, the file size of the image is reduced, i.e. compressed. So that it has only a few KB in size. This is important so that the image is loaded quickly later on.
Image optimization tools:
How to optimize images for search engines?
Name pictures immediately with a meaningful file names, which Search term of the page include the image you want to put on the website.
For the indexing by Google the file name plays a large role. If a user searches z.B. in the Google image search for the word "cat scratching post", images with the file name "cat scratching post" are displayed.jpg" always rank higher than pictures with the original filename of the camera.
After uploading the images to the website’s media library, you should also add the keyword to the image in the title and alt tag of the image accommodate.
Google meanwhile recognizes the connection between the content of a text and the images used. Therefore you should Place images in the appropriate text passages.
If we stay with the example of the cat scratching post, the image that shows a cat scratching post with 3 floors should also be placed in the text section where it is explained that the cat scratching post has 3 floors.
Conclusion
It is actually quite simple to reduce pictures to a maximum necessary size and then scale them again. Especially with regard to fast loading times you should not do without it and always include this small intermediate step.