Sharing on the web
You now know how images are built and compressed. This lesson puts that to work for the places pictures end up: websites, social platforms and chat apps. It covers sizes and shapes, serving images well on a web page, describing them for people who cannot see them, and making sure you are allowed to post them and are not posting more than you meant to.
Sizes for social platforms
Each platform shows images at certain sizes and shapes. If you upload something else, the platform resizes, crops and re-compresses it, often badly. Preparing the image yourself keeps control of the crop and the quality.
Platforms change their recommendations from time to time. Rather than a list copied from somewhere, here are the sizes the Dhiva Labs apps build in. Creator Toolkit's Social Media Presets export a JPG at exactly these sizes:
| Platform | Preset | Size (px) | Shape |
|---|---|---|---|
| Square Post | 1080 × 1080 | 1:1 | |
| Portrait Post | 1080 × 1350 | 4:5 | |
| Story / Reel Cover | 1080 × 1920 | 9:16 | |
| Landscape Post | 1080 × 566 | about 1.91:1 | |
| YouTube | Thumbnail | 1280 × 720 | 16:9 |
| YouTube | Channel Banner | 2560 × 1440 | 16:9 |
| YouTube | Community Post | 1080 × 1080 | 1:1 |
| TikTok | Video Cover | 1080 × 1920 | 9:16 |
| TikTok | Profile Photo | 400 × 400 | 1:1 |
| Shared Post | 1200 × 630 | about 1.91:1 | |
| Square Post | 1080 × 1080 | 1:1 | |
| Cover Photo | 820 × 312 | about 2.6:1 | |
| Event Cover | 1920 × 1005 | about 1.91:1 |
Most are saved at quality 85. The YouTube Thumbnail preset starts at 90 and steps the quality down until the file is under 2 MB, which the guide gives as YouTube's thumbnail limit. See Social media presets.
Other apps use their own presets:
- CompressX Image Compressor: WhatsApp (longest side 1600 px, quality 75), Instagram (1080 px, quality 85) and Website (1920 px, quality 72). These shrink the image but keep its shape. See Presets.
- DL Image Tools Resize tab: Instagram Post 1080 × 1080, YouTube Thumbnail 1280 × 720, Twitter/X Post 1600 × 900, Facebook Post 1200 × 630, LinkedIn Post 1200 × 627. See Resize presets.
Crop to fill, or fit inside
When the photo's shape differs from the preset's, the apps behave differently. Take a 4:3 phone photo, 4032 × 3024, and a 1080 × 1080 square:
Creator Toolkit preset: fill, then crop DL Image Tools preset with the lock on: fit
scale to 1440 × 1080, cut 180 px each side scale until it fits inside, no crop
┌──┬──────────────┬──┐ ┌──────────────────┐
│░░│ │░░│ │ │
│░░│ 1080 × 1080 │░░│ │ 1080 × 810 │
│░░│ kept │░░│ │ │
│░░│ │░░│ └──────────────────┘
└──┴──────────────┴──┘ the full photo, but not square
░ = cut off- Creator Toolkit's presets always keep the centre, so put the subject near the middle. Small photos are enlarged to fill the frame and may look soft.
- DL Image Tools fits the photo inside the box. To get an exact square, use its Crop tab at 1:1 first, then resize. Turning Lock aspect ratio off forces the exact size by stretching, which distorts faces.
Images on a website
A web page should send each visitor an image no bigger than their screen can show. A 4000-pixel photo shown 800 pixels wide on a phone wastes data and slows the page.
Rules of thumb:
- Size for the display, times two. Phones and many laptops have high-density screens with two or more device pixels per CSS pixel, so an image shown 800 pixels wide looks sharp at about 1600 pixels. CompressX's Website preset (1920 px) suits a full-width photo.
- Use a modern format with a fallback. WebP or AVIF for browsers, JPEG for the rest.
- Compress for the web, around quality 70 to 80 for photos. Check it at 100% zoom.
Responsive images in HTML
Responsive images let the browser pick the best file. The srcset attribute lists versions of the same picture with their widths; sizes says how wide it will be shown:
<img src="bluebells-1600.jpg"
srcset="bluebells-800.jpg 800w, bluebells-1600.jpg 1600w, bluebells-2400.jpg 2400w"
sizes="(max-width: 800px) 100vw, 800px"
width="1600" height="900"
alt="A dirt path winding through a beech wood carpeted with bluebells"
loading="lazy">The browser works out which file it needs for this screen and downloads only that one. width and height give the shape, so the page does not jump when the image arrives. loading="lazy" waits until the image is about to scroll into view.
To offer newer formats, wrap it in a <picture> element. The browser takes the first <source> it understands:
<picture>
<source srcset="bluebells.avif" type="image/avif">
<source srcset="bluebells.webp" type="image/webp">
<img src="bluebells.jpg" width="1600" height="900"
alt="A dirt path winding through a beech wood carpeted with bluebells">
</picture>You can make the versions with the Resize and Convert tools in DL Image Tools, or with Dhiva Tools, whose Image Resizer puts the new size in the file name, such as photo-1280x960.jpg.
Alt text: describing images
Alt text (alternative text) is a short written description of an image. Screen readers, which blind and low-vision people use, read it aloud. It also shows when an image fails to load, and search engines use it.
| Image | Weak alt text | Better alt text |
|---|---|---|
| A product photo | image | Blue canvas backpack with two side pockets |
| A chart | chart | Bar chart: sales doubled from March to June |
| A screenshot of an error | screenshot | Error dialog saying "Disk full, 0 bytes free" |
| A decorative divider | line | Empty: alt="" so screen readers skip it |
Good alt text:
- says what matters about the image in this place: the same photo may need different alt text on a shop page and on a news story;
- includes any words that appear in the image;
- skips "image of" or "picture of", since screen readers already say it is an image;
- stays short, a sentence or two. Put long descriptions, such as all the numbers in a chart, in the page text.
Do not leave the alt attribute out altogether: some screen readers then read out the file name instead, such as "IMG underscore 4512 dot jpg".
Most social platforms let you add alt text when you post, often under an accessibility or "alt" option. Use it.
Copyright and permission
Finding an image online does not mean you may use it.
- Whoever takes a photo or makes an image usually owns its copyright, automatically, without registering anything. Using it without permission can lead to takedowns or claims for payment.
- Licences say what is allowed. Creative Commons licences are common: CC BY lets you reuse with credit to the creator; NC adds "non-commercial only"; ND means "no changes"; SA means "share your version under the same licence"; CC0 gives the work to the public domain. Stock photo sites each have their own terms; read them.
- Credit is not permission. Writing "photo: someone" under an image you were not allowed to use does not make it allowed.
- People in photos have rights too. Ask before posting photos where people can be recognised, and always ask a parent before posting other people's children.
- Your own photos are the safest choice. Laws differ between countries; when in doubt, use your own pictures or ones with a clear licence.
Stay safe: remove location before posting
Lesson 2 showed that a photo's EXIF data can hold the exact place it was taken. Before posting publicly:
Check whether the photo has EXIF. The Metadata tab of DL Image Tools shows Metadata (EXIF): Available or Not available for a JPG.
Remove it. Turn on Remove metadata (EXIF) in CompressX's Image Compressor, or compress, convert, resize or crop the photo in DL Image Tools, which removes EXIF from every result.
Check the new copy the same way, and post the copy, not the original.
Only trust a tool to remove metadata if its documentation says so. Some tools carry EXIF through to their results.
Look at the picture itself too. Metadata is not the only way a photo gives away a place:
- house numbers, street signs and the view from a window;
- car number plates;
- school uniforms and badges;
- documents, screens, boarding passes and tickets (their barcodes can hold your booking details);
- keys and ID cards, which can be copied from a clear photo.
Crop or cover them before posting, and remember that once a picture is public, deleting it later does not remove copies other people saved.
Check yourself
Question 1 of 6
You export a 4:3 photo with Creator Toolkit's Instagram Square Post preset. What do you get?
What you learned
- Prepare images at the size and shape a platform expects; the apps' presets give exact sizes.
- Creator Toolkit's presets fill and crop from the centre; DL Image Tools' presets fit inside unless you crop first.
- On a website, serve images near their display size (times two for sharp screens), with
srcsetand modern formats. - Alt text describes what matters about an image, in a sentence; decorative images get
alt="". - You need permission or a licence to use other people's images, and consent to post recognisable people.
- Remove EXIF location and check the picture's background before posting.