Getting images ready for a website

A photo straight from a phone is 4,000 pixels wide and several megabytes, and a page with a few of those loads slowly, especially on a phone. A logo saved as a JPEG goes fuzzy, and colours picked by eye don’t match the brand. These tools prepare a site’s images in your browser, whether it’s built by hand or in WordPress, Squarespace or similar.

1. Photos: the right size and format

Open each photo in Image Convert / Resize. Set the Width to about twice the widest it will appear on the page, so it stays sharp on high-resolution screens: 1600 for a photo in a column, 2400 for one across the whole screen. Then choose the format:

• WebP or JPEG for photos, at quality 0.8 to 0.85. WebP is usually smaller for the same look, and every current browser shows it; some site builders and email apps still want JPEG.
• PNG for screenshots, diagrams and anything with transparency or sharp text, which JPEG blurs.

To get a height that matches, such as for a 3:2 photo resized to 1600 wide, type the width and the ratio into Aspect Ratio and it gives the other side. Putting both numbers in the page’s <img> tag as width and height lets the browser leave the right space before the photo loads, so the text doesn’t jump.

The preview shows the old and new file sizes. A photo usually drops from several MB to 200 to 400 KB, and its camera details and location are removed.

To squeeze them further, put the resized files through Image Compressor. It tries many ways of compressing each one (for a screenshot, the fewest colours that still look the same; for a photo, two JPEG encoders at the lowest quality that passes) and keeps the smallest that reaches the quality you pick, usually a good deal smaller again. Save as can also try PNG, JPEG and WebP and keep whichever is smallest. Check the results that matter with its Compare slider.

2. Logos and icons: keep them as SVG

A logo drawn as an SVG stays sharp at any size and is usually tiny. Paste it or choose it in SVG Preview & Export and check it on a white and a black background: a dark logo can vanish on a dark header. If it looks wrong here, it will on the site too: linked fonts don’t load in an SVG used as an image, so text must be turned into outlines in the app that made it.

If all you have is a small PNG or JPEG of the logo, Image to SVG can trace it into an SVG: choose it, set Colours to the number of flat colours the logo uses, and Save SVG. Tracing is an approximation, so compare the result with the original at a large size, as small text and soft shadows come out lumpy. Where you can, ask whoever made the logo for the original vector file instead.

For places that won’t take SVG, such as social sites, email signatures and some site builders, Export it as a PNG at 2× or a fixed width.

3. Colours from the logo

Choose the logo or a brand photo in Image Palette to get its main colours as hex codes, and Copy CSS gives them as a :root block of CSS variables ready for a stylesheet. Choose a colour to open it in Colour Converter for lighter and darker shades and matching colours, for buttons, hover states and backgrounds.

Before using a brand colour for text, check it in Contrast Checker: light brand colours often fail as text on white, and the checker suggests the nearest colour that passes. Is my web page accessible? goes further.

4. The share image and icons

When a page is shared in chat or on social sites, it shows a preview image, usually 1200 × 630 pixels. Make one with Image Convert / Resize using Crop and both Width and Height (1200 × 630 is about 1.91:1, which Aspect Ratio will confirm), then paste the page’s HTML into Social Card Preview to see the card and get the tags. Favicon Generator turns the logo into the browser tab icon and phone home-screen icons. Getting a website ready to launch covers both in more detail.