Websites with optimized images load much faster, which helps increase engagement rates, retain visitors for more extended periods, and have lower bounce rates. Beyond loading times, optimized images ensure smoother transitions between web pages and less lag when users interact with the site’s features or components. This makes for a more enjoyable and less disruptive browsing experience.
Best if less than 100kb.
Some devices display more than 72 dpi. Set images between 144 dpi to180 dpi and export for web to ensure a good quality image on all devices.
Crop images before uploading (whenever needed).
Do not use important text in images.
Add text in WordPress
Decorative text can be included in images. However, responsive websites often crop images, which might cutoff some text.
Choose the appropriate file format (JPEG, PNG, or GIF).
JPEG/JPG
Ideal for photographs and real-life images due to its ability to compress file sizes significantly while maintaining reasonable quality.
PNG
Best suited for images requiring a transparent background. PNG files retain higher quality but often at larger file sizes compared to JPEG images.
GIF
Primarily used for animated images.
File > Export > Save For Web (Legacy). This brings up the dialogue box image compression.
JPEG will get a much lower file size than a PNG or GIF.
Select JPEG High in the Preset dropdown.
Check the Optimized checkbox.
Set Quality to 80.
Check the Convert to sRGB checkbox.
Save!
File > Export > Save For Web (Legacy). This brings up the dialogue box image compression.
Select PNG 24 in the Preset dropdown.
Check the Transparency checkbox.
Check the Convert to sRGB checkbox.
Save!